Expand website and game trackers

src/lib/catch-em-all/PokemonDetails.svelte

@@ -1,4 +1,11 @@
 <script lang="ts">
+	import { pokemonImage } from '$lib/game-tracker/game-art';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { NativeSelect } from '$lib/components/ui/native-select/index.js';
+	import * as Table from '$lib/components/ui/table/index.js';
+	let moveSearch = $state('');
+	let moveMethod = $state('all');
+
 	import { resolve } from '$app/paths';
 	import { enhance } from '$app/forms';
 	import {
@@ -71,7 +78,7 @@
 	{@const species = current.pokemon}
 	<div class="flex flex-wrap items-center gap-5">
 		<img
-			src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/{species.number}.png"
+			src={pokemonImage(species.number, 'artwork')}
 			alt=""
 			width="120"
 			height="120"
@@ -88,6 +95,114 @@
 		</div>
 	</div>
 
+	<section class="mt-6 rounded-xl border p-4">
+		<h3 class="font-semibold">Base stats</h3>
+		<div class="mt-3 grid gap-2">
+			{#each current.stats as stat (stat.name)}<div
+					class="grid grid-cols-[5rem_2rem_1fr] items-center gap-3 text-xs"
+				>
+					<span>{stat.name}</span><span class="font-semibold tabular-nums">{stat.value}</span>
+					<div class="h-2 overflow-hidden rounded-full bg-muted">
+						<div
+							class="h-full rounded-full bg-emerald-500/70"
+							style:width={`${(stat.value / 255) * 100}%`}
+						></div>
+					</div>
+				</div>{/each}
+		</div>
+		<p class="mt-3 text-xs text-muted-foreground">
+			Total: {current.stats.reduce((sum, s) => sum + s.value, 0)} · default form, current catalog values
+		</p>
+	</section>
+	{#if current.facts}
+		<section class="mt-5">
+			<h3 class="font-semibold">Species research</h3>
+			<dl class="mt-3 grid grid-cols-2 gap-4 text-sm">
+				<div>
+					<dt class="text-muted-foreground">Abilities</dt>
+					<dd>
+						{current.facts.abilities
+							.map((a) => `${a.name}${a.hidden ? ' (hidden)' : ''}`)
+							.join(', ')}
+					</dd>
+				</div>
+				<div>
+					<dt class="text-muted-foreground">Height / weight</dt>
+					<dd>{current.facts.height / 10} m · {current.facts.weight / 10} kg</dd>
+				</div>
+				<div>
+					<dt class="text-muted-foreground">Egg groups</dt>
+					<dd>{current.facts.eggGroups.join(', ')}</dd>
+				</div>
+				<div>
+					<dt class="text-muted-foreground">Growth rate</dt>
+					<dd>{current.facts.growthRate}</dd>
+				</div>
+				<div>
+					<dt class="text-muted-foreground">Catch rate / base friendship</dt>
+					<dd>{current.facts.captureRate} / {current.facts.baseHappiness ?? '—'}</dd>
+				</div>
+				<div>
+					<dt class="text-muted-foreground">EV yield</dt>
+					<dd>
+						{current.facts.evYield
+							.map((v, i) => (v ? `${v} ${current.stats[i]?.name}` : ''))
+							.filter(Boolean)
+							.join(', ') || 'None'}
+					</dd>
+				</div>
+			</dl>
+		</section>
+	{/if}
+	<section class="mt-6">
+		<h3 class="font-semibold">Moves in {current.entry?.game ?? 'this game'}</h3>
+		{#if current.learnset.length}
+			<div class="mt-3 grid grid-cols-2 gap-3">
+				<Input
+					type="search"
+					aria-label="Search moves"
+					placeholder="Search moves…"
+					bind:value={moveSearch}
+				/><NativeSelect aria-label="Learn method" class="w-full" bind:value={moveMethod}
+					><option value="all">All methods</option
+					>{#each [...new Set(current.learnset.map((m) => m.method))] as method (method)}<option
+							value={method}>{method}</option
+						>{/each}</NativeSelect
+				>
+			</div>
+			<div class="mt-3 max-h-72 overflow-auto">
+				<Table.Root
+					><Table.Header
+						><Table.Row
+							><Table.Head>Move</Table.Head><Table.Head>Learn</Table.Head><Table.Head
+								>Power</Table.Head
+							><Table.Head>Accuracy</Table.Head><Table.Head>PP</Table.Head></Table.Row
+						></Table.Header
+					><Table.Body
+						>{#each current.learnset.filter((m) => (moveMethod === 'all' || moveMethod === m.method) && `${m.name} ${m.type}`
+									.toLowerCase()
+									.includes(moveSearch.toLowerCase())) as move, i (`${move.id}-${move.method}-${move.level}-${i}`)}<Table.Row
+								><Table.Cell
+									><span class="font-medium">{move.name}</span><span
+										class="block text-xs text-muted-foreground">{move.type} · {move.category}</span
+									></Table.Cell
+								><Table.Cell>{move.method}{move.level ? ` · Lv. ${move.level}` : ''}</Table.Cell
+								><Table.Cell>{move.power ?? '—'}</Table.Cell><Table.Cell
+									>{move.accuracy === null ? '—' : `${move.accuracy}%`}</Table.Cell
+								><Table.Cell>{move.pp ?? '—'}</Table.Cell></Table.Row
+							>{/each}</Table.Body
+					></Table.Root
+				>
+			</div>
+			<p class="mt-2 text-xs text-muted-foreground">
+				Learning methods are game-specific. Move power, accuracy and PP use the current catalog
+				snapshot.
+			</p>
+		{:else}<p class="mt-2 text-sm text-muted-foreground">
+				No learnset is recorded for this game.
+			</p>{/if}
+	</section>
+
 	{#if current.entry}
 		<section class="mt-6">
 			<h3 class="font-semibold">in {current.entry.game}</h3>
@@ -191,7 +306,7 @@
 			<div class="mt-3 grid gap-3 sm:grid-cols-[12rem_minmax(0,1fr)]">
 				<label class="block"
 					>availability
-					<select
+					<NativeSelect
 						name="availability"
 						value={current.entry.availability}
 						class="mt-1 block w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2"
@@ -199,7 +314,7 @@
 						{#each availabilityValues as value (value)}<option {value}
 								>{availabilityLabels[value]}</option
 							>{/each}
-					</select>
+					</NativeSelect>
 				</label>
 				<label class="block"
 					>note

src/lib/components/ui/alert-dialog/alert-dialog-action.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize
+	} from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = 'default',
+		size = 'default',
+		...restProps
+	}: AlertDialogPrimitive.ActionProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Action
+	bind:ref
+	data-slot="alert-dialog-action"
+	class={cn(buttonVariants({ variant, size }), '', className)}
+	{...restProps}
+/>

src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize
+	} from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = 'outline',
+		size = 'default',
+		...restProps
+	}: AlertDialogPrimitive.CancelProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+	bind:ref
+	data-slot="alert-dialog-cancel"
+	class={cn(buttonVariants({ variant, size }), '', className)}
+	{...restProps}
+/>

src/lib/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import AlertDialogOverlay from './alert-dialog-overlay.svelte';
+	import AlertDialogPortal from './alert-dialog-portal.svelte';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		size = 'default',
+		portalProps,
+		...restProps
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+		size?: 'default' | 'sm';
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof AlertDialogPortal>>;
+	} = $props();
+</script>
+
+<AlertDialogPortal {...portalProps}>
+	<AlertDialogOverlay />
+	<AlertDialogPrimitive.Content
+		bind:ref
+		data-slot="alert-dialog-content"
+		data-size={size}
+		class={cn(
+			'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/10 gap-6 rounded-xl p-6 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none',
+			className
+		)}
+		{...restProps}
+	/>
+</AlertDialogPortal>

src/lib/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+	bind:ref
+	data-slot="alert-dialog-description"
+	class={cn(
+		'text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3',
+		className
+	)}
+	{...restProps}
+/>

src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-footer"
+	class={cn(
+		'flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

src/lib/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-header"
+	class={cn(
+		'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

src/lib/components/ui/alert-dialog/alert-dialog-media.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-media"
+	class={cn(
+		"bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.OverlayProps = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+	bind:ref
+	data-slot="alert-dialog-overlay"
+	class={cn(
+		'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50',
+		className
+	)}
+	{...restProps}
+/>

src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+
+	let { ...restProps }: AlertDialogPrimitive.PortalProps = $props();
+</script>
+
+<AlertDialogPrimitive.Portal {...restProps} />

src/lib/components/ui/alert-dialog/alert-dialog-title.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.TitleProps = $props();
+</script>
+
+<AlertDialogPrimitive.Title
+	bind:ref
+	data-slot="alert-dialog-title"
+	class={cn(
+		'font-heading text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+		className
+	)}
+	{...restProps}
+/>

src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
+</script>
+
+<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} />

src/lib/components/ui/alert-dialog/alert-dialog.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: AlertDialogPrimitive.RootProps = $props();
+</script>
+
+<AlertDialogPrimitive.Root bind:open {...restProps} />

src/lib/components/ui/alert-dialog/index.ts

@@ -0,0 +1,40 @@
+import Action from './alert-dialog-action.svelte';
+import Cancel from './alert-dialog-cancel.svelte';
+import Content from './alert-dialog-content.svelte';
+import Description from './alert-dialog-description.svelte';
+import Footer from './alert-dialog-footer.svelte';
+import Header from './alert-dialog-header.svelte';
+import Media from './alert-dialog-media.svelte';
+import Overlay from './alert-dialog-overlay.svelte';
+import Portal from './alert-dialog-portal.svelte';
+import Title from './alert-dialog-title.svelte';
+import Trigger from './alert-dialog-trigger.svelte';
+import Root from './alert-dialog.svelte';
+
+export {
+	Root,
+	Title,
+	Action,
+	Cancel,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Media,
+	//
+	Root as AlertDialog,
+	Title as AlertDialogTitle,
+	Action as AlertDialogAction,
+	Cancel as AlertDialogCancel,
+	Portal as AlertDialogPortal,
+	Footer as AlertDialogFooter,
+	Header as AlertDialogHeader,
+	Trigger as AlertDialogTrigger,
+	Overlay as AlertDialogOverlay,
+	Content as AlertDialogContent,
+	Description as AlertDialogDescription,
+	Media as AlertDialogMedia
+};

src/lib/components/ui/collapsible/collapsible-content.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.ContentProps = $props();
+</script>
+
+<CollapsiblePrimitive.Content bind:ref data-slot="collapsible-content" {...restProps} />

src/lib/components/ui/collapsible/collapsible-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.TriggerProps = $props();
+</script>
+
+<CollapsiblePrimitive.Trigger bind:ref data-slot="collapsible-trigger" {...restProps} />

src/lib/components/ui/collapsible/collapsible.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(false),
+		...restProps
+	}: CollapsiblePrimitive.RootProps = $props();
+</script>
+
+<CollapsiblePrimitive.Root bind:ref bind:open data-slot="collapsible" {...restProps} />

src/lib/components/ui/collapsible/index.ts

@@ -0,0 +1,13 @@
+import Content from './collapsible-content.svelte';
+import Trigger from './collapsible-trigger.svelte';
+import Root from './collapsible.svelte';
+
+export {
+	Root,
+	Content,
+	Trigger,
+	//
+	Root as Collapsible,
+	Content as CollapsibleContent,
+	Trigger as CollapsibleTrigger
+};

src/lib/components/ui/native-select/index.ts

@@ -0,0 +1,12 @@
+import OptGroup from './native-select-opt-group.svelte';
+import Option from './native-select-option.svelte';
+import Root from './native-select.svelte';
+
+export {
+	Root,
+	Option,
+	OptGroup,
+	Root as NativeSelect,
+	Option as NativeSelectOption,
+	OptGroup as NativeSelectOptGroup
+};

src/lib/components/ui/native-select/native-select-opt-group.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { WithElementRef } from '$lib/utils.js';
+	import type { HTMLOptgroupAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: WithElementRef<HTMLOptgroupAttributes> = $props();
+</script>
+
+<optgroup bind:this={ref} data-slot="native-select-opt-group" {...restProps}>
+	{@render children?.()}
+</optgroup>

src/lib/components/ui/native-select/native-select-option.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLOptionAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLOptionAttributes> = $props();
+</script>
+
+<option
+	bind:this={ref}
+	data-slot="native-select-option"
+	class={cn('bg-[Canvas] text-[CanvasText]', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</option>

src/lib/components/ui/native-select/native-select.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLSelectAttributes } from 'svelte/elements';
+
+	type NativeSelectProps = Omit<WithElementRef<HTMLSelectAttributes>, 'size'> & {
+		size?: 'sm' | 'default';
+	};
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size = 'default',
+		children,
+		...restProps
+	}: NativeSelectProps = $props();
+</script>
+
+<div
+	class={cn('group/native-select relative w-fit has-[select:disabled]:opacity-50', className)}
+	data-slot="native-select-wrapper"
+	data-size={size}
+>
+	<select
+		bind:value
+		bind:this={ref}
+		data-slot="native-select"
+		data-size={size}
+		class="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-8 outline-none disabled:pointer-events-none disabled:cursor-not-allowed"
+		{...restProps}
+	>
+		{@render children?.()}
+	</select>
+	<ChevronDownIcon
+		class="text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none"
+		aria-hidden
+		data-slot="native-select-icon"
+	/>
+</div>

src/lib/components/ui/slider/index.ts

@@ -0,0 +1,7 @@
+import Root from './slider.svelte';
+
+export {
+	Root,
+	//
+	Root as Slider
+};

src/lib/components/ui/slider/slider.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { Slider as SliderPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		orientation = 'horizontal',
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<SliderPrimitive.Root
+	bind:ref
+	bind:value={value as never}
+	data-slot="slider"
+	{orientation}
+	class={cn(
+		'data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col',
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ thumbItems })}
+		<span
+			data-slot="slider-track"
+			data-orientation={orientation}
+			class={cn(
+				'bg-muted rounded-full data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5 relative grow overflow-hidden data-horizontal:w-full data-vertical:h-full'
+			)}
+		>
+			<SliderPrimitive.Range
+				data-slot="slider-range"
+				class={cn('bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full')}
+			/>
+		</span>
+		{#each thumbItems as thumb (thumb.index)}
+			<SliderPrimitive.Thumb
+				data-slot="slider-thumb"
+				index={thumb.index}
+				class="border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50"
+			/>
+		{/each}
+	{/snippet}
+</SliderPrimitive.Root>

src/lib/game-tracker/CatchEditor.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+	import { pokemonImage } from '$lib/game-tracker/game-art';
+	import { enhance } from '$app/forms';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Textarea } from '$lib/components/ui/textarea/index.js';
+	import { NativeSelect } from '$lib/components/ui/native-select/index.js';
+	import { Checkbox } from '$lib/components/ui/checkbox/index.js';
+	import { stages, obtainedMethods, type Stage } from './journal';
+	import type { PokemonCatch } from '$lib/server/db/schema/tracker-journal';
+	let {
+		open = $bindable(false),
+		species,
+		gameId,
+		record = null,
+		stage = 'story',
+		location = '',
+		signedIn,
+		ondelete,
+		ondetails
+	}: {
+		open?: boolean;
+		species: { id: number; number: number; name: string };
+		gameId: number;
+		record?: PokemonCatch | null;
+		stage?: Stage;
+		location?: string;
+		signedIn: boolean;
+		ondelete?: () => void;
+		ondetails?: () => void;
+	} = $props();
+	let message = $state('');
+	let saving = $state(false);
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Content class="max-h-[90dvh] overflow-y-auto sm:max-w-2xl">
+		<Dialog.Header
+			><Dialog.Title>{record ? 'Meet' : 'Register'} {record?.nickname || species.name}</Dialog.Title
+			><Dialog.Description
+				>#{species.number} · {species.name}. Keep this Pokémon’s story, moves and party position
+				together.</Dialog.Description
+			></Dialog.Header
+		>
+		{#if ondetails}<Button variant="link" class="justify-self-start px-0" onclick={ondetails}
+				>All catches, moves and species research →</Button
+			>{/if}
+		{#if message}<p role="alert" class="text-destructive">{message}</p>{/if}
+		<form
+			method="POST"
+			action="?/saveCatch"
+			class="space-y-5"
+			use:enhance={() => {
+				saving = true;
+				message = '';
+				return async ({ result, update }) => {
+					await update({ reset: false });
+					saving = false;
+					if (result.type === 'success') open = false;
+					else
+						message =
+							result.type === 'failure'
+								? String(result.data?.message ?? 'Could not save.')
+								: 'Could not save. Try again.';
+				};
+			}}
+		>
+			<input type="hidden" name="gameId" value={gameId} /><input
+				type="hidden"
+				name="pokemonId"
+				value={species.id}
+			/>{#if record}<input type="hidden" name="id" value={record.id} />{/if}
+			<div class="flex items-center gap-4 rounded-xl bg-muted/40 p-3">
+				<img
+					src={pokemonImage(species.number, record?.shiny ? 'shiny' : 'sprite')}
+					alt={species.name}
+					width="80"
+					height="80"
+				/>
+				<div class="grid flex-1 grid-cols-[1fr_5rem] gap-3">
+					<label
+						>Nickname<Input
+							name="nickname"
+							value={record?.nickname ?? ''}
+							maxlength={50}
+							placeholder={species.name}
+						/></label
+					><label
+						>Level<Input
+							type="number"
+							name="level"
+							min={1}
+							max={100}
+							required
+							value={record?.level ?? 5}
+						/></label
+					>
+				</div>
+			</div>
+			<div class="grid gap-4 sm:grid-cols-2">
+				<label
+					>Party position<NativeSelect
+						name="partySlot"
+						value={record?.partySlot ?? ''}
+						class="mt-1 w-full"
+						><option value="">In the PC</option>{#each [1, 2, 3, 4, 5, 6] as slot (slot)}<option
+								value={slot}>Team slot {slot}</option
+							>{/each}</NativeSelect
+					><span class="text-xs text-muted-foreground"
+						>An occupied slot moves its current Pokémon to the PC.</span
+					></label
+				><label
+					>Obtained by<NativeSelect
+						name="obtained"
+						value={record?.obtained ?? 'caught'}
+						class="mt-1 w-full"
+						>{#each obtainedMethods as method (method)}<option value={method}>{method}</option
+							>{/each}</NativeSelect
+					></label
+				>
+			</div>
+			<fieldset>
+				<legend class="mb-2 font-medium">Current moves</legend>
+				<div class="grid grid-cols-2 gap-3">
+					{#each [0, 1, 2, 3] as slot (slot)}<Input
+							name="moves"
+							aria-label={`Move ${slot + 1}`}
+							placeholder={`Move ${slot + 1}`}
+							value={record?.moves[slot] ?? ''}
+							maxlength={60}
+						/>{/each}
+				</div>
+			</fieldset>
+			<div class="grid gap-4 sm:grid-cols-2">
+				<label>Nature<Input name="nature" value={record?.nature ?? ''} maxlength={150} /></label
+				><label>Ability<Input name="ability" value={record?.ability ?? ''} maxlength={150} /></label
+				><label>Poké Ball<Input name="ball" value={record?.ball ?? ''} maxlength={150} /></label
+				><label
+					>Caught on<Input
+						type="date"
+						name="caughtOn"
+						value={record?.caughtOn ?? new Date().toISOString().slice(0, 10)}
+					/></label
+				><label
+					>Location<Input
+						name="location"
+						value={record?.location ?? location}
+						maxlength={150}
+					/></label
+				><label
+					>Collection stage<NativeSelect name="stage" value={record?.stage ?? stage} class="w-full"
+						>{#each stages as s (s.value)}<option value={s.value}>{s.label}</option
+							>{/each}</NativeSelect
+					></label
+				>
+			</div>
+			<label class="flex items-center gap-2"
+				><Checkbox name="shiny" value="on" checked={record?.shiny ?? false} />Shiny Pokémon</label
+			>
+			<label class="block"
+				>Notes<Textarea
+					name="notes"
+					value={record?.notes ?? ''}
+					maxlength={2000}
+					placeholder="A lucky encounter, a trade partner, a plan for evolution…"
+				/></label
+			>
+			<Dialog.Footer
+				><Button variant="outline" onclick={() => (open = false)}>Cancel</Button><Button
+					type="submit"
+					disabled={!signedIn || saving}
+					>{saving ? 'Saving…' : record ? 'Save Pokémon' : 'Add to my collection'}</Button
+				></Dialog.Footer
+			>
+		</form>
+		{#if record && ondelete}<Button
+				variant="ghost"
+				class="justify-self-start text-destructive"
+				onclick={ondelete}>Remove this catch record</Button
+			>{/if}
+	</Dialog.Content>
+</Dialog.Root>

src/lib/game-tracker/EncounterGrid.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { pokemonImage } from './game-art';
+	let {
+		groups,
+		caughtNumbers,
+		onselect
+	}: {
+		groups: [
+			number,
+			{
+				name: string;
+				type1: string;
+				type2: string | null;
+				minLevel: number | null;
+				maxLevel: number | null;
+			}[]
+		][];
+		caughtNumbers: Set<number>;
+		onselect: (number: number) => void;
+	} = $props();
+	let width = $state(600);
+	let height = $state(400);
+	// Fit every species, including broad locations with hundreds of records, into one overview.
+	const columns = $derived(
+		Math.max(
+			1,
+			Math.min(
+				groups.length,
+				Math.ceil(Math.sqrt(((groups.length * width) / Math.max(1, height)) * 0.7))
+			)
+		)
+	);
+	const rows = $derived(Math.max(1, Math.ceil(groups.length / columns)));
+	const cellWidth = $derived(width / columns);
+	const cellHeight = $derived(height / rows);
+	const showName = $derived(cellWidth >= 58 && cellHeight >= 42);
+	const showLevel = $derived(cellWidth >= 65 && cellHeight >= 64);
+	const spriteSize = $derived(
+		Math.max(
+			12,
+			Math.min(48, cellWidth - 8, cellHeight - (showName ? 14 : 0) - (showLevel ? 12 : 0) - 8)
+		)
+	);
+</script>
+
+<div class="h-full min-h-0 w-full" bind:clientWidth={width} bind:clientHeight={height}>
+	<div
+		class="encounter-grid grid gap-1"
+		role="group"
+		aria-label="All Pokémon in this area"
+		style:grid-template-columns={`repeat(${columns}, minmax(0,1fr))`}
+		style:grid-template-rows={`repeat(${rows}, minmax(0,1fr))`}
+		style:height={`min(100%, ${rows * 108}px)`}
+	>
+		{#each groups as [number, encounters] (number)}
+			{@const p = encounters[0]}
+			{@const levels = encounters
+				.flatMap((e) => [e.minLevel, e.maxLevel])
+				.filter((n): n is number => n !== null)}
+			{@const min = levels.length ? Math.min(...levels) : null}
+			{@const max = levels.length ? Math.max(...levels) : null}
+			<button
+				class="relative flex min-h-0 min-w-0 flex-col items-center justify-center overflow-hidden rounded-lg border bg-background p-0.5 hover:bg-muted focus-visible:z-10 focus-visible:outline-2"
+				class:border-emerald-500={caughtNumbers.has(number)}
+				aria-label={`${p.name} ${p.type1}${p.type2 ? ` / ${p.type2}` : ''} encounters${caughtNumbers.has(number) ? ', caught' : ''}`}
+				title={`${p.name} · Lv. ${min ?? '?'}${max !== min ? `–${max}` : ''}${caughtNumbers.has(number) ? ' · caught' : ''}`}
+				onclick={() => onselect(number)}
+			>
+				{#if caughtNumbers.has(number)}<span
+						class="absolute top-0 right-1 text-[10px] text-emerald-600"
+						aria-hidden="true">✓</span
+					>{/if}
+				<img
+					src={pokemonImage(number)}
+					alt=""
+					width="48"
+					height="48"
+					style:width={`${spriteSize}px`}
+					style:height={`${spriteSize}px`}
+					class="shrink-0 object-contain"
+				/>
+				{#if showName}<span class="block w-full truncate text-center text-[10px] font-medium"
+						>{p.name}</span
+					>{/if}
+				{#if showLevel}<span class="text-[10px] text-muted-foreground"
+						>Lv. {min ?? '?'}{max !== min ? `–${max}` : ''}</span
+					>{/if}
+			</button>
+		{/each}
+	</div>
+</div>

src/lib/game-tracker/GameLogo.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import { base } from '$app/paths';
+	let {
+		slug,
+		name,
+		class: className = ''
+	}: { slug: string; name: string; class?: string } = $props();
+</script>
+
+<span
+	class={cn(
+		'inline-flex h-16 w-28 shrink-0 items-center justify-center overflow-hidden rounded-md',
+		slug === 'call-of-duty' ? 'bg-zinc-900 p-2' : '',
+		className
+	)}
+>
+	<img
+		src={`${base}/game-logos/${slug}.webp`}
+		alt={`${name} artwork`}
+		class={`max-h-full max-w-full object-contain ${slug === 'osu' ? 'rounded-full bg-[#ff66aa]' : ''}`}
+		loading="lazy"
+	/>
+</span>

src/lib/game-tracker/PokemonJournal.svelte

@@ -0,0 +1,732 @@
+<script lang="ts">
+	import { pokemonImage } from '$lib/game-tracker/game-art';
+	import { onMount } from 'svelte';
+	let hydrated = $state(false);
+	onMount(() => {
+		hydrated = true;
+	});
+	import { untrack } from 'svelte';
+	import { deserialize, enhance } from '$app/forms';
+	import { invalidateAll } from '$app/navigation';
+	import { SvelteSet } from 'svelte/reactivity';
+	import * as Tabs from '$lib/components/ui/tabs/index.js';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import * as AlertDialog from '$lib/components/ui/alert-dialog/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { NativeSelect } from '$lib/components/ui/native-select/index.js';
+	import { Checkbox } from '$lib/components/ui/checkbox/index.js';
+	import MapIcon from 'lucide-svelte/icons/map';
+	import BookOpen from 'lucide-svelte/icons/book-open';
+	import Archive from 'lucide-svelte/icons/archive';
+	import Trophy from 'lucide-svelte/icons/trophy';
+	import ProgressMeter from './ProgressMeter.svelte';
+	import PokemonProgress from './PokemonProgress.svelte';
+	import PokemonDetails from '$lib/catch-em-all/PokemonDetails.svelte';
+	import PokemonMap from './PokemonMap.svelte';
+	import CatchEditor from './CatchEditor.svelte';
+	import { stages, firstCatches, type Stage } from './journal';
+	import { gameRegions, initialLocation, milestonesFor } from './pokemon-world';
+	import {
+		availabilityLabels,
+		availabilityValues,
+		obtainableAvailability
+	} from '$lib/availability';
+	import type { PageData } from '../../routes/projects/game-tracker/pokemon/$types';
+	import type { PokemonCatch } from '$lib/server/db/schema/tracker-journal';
+	let { data }: { data: PageData } = $props();
+	const game = $derived(data.activeGame!);
+	const gameProgress = $derived(data.progress.games.find((g) => g.id === game.id));
+	const seenIds = new SvelteSet(untrack(() => data.seenIds));
+	$effect(() => {
+		for (const id of data.seenIds) seenIds.add(id);
+	});
+	const seenNumbers = $derived(
+		new Set(data.pokemon.filter((p) => seenIds.has(p.id)).map((p) => p.number))
+	);
+	const pendingSeen = new SvelteSet<number>();
+	async function setSeen(number: number, seen: boolean) {
+		const species = speciesByNumber.get(number);
+		if (!species || pendingSeen.has(number)) return;
+		pendingSeen.add(number);
+		message = '';
+		const body = new FormData();
+		body.set('gameId', String(game.id));
+		body.set('pokemonId', String(species.id));
+		body.set('seen', seen ? 'on' : 'off');
+		try {
+			const result = deserialize(await (await fetch('?/setSeen', { method: 'POST', body })).text());
+			if (result.type !== 'success')
+				throw new Error(
+					result.type === 'failure'
+						? String(result.data?.message ?? 'Could not save sighting.')
+						: 'Could not save sighting.'
+				);
+			if (seen) seenIds.add(species.id);
+			else seenIds.delete(species.id);
+			pendingSeen.delete(number);
+			void invalidateAll().catch(() => {
+				message = 'Sighting saved. Reload to refresh the progress totals.';
+			});
+		} catch (error) {
+			message = error instanceof Error ? error.message : 'Could not save sighting.';
+		} finally {
+			pendingSeen.delete(number);
+		}
+	}
+	const regions = $derived(gameRegions(game.slug ?? '', data.regions));
+	let stage = $state<Stage>(untrack(() => data.journey?.stage ?? 'story'));
+	let location = $state(
+		untrack(
+			() =>
+				data.journey?.location ??
+				initialLocation(
+					data.activeGame?.slug ?? '',
+					gameRegions(data.activeGame?.slug ?? '', data.regions)[0] ?? ''
+				)
+		)
+	);
+	let tab = $state('adventure');
+	let search = $state('');
+	let dex = $state(untrack(() => data.dexNumbers[0]?.dex ?? 'national'));
+	let status = $state('all');
+	let pageNumber = $state(1);
+	let pcPage = $state(1);
+	let viewportWidth = $state(1280);
+	const dexPageSize = $derived(viewportWidth < 640 ? 18 : viewportWidth < 1024 ? 36 : 60);
+	const pcPageSize = $derived(viewportWidth < 640 ? 12 : 30);
+	let message = $state('');
+	let saving = $state(false);
+	const pending = new SvelteSet<number>();
+	const caught = $derived(new Set(data.caughtIds));
+	const dexes = $derived([...new Map(data.dexNumbers.map((d) => [d.dex, d.dexName])).entries()]);
+	const regionalNumbers = $derived(
+		new Map(data.dexNumbers.filter((d) => d.dex === dex).map((d) => [d.pokemonId, d.number]))
+	);
+	const regionalOrder = $derived(
+		new Map(
+			data.pokemon.flatMap((p) => {
+				const d = data.dexNumbers.find((d) => d.pokemonId === p.id);
+				return d ? [[p.number, d.number] as const] : [];
+			})
+		)
+	);
+	const speciesByNumber = $derived(new Map(data.pokemon.map((p) => [p.number, p])));
+	const first = $derived(firstCatches(data.catches.map((c) => c.catch)));
+	const caughtNumbers = $derived(
+		new Set(
+			data.pokemon
+				.filter((p) => p.entries.some(([id, g]) => g === game.id && caught.has(id)))
+				.map((p) => p.number)
+		)
+	);
+	const party = $derived(
+		data.catches
+			.filter((c) => c.catch.partySlot !== null)
+			.sort((a, b) => a.catch.partySlot! - b.catch.partySlot!)
+	);
+	const inGame = $derived(data.pokemon.filter((p) => p.entries.some(([, g]) => g === game.id)));
+	const owned = $derived(inGame.filter((p) => caughtNumbers.has(p.number)));
+	const filtered = $derived(
+		inGame
+			.filter((p) => {
+				if (dex !== 'national' && !regionalNumbers.has(p.id)) return false;
+				if (
+					(status === 'caught' && !caughtNumbers.has(p.number)) ||
+					(status === 'missing' && caughtNumbers.has(p.number))
+				)
+					return false;
+				return `${p.name} ${p.number} ${p.type1} ${p.type2 ?? ''}`
+					.toLowerCase()
+					.includes(search.toLowerCase().trim());
+			})
+			.sort((a, b) =>
+				dex === 'national'
+					? a.number - b.number
+					: (regionalNumbers.get(a.id) ?? 0) - (regionalNumbers.get(b.id) ?? 0)
+			)
+	);
+	const pageCount = $derived(Math.max(1, Math.ceil(filtered.length / dexPageSize)));
+	const pcSpecies = $derived(
+		owned.filter((p) =>
+			`${p.name} ${p.number} ${first.get(p.id)?.nickname ?? ''}`
+				.toLowerCase()
+				.includes(search.toLowerCase().trim())
+		)
+	);
+	const visiblePc = $derived(pcSpecies.slice((pcPage - 1) * pcPageSize, pcPage * pcPageSize));
+	$effect(() => {
+		if (pageNumber > pageCount) pageNumber = pageCount;
+	});
+	$effect(() => {
+		if (pcPage > Math.max(1, Math.ceil(pcSpecies.length / pcPageSize))) pcPage = 1;
+	});
+	const milestones = $derived([
+		...milestonesFor(game.slug ?? '', regions[0] ?? '').map((m) => ({
+			...m,
+			done: data.milestones.find((r) => r.key === m.key)?.done ?? false
+		})),
+		...data.milestones.filter((m) => m.key.startsWith('custom:'))
+	]);
+	const stageMilestones = $derived(milestones.filter((m) => m.stage === stage));
+	let milestoneOpen = $state(false);
+	let milestoneMessage = $state('');
+	let detailsNumber = $state<number | null>(null);
+	let catchNumber = $state<number | null>(null);
+	let catchOpen = $state(false);
+	let catchRecord = $state<PokemonCatch | null>(null);
+	let deleteOpen = $state(false);
+	const catchSpecies = $derived(catchNumber === null ? null : speciesByNumber.get(catchNumber));
+	function editCatch(number: number, record: PokemonCatch | null = null) {
+		catchNumber = number;
+		catchRecord = record;
+		catchOpen = true;
+	}
+	function openSpecies(number: number) {
+		detailsNumber = number;
+	}
+	async function toggle(entryId: number, checked: boolean) {
+		if (pending.has(entryId)) return;
+		pending.add(entryId);
+		message = '';
+		const body = new FormData();
+		body.set('entryId', String(entryId));
+		if (checked) body.set('caught', 'on');
+		try {
+			const r = deserialize(
+				await (await fetch('?/togglePokemonCaught', { method: 'POST', body })).text()
+			);
+			if (r.type !== 'success')
+				throw new Error(
+					r.type === 'failure' ? String(r.data?.message ?? 'Could not save.') : 'Could not save.'
+				);
+			await invalidateAll();
+		} catch (e) {
+			message = e instanceof Error ? e.message : 'Could not save.';
+		} finally {
+			pending.delete(entryId);
+		}
+	}
+	async function removeCatch() {
+		if (!catchRecord) return;
+		saving = true;
+		const body = new FormData();
+		body.set('id', String(catchRecord.id));
+		try {
+			const result = deserialize(
+				await (await fetch('?/deleteCatch', { method: 'POST', body })).text()
+			);
+			if (result.type !== 'success') throw new Error('Could not remove catch.');
+			await invalidateAll();
+			catchOpen = false;
+			deleteOpen = false;
+		} catch (e) {
+			message = e instanceof Error ? e.message : 'Could not remove catch.';
+		} finally {
+			saving = false;
+		}
+	}
+</script>
+
+<svelte:window bind:innerWidth={viewportWidth} />
+
+<PokemonProgress progress={data.progress} gameId={game.id} />
+
+{#if message}<p role="alert" class="mt-4 text-destructive">{message}</p>{/if}
+<div class="mt-2 grid items-center gap-2 lg:grid-cols-[minmax(280px,.8fr)_minmax(0,2fr)]">
+	<div>
+		<form
+			method="POST"
+			action="?/saveJourney"
+			class="flex flex-wrap items-end gap-2"
+			use:enhance={() => {
+				saving = true;
+				message = '';
+				return async ({ result, update }) => {
+					await update({ reset: false });
+					saving = false;
+					message =
+						result.type === 'success'
+							? 'Adventure saved.'
+							: result.type === 'failure'
+								? String(result.data?.message ?? 'Could not save.')
+								: 'Could not save.';
+				};
+			}}
+		>
+			<input type="hidden" name="gameId" value={game.id} /><input
+				type="hidden"
+				name="location"
+				value={location}
+			/>
+			<label class="min-w-40 max-w-xs flex-1 text-xs font-medium"
+				>My playthrough<NativeSelect class="mt-1 w-full" name="stage" bind:value={stage}
+					>{#each stages as s (s.value)}<option value={s.value}>{s.label}</option
+						>{/each}</NativeSelect
+				></label
+			>
+			<Button type="submit" size="sm" variant="outline" disabled={!data.user || saving}
+				>Save my place</Button
+			>
+		</form>
+
+		<form
+			method="POST"
+			action="?/setCompleted"
+			use:enhance
+			class="mt-1 flex items-center gap-2 text-[10px] text-muted-foreground"
+		>
+			<input type="hidden" name="gameId" value={game.id} />
+			<input type="hidden" name="completed" value={data.journey?.completed ? 'off' : 'on'} />
+			<Button
+				type="submit"
+				variant="ghost"
+				size="xs"
+				class="h-5 text-[10px]"
+				disabled={!data.user ||
+					!hydrated ||
+					(!!gameProgress?.story.total && gameProgress.story.value === gameProgress.story.total)}
+				>{gameProgress?.completed ? '✓ Story complete' : 'Mark story complete'}</Button
+			>
+			{#if gameProgress}<span
+					>{gameProgress.story.value} / {gameProgress.story.total} story milestones</span
+				>{/if}
+		</form>
+	</div>
+
+	<section class="rounded-xl border bg-card p-2" aria-label="Current team">
+		<div class="mb-1 flex items-center justify-between px-1 text-xs">
+			<h2 class="font-semibold">Current team</h2>
+			<span class="text-xs text-muted-foreground">{party.length} / 6 in your team</span>
+		</div>
+		<div class={`grid grid-cols-6 gap-1 ${party.length ? '' : 'max-sm:hidden'}`}>
+			{#each [1, 2, 3, 4, 5, 6] as slot (slot)}
+				{@const member = party.find((p) => p.catch.partySlot === slot)}
+				{#if member}<button
+						class="flex min-w-0 items-center gap-1 rounded-lg border bg-muted/30 p-1 text-left transition hover:bg-muted max-sm:flex-col max-sm:text-center"
+						onclick={() => editCatch(member.number, member.catch)}
+						><img
+							src={pokemonImage(member.number, member.catch.shiny ? 'shiny' : 'sprite')}
+							alt={member.name}
+							width="40"
+							height="40"
+							class="size-10 shrink-0"
+						/><span class="min-w-0 max-w-full flex-1"
+							><span class="block truncate text-[11px] font-semibold"
+								>{member.catch.nickname || member.name}</span
+							><span class="block text-[11px] text-muted-foreground"
+								>Lv. {member.catch.level}{member.catch.shiny ? ' · ✦' : ''}</span
+							></span
+						></button
+					>
+				{:else}<button
+						class="flex min-h-12 items-center justify-center gap-1 rounded-lg border border-dashed text-muted-foreground hover:bg-muted/30 max-sm:flex-col"
+						onclick={() => (tab = 'pc')}
+						aria-label={`Choose a Pokémon for team slot ${slot}`}
+						><span class="text-xl">+</span><span class="mt-1 text-xs">Slot {slot}</span></button
+					>{/if}
+			{/each}
+		</div>
+	</section>
+</div>
+
+<Tabs.Root bind:value={tab} class="mt-3">
+	<Tabs.List
+		class="sticky top-0 z-20 mb-3 flex h-auto w-full flex-wrap justify-start gap-1 border-b bg-background/95 p-1"
+		><Tabs.Trigger
+			disabled={!hydrated}
+			value="adventure"
+			class="px-3 py-2.5"
+			aria-label="Explore the map"
+			><MapIcon class="mr-1.5 size-4" aria-hidden="true" /><span class="sm:hidden">Map</span><span
+				class="hidden sm:inline">Explore the map</span
+			></Tabs.Trigger
+		><Tabs.Trigger disabled={!hydrated} value="dex" class="px-3 py-2.5"
+			><BookOpen class="mr-1.5 size-4" aria-hidden="true" />Pokédex</Tabs.Trigger
+		><Tabs.Trigger disabled={!hydrated} value="pc" class="px-3 py-2.5"
+			><Archive class="mr-1.5 size-4" aria-hidden="true" />My PC · {owned.length}</Tabs.Trigger
+		><Tabs.Trigger
+			disabled={!hydrated}
+			value="milestones"
+			class="px-3 py-2.5"
+			aria-label="Badges & milestones"
+			><Trophy class="mr-1.5 size-4" aria-hidden="true" /><span class="sm:hidden">Badges</span><span
+				class="hidden sm:inline">Badges & milestones</span
+			></Tabs.Trigger
+		></Tabs.List
+	>
+	<Tabs.Content value="adventure">
+		<PokemonMap
+			{stage}
+			{regionalOrder}
+			gameId={game.id}
+			{regions}
+			locations={data.locations}
+			bind:location
+			{caughtNumbers}
+			{seenNumbers}
+			{pendingSeen}
+			onseen={setSeen}
+			onpokemon={openSpecies}
+			oncatch={(number) => editCatch(number)}
+			canRegister={!!data.user && hydrated}
+		/>
+	</Tabs.Content>
+	<Tabs.Content value="dex">
+		{#if gameProgress}<div class="mb-3 grid grid-cols-2 gap-4">
+				<ProgressMeter
+					label={dex === 'national' ? 'Game collection' : 'Regional dex caught'}
+					progress={dex === 'national' ? gameProgress.collection : gameProgress.regional}
+					compact
+				/><ProgressMeter
+					label={dex === 'national' ? 'Seen in this game' : 'Regional dex seen'}
+					progress={dex === 'national' ? gameProgress.seen : gameProgress.regionalSeen}
+					color="sky"
+					compact
+				/>
+			</div>{/if}
+		<div class="mb-5 grid gap-3 sm:grid-cols-[1fr_1fr_10rem]">
+			<Input
+				aria-label="Search Pokémon"
+				type="search"
+				placeholder="Name, number or type…"
+				bind:value={search}
+				oninput={() => (pageNumber = 1)}
+			/><NativeSelect
+				aria-label="Pokédex order"
+				class="w-full"
+				bind:value={dex}
+				onchange={() => (pageNumber = 1)}
+				>{#each dexes as [key, name] (key)}<option value={key}>Regional · {name}</option
+					>{/each}<option value="national">National Pokédex</option></NativeSelect
+			><NativeSelect
+				aria-label="Catch filter"
+				class="w-full"
+				bind:value={status}
+				onchange={() => (pageNumber = 1)}
+				><option value="all">All Pokémon</option><option value="missing">Still to catch</option
+				><option value="caught">Caught</option></NativeSelect
+			>
+		</div>
+		<p class="mb-4 text-sm text-muted-foreground">
+			Showing {Math.min(dexPageSize, filtered.length - (pageNumber - 1) * dexPageSize)} of {filtered.length}
+			Pokémon · {dex === 'national' ? 'National order' : 'Regional order'}{!dexes.length
+				? ' · No regional Pokédex is recorded for this title.'
+				: ''}
+		</p>
+		<div class="grid grid-cols-2 gap-2 sm:grid-cols-4 lg:grid-cols-6">
+			{#each filtered.slice((pageNumber - 1) * dexPageSize, pageNumber * dexPageSize) as p (p.id)}
+				{@const entry = p.entries.find(([, g]) => g === game.id)!}{@const code =
+					availabilityValues[entry[2]]}{@const isCaught = caught.has(entry[0])}
+				<article
+					class={`overflow-hidden rounded-xl border bg-card ${isCaught ? 'border-emerald-600/40' : ''}`}
+				>
+					<button
+						class="w-full p-2 text-left hover:bg-muted/40"
+						onclick={() => openSpecies(p.number)}
+						><div class="flex items-center justify-between text-xs text-muted-foreground">
+							<span>#{dex === 'national' ? p.number : regionalNumbers.get(p.id)}</span
+							>{#if isCaught}<span class="text-emerald-600">✓ caught</span>{/if}
+						</div>
+						<img
+							src={pokemonImage(p.number)}
+							alt=""
+							width="96"
+							height="96"
+							loading="lazy"
+							class="mx-auto size-12"
+						/>
+						<p class="truncate text-sm font-semibold">{p.name}</p>
+						<p class="mt-1 text-[11px] text-muted-foreground">
+							{p.type1}{p.type2 ? ` / ${p.type2}` : ''}
+						</p>
+						<p class="mt-1 truncate text-[10px] text-muted-foreground" title={entry[3]}>
+							{availabilityLabels[code]}
+						</p></button
+					>
+					<div class="flex items-center justify-between gap-2 border-t px-3 py-2">
+						<label class="flex items-center gap-1 text-[10px]"
+							><Checkbox
+								aria-label={`Seen ${p.name} in ${game.name}`}
+								checked={isCaught || seenIds.has(p.id)}
+								disabled={!hydrated || !data.user || isCaught || pendingSeen.has(p.number)}
+								onCheckedChange={(v) => setSeen(p.number, v)}
+							/>seen</label
+						>
+						<label class="flex items-center gap-2 text-xs"
+							><Checkbox
+								aria-label={`Caught ${p.name} in ${game.name}`}
+								checked={isCaught}
+								disabled={!data.user ||
+									pending.has(entry[0]) ||
+									(!isCaught && !obtainableAvailability.has(code))}
+								onCheckedChange={(v) => toggle(entry[0], v)}
+							/>caught</label
+						><Button
+							variant="ghost"
+							size="xs"
+							disabled={!hydrated || !data.user}
+							onclick={() => editCatch(p.number)}>+ log</Button
+						>
+					</div>
+				</article>
+			{:else}<p class="col-span-full py-10 text-center text-muted-foreground">
+					No Pokémon match these filters.
+				</p>{/each}
+		</div>
+		<div class="mt-5 flex items-center justify-between">
+			<Button variant="outline" disabled={pageNumber === 1} onclick={() => pageNumber--}
+				>Previous</Button
+			><span class="text-sm text-muted-foreground">{pageNumber} / {pageCount}</span><Button
+				variant="outline"
+				disabled={pageNumber === pageCount}
+				onclick={() => pageNumber++}>Next</Button
+			>
+		</div>
+	</Tabs.Content>
+	<Tabs.Content value="pc">
+		<div class="mb-5 flex flex-wrap items-center justify-between gap-3">
+			<div>
+				<h2 class="text-xl font-semibold">Your living collection</h2>
+				<p class="mt-1 text-sm text-muted-foreground">
+					National order · first registered catch per species · {data.catches.length} individual records
+				</p>
+			</div>
+			<Input
+				class="max-w-xs"
+				aria-label="Search your PC"
+				placeholder="Species or nickname…"
+				bind:value={search}
+				oninput={() => (pcPage = 1)}
+			/>
+		</div>
+		<div class="mb-5">
+			{#if gameProgress}<ProgressMeter
+					label="PC collection"
+					progress={gameProgress.collection}
+				/>{/if}
+		</div>
+		<div class="grid grid-cols-3 gap-2 sm:grid-cols-6">
+			{#each visiblePc as p (p.id)}{@const record = first.get(p.id)}{@const copies =
+					data.catches.filter((c) => c.catch.pokemonId === p.id).length}
+				<button
+					class="relative rounded-xl border bg-card p-2 text-center hover:bg-muted/60"
+					onclick={() => (record ? editCatch(p.number, record) : openSpecies(p.number))}
+					><span class="absolute top-2 left-2 text-[10px] text-muted-foreground">#{p.number}</span
+					>{#if copies > 1}<span class="absolute top-2 right-2 text-[10px]">×{copies}</span
+						>{/if}<img
+						src={pokemonImage(p.number, record?.shiny ? 'shiny' : 'sprite')}
+						alt={p.name}
+						width="56"
+						height="56"
+						loading="lazy"
+						class="mx-auto"
+					/><span class="block truncate text-xs font-semibold">{record?.nickname || p.name}</span
+					><span class="text-[10px] text-muted-foreground"
+						>{record
+							? `Lv. ${record.level}${record.partySlot ? ' · team' : ''}`
+							: 'Add catch details'}</span
+					></button
+				>
+			{:else}<div class="col-span-full rounded-xl border border-dashed px-5 py-12 text-center">
+					<h3 class="font-semibold">A new adventure starts with one companion.</h3>
+					<p class="mt-2 text-sm text-muted-foreground">
+						Register your starter in the Pokédex, or explore a route to find your next catch.
+					</p>
+					<Button class="mt-4" variant="outline" onclick={() => (tab = 'dex')}
+						>Find my starter</Button
+					>
+				</div>{/each}
+		</div>
+		{#if pcSpecies.length > pcPageSize}<div class="mt-5 flex justify-between">
+				<Button variant="outline" disabled={pcPage === 1} onclick={() => pcPage--}
+					>Previous box</Button
+				><span>Box {pcPage} / {Math.ceil(pcSpecies.length / pcPageSize)}</span><Button
+					variant="outline"
+					disabled={pcPage * pcPageSize >= pcSpecies.length}
+					onclick={() => pcPage++}>Next box</Button
+				>
+			</div>{/if}
+	</Tabs.Content>
+	<Tabs.Content value="milestones">
+		{#if gameProgress}<div class="mb-4 grid grid-cols-2 gap-3 sm:grid-cols-4">
+				<ProgressMeter
+					label="Story milestones"
+					progress={gameProgress.story}
+					color="amber"
+				/><ProgressMeter
+					label="Badges & trials"
+					progress={gameProgress.badges}
+					color="amber"
+				/><ProgressMeter
+					label="Postgame"
+					progress={gameProgress.postgame}
+					color="violet"
+				/><ProgressMeter label="Transfers & events" progress={gameProgress.transfers} color="sky" />
+			</div>{/if}
+		<div class="mb-5 flex items-center justify-between gap-3">
+			<div>
+				<h2 class="text-xl font-semibold">Milestones along the way</h2>
+				<p class="mt-1 text-sm text-muted-foreground">
+					{stageMilestones.filter((m) => m.done).length} / {stageMilestones.length} · {stages.find(
+						(s) => s.value === stage
+					)?.label}
+				</p>
+			</div>
+			<Button
+				variant="outline"
+				disabled={!hydrated || !data.user}
+				onclick={() => (milestoneOpen = true)}>+ Custom milestone</Button
+			>
+		</div>
+		<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+			{#each stageMilestones as m (m.key)}
+				<form
+					method="POST"
+					action="?/saveMilestone"
+					use:enhance
+					class="flex items-center gap-3 rounded-xl border bg-card p-4"
+				>
+					<input type="hidden" name="gameId" value={game.id} /><input
+						type="hidden"
+						name="key"
+						value={m.key}
+					/><input type="hidden" name="title" value={m.title} /><input
+						type="hidden"
+						name="category"
+						value={m.category}
+					/><input type="hidden" name="stage" value={m.stage} /><input
+						type="hidden"
+						name="done"
+						value={m.done ? '' : 'on'}
+					/><Button
+						type="submit"
+						variant={m.done ? 'secondary' : 'outline'}
+						size="icon"
+						disabled={!hydrated || !data.user}
+						aria-label={`${m.done ? 'Undo' : 'Complete'} ${m.title}`}
+						>{m.done ? '✓' : m.category === 'badge' ? '◇' : '○'}</Button
+					>
+					<div>
+						<p class="text-sm font-semibold">{m.title}</p>
+						<p class="mt-1 text-xs text-muted-foreground">{m.category}</p>
+					</div>
+				</form>
+			{/each}
+		</div>
+	</Tabs.Content>
+</Tabs.Root>
+
+<Dialog.Root
+	open={detailsNumber !== null}
+	onOpenChange={(v) => {
+		if (!v) detailsNumber = null;
+	}}
+	><Dialog.Content class="max-h-[90dvh] overflow-y-auto sm:max-w-3xl"
+		><Dialog.Header
+			><Dialog.Title>Pokédex field notes</Dialog.Title><Dialog.Description
+				>Encounters, evolution, stats and your own catches in {game.name}.</Dialog.Description
+			></Dialog.Header
+		>
+		{#if detailsNumber !== null}
+			{@const p = speciesByNumber.get(detailsNumber)}
+			<div class="rounded-xl border p-4">
+				<div class="flex items-center justify-between gap-2">
+					<h3 class="font-semibold">My {p?.name} collection</h3>
+					<Button
+						size="sm"
+						disabled={!hydrated || !data.user}
+						onclick={() => editCatch(detailsNumber!)}>Register a catch</Button
+					>
+				</div>
+				<div class="mt-3 space-y-2">
+					{#each data.catches.filter((c) => c.number === detailsNumber) as c (c.catch.id)}<button
+							class="flex w-full items-center justify-between rounded-lg bg-muted/40 p-3 text-left"
+							onclick={() => editCatch(c.number, c.catch)}
+							><span
+								><span class="font-semibold">{c.catch.nickname || c.name}</span><span
+									class="mt-1 block text-xs text-muted-foreground"
+									>{c.catch.moves.join(' · ') || 'No moves recorded'}</span
+								></span
+							><span class="text-xs"
+								>Lv. {c.catch.level}{c.catch.partySlot ? ` · slot ${c.catch.partySlot}` : ''}</span
+							></button
+						>{:else}<p class="text-sm text-muted-foreground">
+							No individual catches registered yet.
+						</p>{/each}
+				</div>
+			</div>
+			<PokemonDetails
+				number={detailsNumber}
+				gameId={game.id}
+				isAdmin={data.isAdmin}
+				onsaved={() => invalidateAll()}
+			/>
+		{/if}
+	</Dialog.Content></Dialog.Root
+>
+{#if catchSpecies}{#key `${catchSpecies.id}-${catchRecord?.id ?? 'new'}`}<CatchEditor
+			bind:open={catchOpen}
+			species={catchSpecies}
+			gameId={game.id}
+			record={catchRecord}
+			{stage}
+			location={data.locations.find((p) => p.slug === location)?.name ?? location}
+			signedIn={!!data.user}
+			ondelete={() => (deleteOpen = true)}
+			ondetails={() => {
+				catchOpen = false;
+				detailsNumber = catchNumber;
+			}}
+		/>{/key}{/if}
+<AlertDialog.Root bind:open={deleteOpen}
+	><AlertDialog.Content
+		><AlertDialog.Header
+			><AlertDialog.Title>Remove this catch record?</AlertDialog.Title><AlertDialog.Description
+				>This removes its nickname, moves and party slot. Other catches and the historical caught
+				checkmark remain saved.</AlertDialog.Description
+			></AlertDialog.Header
+		><AlertDialog.Footer
+			><AlertDialog.Cancel>Keep Pokémon</AlertDialog.Cancel><Button
+				variant="destructive"
+				onclick={removeCatch}
+				disabled={saving}>Remove record</Button
+			></AlertDialog.Footer
+		></AlertDialog.Content
+	></AlertDialog.Root
+>
+<Dialog.Root bind:open={milestoneOpen}
+	><Dialog.Content
+		><Dialog.Header
+			><Dialog.Title>Set a new milestone</Dialog.Title><Dialog.Description
+				>A battle, a ribbon, a rare encounter, or your own challenge.</Dialog.Description
+			></Dialog.Header
+		>
+		{#if milestoneMessage}<p role="alert" class="text-destructive">{milestoneMessage}</p>{/if}
+		<form
+			method="POST"
+			action="?/saveMilestone"
+			class="space-y-4"
+			use:enhance={() =>
+				async ({ result, update }) => {
+					await update();
+					if (result.type === 'success') {
+						milestoneOpen = false;
+						milestoneMessage = '';
+					} else
+						milestoneMessage =
+							result.type === 'failure'
+								? String(result.data?.message ?? 'Could not save milestone.')
+								: 'Could not save milestone.';
+				}}
+		>
+			<input type="hidden" name="gameId" value={game.id} /><input
+				type="hidden"
+				name="stage"
+				value={stage}
+			/><input type="hidden" name="category" value="event" /><label class="block"
+				>Milestone<Input name="title" required maxlength={200} /></label
+			><Button type="submit">Add milestone</Button>
+		</form></Dialog.Content
+	></Dialog.Root
+>

src/lib/game-tracker/PokemonMap.svelte

@@ -0,0 +1,534 @@
+<script lang="ts">
+	import { pokemonImage } from '$lib/game-tracker/game-art';
+	import { untrack } from 'svelte';
+	import { base } from '$app/paths';
+	import { Slider } from '$lib/components/ui/slider/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { NativeSelect } from '$lib/components/ui/native-select/index.js';
+	import { Checkbox } from '$lib/components/ui/checkbox/index.js';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import * as Tabs from '$lib/components/ui/tabs/index.js';
+	import EncounterGrid from './EncounterGrid.svelte';
+	import ProgressMeter from './ProgressMeter.svelte';
+	import { fitViewport } from './fit-viewport';
+	import { type AtlasNode } from './pokemon-world';
+	import mapArtwork from '../../../data/pokemon-map-art.json';
+	const regionMaps: Record<string, (typeof mapArtwork)['sinnoh']> = mapArtwork;
+	type Place = { id: number; slug: string; name: string; region: string | null; count: number };
+	type Encounter = {
+		pokemonId: number;
+		number: number;
+		name: string;
+		type1: string;
+		type2: string | null;
+		area: string | null;
+		method: string;
+		minLevel: number | null;
+		maxLevel: number | null;
+		rarity: number | null;
+		conditions: string[];
+		form: string | null;
+		note: string | null;
+	};
+	let {
+		gameId,
+		regions,
+		locations,
+		location = $bindable(''),
+		caughtNumbers,
+		seenNumbers,
+		pendingSeen,
+		onseen,
+		onpokemon,
+		oncatch,
+		canRegister,
+		stage,
+		regionalOrder
+	}: {
+		stage: string;
+		regionalOrder: Map<number, number>;
+		gameId: number;
+		regions: string[];
+		locations: Place[];
+		location?: string;
+		caughtNumbers: Set<number>;
+		seenNumbers: Set<number>;
+		pendingSeen: Set<number>;
+		onseen: (number: number, seen: boolean) => void;
+		onpokemon: (number: number) => void;
+		oncatch: (number: number) => void;
+		canRegister: boolean;
+	} = $props();
+	let region = $state(
+		untrack(() => {
+			const saved = locations.find((p) => p.slug === location)?.region?.toLowerCase();
+			return saved && regions.includes(saved) ? saved : (regions[0] ?? '');
+		})
+	);
+	let zoom = $state(1);
+	let filter = $state('');
+	let method = $state('all');
+	let area = $state('all');
+	let mobileView = $state('encounters');
+	let overviewOpen = $state(false);
+	let encounterNumber = $state<number | null>(null);
+	const detailRows = $derived(groups.find(([n]) => n === encounterNumber)?.[1] ?? []);
+	const areas = $derived([...new Set(encounters.flatMap((e) => (e.area ? [e.area] : [])))]);
+	let encounters = $state<Encounter[]>([]);
+	let loading = $state(true);
+	let loadError = $state('');
+	let retry = $state(0);
+	let includeSpecial = $derived(stage !== 'story');
+	let viewport: HTMLDivElement;
+	let viewportWidth = $state(640);
+	let viewportHeight = $state(560);
+	let showNames = $state(false);
+	const mapWidth = $derived(
+		map ? Math.min(viewportWidth, (viewportHeight * map.width) / map.height) * zoom : viewportWidth
+	);
+	let dragging: { x: number; y: number; left: number; top: number } | null = null;
+	const map = $derived(regionMaps[region]);
+	const places = $derived(
+		locations
+			.filter((p) => p.region?.toLowerCase() === region || (regions.length === 1 && p.count > 0))
+			.sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }))
+	);
+	const selected = $derived(
+		locations.find(
+			(p) => p.slug === location && (p.region?.toLowerCase() === region || p.count > 0)
+		)
+	);
+	const selectedLocationId = $derived(selected?.id);
+	const node = $derived(map?.nodes.find((n) => n.slug === location));
+	const methods = $derived([...new Set(encounters.map((e) => e.method))]);
+	const special = (e: Encounter) =>
+		e.conditions.some((c) => /pok.radar|swarm|slot 2|national|radio/i.test(c));
+	const groups = $derived(
+		[
+			...Map.groupBy(
+				encounters.filter(
+					(e) =>
+						(area === 'all' || e.area === area) &&
+						(method === 'all' || e.method === method) &&
+						(includeSpecial || !special(e))
+				),
+				(e) => e.number
+			)
+		].sort(([a], [b]) => (regionalOrder.get(a) ?? a + 10000) - (regionalOrder.get(b) ?? b + 10000))
+	);
+	const hiddenSpecial = $derived(encounters.filter(special).length);
+	const placeMap = $derived(new Map(places.map((p) => [p.slug, p])));
+	const choices = $derived(
+		[
+			...new Map(
+				[
+					...places.map((p) => ({ slug: p.slug, name: p.name, count: p.count })),
+					...(map?.nodes ?? [])
+						.filter((n) => !placeMap.has(n.slug))
+						.map((n) => ({ slug: n.slug, name: n.name, count: 0 }))
+				].map((p) => [p.slug, p])
+			).values()
+		].filter((p) => p.name.toLowerCase().includes(filter.toLowerCase()))
+	);
+	$effect(() => {
+		if (!regions.includes(region)) region = regions[0] ?? '';
+	});
+	$effect(() => {
+		const id = selectedLocationId;
+		const game = gameId;
+		void retry;
+		encounters = [];
+		method = 'all';
+		area = 'all';
+		encounterNumber = null;
+		loadError = '';
+		loading = !!id;
+		if (!id) return;
+		const controller = new AbortController();
+		fetch(`${base}/projects/game-tracker/pokemon/api/encounters?game=${game}&location=${id}`, {
+			signal: controller.signal
+		})
+			.then((r) => {
+				if (!r.ok) throw new Error('Could not load this location.');
+				return r.json();
+			})
+			.then((rows: Encounter[]) => {
+				if (!controller.signal.aborted) encounters = rows;
+			})
+			.catch((e) => {
+				if (!controller.signal.aborted) loadError = e.message;
+			})
+			.finally(() => {
+				if (!controller.signal.aborted) loading = false;
+			});
+		return () => controller.abort();
+	});
+	function choose(point: AtlasNode) {
+		location = point.slug;
+		mobileView = 'encounters';
+	}
+</script>
+
+<Tabs.Root bind:value={mobileView} class="mb-2 lg:hidden"
+	><Tabs.List class="w-full"
+		><Tabs.Trigger value="encounters" class="flex-1">Area Pokémon</Tabs.Trigger><Tabs.Trigger
+			value="map"
+			class="flex-1">Region map</Tabs.Trigger
+		></Tabs.List
+	></Tabs.Root
+>
+<div class="grid gap-3 lg:grid-cols-[minmax(0,.85fr)_minmax(0,1.15fr)]">
+	<section
+		class={`min-w-0 overflow-hidden rounded-xl border bg-card ${mobileView === 'map' ? '' : 'max-lg:hidden'}`}
+	>
+		<div class="flex flex-wrap items-center justify-between gap-2 border-b px-3 py-2">
+			<div>
+				<p class="text-xs font-semibold tracking-[.18em] text-muted-foreground uppercase">
+					Field atlas
+				</p>
+				<h2 class="text-xl font-semibold">{map?.name ?? 'Region map'}</h2>
+			</div>
+			<div class="flex items-center gap-2">
+				{#if regions.length > 1}<NativeSelect
+						aria-label="Map region"
+						bind:value={region}
+						onchange={() => {
+							location = '';
+							zoom = 1;
+						}}
+						>{#each regions as r (r)}<option value={r}>{regionMaps[r]?.name ?? r}</option
+							>{/each}</NativeSelect
+					>{/if}
+				<Button
+					variant="outline"
+					size="icon"
+					aria-label="Zoom out"
+					disabled={zoom <= 1}
+					onclick={() => (zoom = Math.max(1, zoom - 0.5))}>−</Button
+				>
+				<div class="hidden w-24 sm:block">
+					<Slider
+						type="single"
+						min={1}
+						max={4}
+						step={0.5}
+						bind:value={zoom}
+						aria-label="Map zoom"
+					/>
+				</div>
+				<Button variant="ghost" size="sm" onclick={() => (zoom = 1)} aria-label="Reset map zoom"
+					>{Math.round(zoom * 100)}%</Button
+				>
+				<Button
+					variant="outline"
+					size="icon"
+					aria-label="Zoom in"
+					disabled={zoom >= 4}
+					onclick={() => (zoom = Math.min(4, zoom + 0.5))}>+</Button
+				>
+			</div>
+		</div>
+		<!-- Scrolling and the location picker offer keyboard alternatives to dragging. -->
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex (scrollable map viewport must be keyboard focusable) -->
+		<div
+			bind:this={viewport}
+			bind:clientWidth={viewportWidth}
+			bind:clientHeight={viewportHeight}
+			class="atlas-viewport h-80 overflow-auto"
+			use:fitViewport={{ minimum: 180, bottom: 64 }}
+			role="region"
+			aria-label={`${map?.name} interactive map`}
+			tabindex="0"
+			onpointerdown={(e) => {
+				if (e.target instanceof Element && e.target.closest('button')) return;
+				dragging = {
+					x: e.clientX,
+					y: e.clientY,
+					left: viewport.scrollLeft,
+					top: viewport.scrollTop
+				};
+				viewport.setPointerCapture(e.pointerId);
+			}}
+			onpointermove={(e) => {
+				if (dragging) {
+					viewport.scrollLeft = dragging.left - (e.clientX - dragging.x);
+					viewport.scrollTop = dragging.top - (e.clientY - dragging.y);
+				}
+			}}
+			onpointerup={() => (dragging = null)}
+			onpointercancel={() => (dragging = null)}
+		>
+			{#if map}
+				<div
+					class="atlas-canvas relative mx-auto"
+					style:width={`${mapWidth}px`}
+					style:height={`${(mapWidth * map.height) / map.width}px`}
+				>
+					<img
+						src={`${base}${map.image}`}
+						alt={`${map.name} region map from the Pokémon games`}
+						width={map.width}
+						height={map.height}
+						draggable="false"
+						class="absolute inset-0 h-full w-full select-none"
+						style:image-rendering={map.pixelated ? 'pixelated' : 'auto'}
+					/>
+					{#each map.nodes as point (point.slug)}
+						<button
+							type="button"
+							class="map-pin absolute -translate-x-1/2 -translate-y-1/2 rounded-full border-2 shadow-sm transition-colors focus-visible:z-30 focus-visible:outline-2 focus-visible:outline-offset-4"
+							class:selected={location === point.slug}
+							class:town={point.kind === 'town'}
+							style:left={`${(point.x / map.width) * 100}%`}
+							style:top={`${(point.y / map.height) * 100}%`}
+							title={`${point.name} · ${placeMap.get(point.slug)?.count ?? 0} recorded species`}
+							aria-label={`Explore ${point.name}`}
+							aria-pressed={location === point.slug}
+							onclick={() => choose(point)}
+						>
+							<span
+								class="pin-label pointer-events-none absolute bottom-full left-1/2 mb-1 -translate-x-1/2 whitespace-nowrap rounded bg-background/95 px-1.5 py-0.5 text-[10px] font-semibold text-foreground shadow-sm"
+								class:visible-label={(showNames && point.kind === 'town') ||
+									location === point.slug}>{point.name}</span
+							>
+						</button>
+					{/each}
+					<div
+						class="hidden pointer-events-none absolute bottom-4 left-4 rounded-lg border bg-background/90 px-3 py-2 text-xs text-muted-foreground"
+					>
+						<span class="mr-2 text-amber-500">●</span>selected location · drag to explore
+					</div>
+				</div>
+			{:else}<p class="p-8 text-muted-foreground">
+					No regional map is recorded for this title yet.
+				</p>{/if}
+		</div>
+		<div
+			class="flex flex-wrap justify-between gap-2 border-t px-4 py-3 text-xs text-muted-foreground"
+		>
+			<label class="flex items-center gap-2"><Checkbox bind:checked={showNames} />Town names</label
+			><span>{map?.precision}</span>{#if map}<!-- Catalog or validated external URL. -->
+				<!-- eslint-disable svelte/no-navigation-without-resolve -->
+				<a href={map.source} target="_blank" rel="noreferrer" class="underline">map source ↗</a>
+				<!-- eslint-enable svelte/no-navigation-without-resolve -->{/if}
+		</div>
+	</section>
+	<section
+		class={`min-w-0 rounded-xl border bg-card p-3 ${mobileView === 'encounters' ? '' : 'max-lg:hidden'}`}
+		aria-label="Area encounters"
+	>
+		<div class="mb-2 flex items-center justify-between gap-2">
+			<div>
+				<h2 class="text-base font-semibold">
+					{selected?.name ?? node?.name ?? 'Choose a location'}
+				</h2>
+				<p class="text-[11px] text-muted-foreground">
+					{groups.length} Pokémon · {groups.filter(([n]) => caughtNumbers.has(n)).length} caught
+				</p>
+			</div>
+			<Button
+				variant="outline"
+				size="sm"
+				onclick={() => (overviewOpen = true)}
+				disabled={!groups.length}>Expand encounters</Button
+			>
+		</div>
+		<div class="grid grid-cols-2 gap-2">
+			<Input
+				type="search"
+				aria-label="Find a location"
+				placeholder="Find a route…"
+				bind:value={filter}
+			/>
+			<NativeSelect class="w-full" aria-label="Encounter location" bind:value={location}
+				><option value="">Choose a location</option>{#each choices as p (p.slug)}<option
+						value={p.slug}>{p.name}</option
+					>{/each}</NativeSelect
+			>
+			{#if areas.length > 1}<NativeSelect aria-label="Encounter area" bind:value={area}
+					><option value="all">All areas / floors</option>{#each areas as a (a)}<option value={a}
+							>{a}</option
+						>{/each}</NativeSelect
+				>{/if}
+			{#if methods.length > 1}<NativeSelect aria-label="Encounter method" bind:value={method}
+					><option value="all">All encounter methods</option>{#each methods as m (m)}<option
+							value={m}>{m}</option
+						>{/each}</NativeSelect
+				>{/if}
+		</div>
+		<div class="mt-2 grid grid-cols-2 gap-4">
+			<ProgressMeter
+				label="Area caught"
+				progress={{
+					value: groups.filter(([n]) => caughtNumbers.has(n)).length,
+					total: groups.length
+				}}
+				compact
+			/>
+			<ProgressMeter
+				label="Area seen"
+				progress={{
+					value: groups.filter(([n]) => caughtNumbers.has(n) || seenNumbers.has(n)).length,
+					total: groups.length
+				}}
+				color="sky"
+				compact
+			/>
+		</div>
+		{#if hiddenSpecial}<label class="mt-2 flex items-center gap-2 text-[11px] text-muted-foreground"
+				><Checkbox bind:checked={includeSpecial} />Include special conditions (radar, swarms, other
+				cartridges)</label
+			>{/if}
+		<div class="mt-2 h-64" use:fitViewport={{ bottom: 48, minimum: 120 }} aria-live="polite">
+			{#if loading}<p class="py-8 text-sm text-muted-foreground">Searching the tall grass…</p>
+			{:else if loadError}<p role="alert">{loadError}</p>
+				<Button variant="outline" onclick={() => retry++}>Try again</Button>
+			{:else if groups.length}<EncounterGrid
+					{groups}
+					{caughtNumbers}
+					onselect={(number) => (encounterNumber = number)}
+				/>
+			{:else}<div class="rounded-xl border border-dashed p-5 text-sm text-muted-foreground">
+					{location
+						? 'No encounters are recorded here for these filters. Check the location guide for gifts, special events or missing data.'
+						: 'Pick a marker or choose a location to explore encounters.'}
+				</div>{/if}
+		</div>
+		{#if selected || node}<a
+				class="mt-2 inline-block text-[10px] text-muted-foreground underline"
+				href={`https://bulbapedia.bulbagarden.net/wiki/${encodeURIComponent((selected?.name ?? node?.name ?? '').startsWith('Route') ? `${map?.name ?? ''} ${selected?.name ?? node?.name}` : (selected?.name ?? node?.name ?? ''))}`}
+				target="_blank"
+				rel="noreferrer">Location guide on Bulbapedia ↗</a
+			>{/if}
+	</section>
+</div>
+
+<Dialog.Root bind:open={overviewOpen}
+	><Dialog.Content class="flex h-[90dvh] max-w-[96vw] flex-col gap-3 p-4 sm:max-w-[96vw]"
+		><Dialog.Header
+			><Dialog.Title>{selected?.name ?? node?.name} · all {groups.length} Pokémon</Dialog.Title
+			><Dialog.Description
+				>Every species matching your area and method filters. Tap a portrait for levels, encounter
+				conditions and catch registration.</Dialog.Description
+			></Dialog.Header
+		>
+		<div class="min-h-0 flex-1">
+			<EncounterGrid {groups} {caughtNumbers} onselect={(number) => (encounterNumber = number)} />
+		</div></Dialog.Content
+	></Dialog.Root
+>
+<Dialog.Root
+	open={encounterNumber !== null}
+	onOpenChange={(open) => {
+		if (!open) encounterNumber = null;
+	}}
+>
+	<Dialog.Content class="max-h-[85dvh] overflow-y-auto sm:max-w-2xl">
+		<Dialog.Header
+			><Dialog.Title
+				>{detailRows[0]?.name ?? 'Pokémon'} · {selected?.name ?? node?.name}</Dialog.Title
+			><Dialog.Description>All recorded encounters matching your filters.</Dialog.Description
+			></Dialog.Header
+		>
+		{#if encounterNumber !== null}<div class="flex items-center gap-3">
+				<img src={pokemonImage(encounterNumber)} alt="" width="64" height="64" />
+				<p class="text-sm">
+					{detailRows[0]?.type1}{detailRows[0]?.type2
+						? ` / ${detailRows[0].type2}`
+						: ''}{caughtNumbers.has(encounterNumber) ? ' · ✓ caught' : ''}
+				</p>
+			</div>{/if}
+		<div class="space-y-2">
+			{#each detailRows as row, i (i)}<div class="rounded-lg border p-3 text-xs">
+					<p class="font-medium">
+						{row.method}{row.area ? ` · ${row.area}` : ''} · Lv. {row.minLevel ??
+							'?'}{row.maxLevel !== row.minLevel ? `–${row.maxLevel}` : ''}{row.rarity !== null
+							? ` · ${row.rarity}%`
+							: ''}
+					</p>
+					{#if row.conditions.length || row.form || row.note}<p class="mt-1 text-muted-foreground">
+							{[row.form, ...row.conditions, row.note].filter(Boolean).join(' · ')}
+						</p>{/if}
+				</div>{/each}
+		</div>
+		<Dialog.Footer
+			><Button
+				variant="secondary"
+				disabled={!canRegister ||
+					(encounterNumber !== null &&
+						(caughtNumbers.has(encounterNumber) || pendingSeen.has(encounterNumber)))}
+				onclick={() => {
+					if (encounterNumber !== null) onseen(encounterNumber, !seenNumbers.has(encounterNumber));
+				}}
+				>{encounterNumber !== null &&
+				(seenNumbers.has(encounterNumber) || caughtNumbers.has(encounterNumber))
+					? '✓ Seen · undo'
+					: 'Mark as seen'}</Button
+			><Button
+				variant="outline"
+				onclick={() => {
+					const n = encounterNumber!;
+					encounterNumber = null;
+					overviewOpen = false;
+					onpokemon(n);
+				}}>Species research</Button
+			><Button
+				disabled={!canRegister}
+				onclick={() => {
+					const n = encounterNumber!;
+					encounterNumber = null;
+					overviewOpen = false;
+					oncatch(n);
+				}}>Register a catch</Button
+			></Dialog.Footer
+		>
+	</Dialog.Content>
+</Dialog.Root>
+
+<style>
+	.atlas-viewport {
+		background: linear-gradient(
+			135deg,
+			color-mix(in oklch, var(--background), #549da3 12%),
+			color-mix(in oklch, var(--background), #8fa965 10%)
+		);
+		cursor: grab;
+	}
+	.atlas-viewport:active {
+		cursor: grabbing;
+	}
+	.map-pin {
+		width: 10px;
+		height: 10px;
+		background: #6ca68e;
+		border-color: var(--background);
+	}
+	.map-pin.town {
+		width: 14px;
+		height: 14px;
+		background: #ebc481;
+	}
+	.map-pin.selected {
+		background: #f59e0b;
+		border-color: #fff;
+		z-index: 20;
+		box-shadow: 0 0 0 5px #f59e0b40;
+	}
+	.pin-label {
+		visibility: hidden;
+	}
+	@media (max-width: 639px) {
+		.map-pin .pin-label.visible-label {
+			visibility: hidden;
+		}
+		.map-pin.selected .pin-label {
+			visibility: visible;
+		}
+	}
+	.visible-label,
+	.map-pin:hover .pin-label,
+	.map-pin:focus-visible .pin-label {
+		visibility: visible;
+	}
+</style>

src/lib/game-tracker/PokemonProgress.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import ChartNoAxesCombined from 'lucide-svelte/icons/chart-no-axes-combined';
+	import ProgressMeter from './ProgressMeter.svelte';
+	import type { pokemonProgress } from './progress';
+	let { progress, gameId }: { progress: ReturnType<typeof pokemonProgress>; gameId: number } =
+		$props();
+	let open = $state(false);
+	const current = $derived(progress.games.find((g) => g.id === gameId));
+</script>
+
+<section class="mt-2 rounded-lg border bg-card px-3 py-2.5" aria-label="Pokémon completion">
+	<div class="mb-2 flex items-center justify-between gap-3">
+		<h2 class="text-xs font-semibold">Quick progress</h2>
+		<Button variant="ghost" size="xs" class="h-6 gap-1 text-[10px]" onclick={() => (open = true)}
+			><ChartNoAxesCombined class="size-3.5" aria-hidden="true" />Full breakdown</Button
+		>
+	</div>
+	<div class="grid grid-cols-2 gap-x-5 gap-y-2 sm:grid-cols-4">
+		{#if current}<ProgressMeter
+				label={`${current.name} completion`}
+				progress={current.overall}
+				color="amber"
+				compact
+				hint="Collection, story, postgame and transfers/events contribute equally where available."
+			/>{/if}
+		<ProgressMeter
+			label="National collection"
+			progress={progress.caught}
+			compact
+			hint={`${progress.caught.value} / ${progress.caught.total} unique species caught across selected games.`}
+		/>
+		<ProgressMeter
+			label="Species seen at least once"
+			progress={progress.seen}
+			color="sky"
+			compact
+			hint={`${progress.seen.value} / ${progress.seen.total} species. Catches count as seen.`}
+		/>
+		<ProgressMeter
+			label="Games completed"
+			progress={progress.completed}
+			color="violet"
+			compact
+			hint={`${progress.completed.value} / ${progress.completed.total} stories cleared.`}
+		/>
+	</div>
+</section>
+
+<Dialog.Root bind:open
+	><Dialog.Content class="max-h-[85dvh] overflow-y-auto sm:max-w-3xl">
+		<Dialog.Header
+			><Dialog.Title>Your Pokémon progress</Dialog.Title><Dialog.Description
+				>Every catch, discovery and milestone adds up. Collection totals exclude unconfirmed
+				availability unless you have recorded a catch.</Dialog.Description
+			></Dialog.Header
+		>
+		<div class="grid gap-4 sm:grid-cols-3">
+			<ProgressMeter label="National collection" progress={progress.caught} />
+			<ProgressMeter label="Species seen at least once" progress={progress.seen} color="sky" />
+			<ProgressMeter label="Games completed" progress={progress.completed} color="violet" />
+			<ProgressMeter
+				label="All adventures"
+				progress={progress.overall}
+				color="amber"
+				detail="Equal weight per selected game"
+			/>
+			<ProgressMeter label="All species / game pairs" progress={progress.collection} />
+		</div>
+		{#if current}
+			<h3 class="border-t pt-4 font-semibold">{current.name} · your adventure</h3>
+			<div class="grid grid-cols-2 gap-4 sm:grid-cols-3">
+				<ProgressMeter label="Game collection" progress={current.collection} />
+				<ProgressMeter
+					label="Obtainable in-game"
+					progress={current.inGame}
+					hint="Catch, evolve and breed; trades, events and transfers have their own collection stage."
+				/>
+				<ProgressMeter label="Seen in this game" progress={current.seen} color="sky" />
+				{#if current.regional.total}<ProgressMeter
+						label="Regional dex caught"
+						progress={current.regional}
+					/><ProgressMeter
+						label="Regional dex seen"
+						progress={current.regionalSeen}
+						color="sky"
+					/>{/if}
+				{#each [{ label: 'Story milestones', progress: current.story }, { label: 'Badges & trials', progress: current.badges }, { label: 'League battles', progress: current.league }, { label: 'Boss battles', progress: current.bosses }, { label: 'Postgame milestones', progress: current.postgame }, { label: 'Trades, transfers & events', progress: current.transfers }, { label: 'Personal milestones', progress: current.custom }] as metric (metric.label)}
+					{#if metric.progress.total}<ProgressMeter
+							label={metric.label}
+							progress={metric.progress}
+							color="amber"
+						/>{/if}
+				{/each}
+			</div>
+		{/if}
+		<p class="text-xs text-muted-foreground">
+			Game completion averages collection, story, postgame and transfer/event milestones. Games
+			completed counts stories you mark cleared, or games with every default story milestone
+			finished. These percentages describe the imported catalog and your selected games.
+		</p>
+	</Dialog.Content></Dialog.Root
+>

src/lib/game-tracker/ProgressMeter.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { Progress } from '$lib/components/ui/progress/index.js';
+	import { fraction, type ProgressCount } from './progress';
+	let {
+		label,
+		progress,
+		detail,
+		hint = '',
+		color = 'emerald',
+		compact = false
+	}: {
+		label: string;
+		progress: ProgressCount;
+		detail?: string;
+		hint?: string;
+		color?: 'emerald' | 'sky' | 'amber' | 'violet' | 'pink';
+		compact?: boolean;
+	} = $props();
+	const percent = $derived(fraction(progress) * 100);
+	// Keep tiny catalog gains visible without rounding unfinished progress up to 100%.
+	const display = $derived(
+		percent === 100
+			? '100'
+			: percent === 0
+				? '0'
+				: percent < 0.01
+					? '<0.01'
+					: Math.min(99.99, percent).toFixed(2)
+	);
+	const colors = {
+		emerald: '[&_[data-slot=progress-indicator]]:bg-emerald-500',
+		sky: '[&_[data-slot=progress-indicator]]:bg-sky-500',
+		amber: '[&_[data-slot=progress-indicator]]:bg-amber-500',
+		violet: '[&_[data-slot=progress-indicator]]:bg-violet-500',
+		pink: '[&_[data-slot=progress-indicator]]:bg-pink-500'
+	};
+</script>
+
+<div class="min-w-0 space-y-1" title={hint}>
+	<div class="flex items-baseline justify-between gap-2">
+		<span class={compact ? 'truncate text-[10px] text-muted-foreground' : 'text-xs font-medium'}
+			>{label}</span
+		>
+		<span class={`shrink-0 font-semibold tabular-nums ${compact ? 'text-xs' : 'text-sm'}`}
+			>{display}%{percent === 100 ? ' ✓' : ''}</span
+		>
+	</div>
+	<Progress
+		value={percent}
+		max={100}
+		aria-label={label}
+		aria-valuetext={`${display}%${detail ? ` · ${detail}` : ''}`}
+		class={`h-1.5 ${colors[color]} [&_[data-slot=progress-indicator]]:duration-700 [&_[data-slot=progress-indicator]]:ease-out motion-reduce:[&_[data-slot=progress-indicator]]:transition-none`}
+	/>
+	{#if !compact}<p class="text-[10px] text-muted-foreground">
+			{detail ?? `${progress.value.toLocaleString()} / ${progress.total.toLocaleString()}`}
+		</p>{/if}
+</div>

src/lib/game-tracker/WeaponArtwork.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { base } from '$app/paths';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import artwork from '../../../data/cod-art.json';
+	let { game, name, icon }: { game: string; name: string; icon: string | null } = $props();
+	const source = $derived(
+		artwork.find((a) => a.game === game && a.name.toLowerCase() === name.toLowerCase())
+	);
+	const src = $derived(source ? `${base}${source.path}` : icon);
+</script>
+
+{#if src}
+	<Dialog.Root>
+		<Dialog.Trigger
+			class="shrink-0 overflow-hidden rounded-md border focus-visible:outline-2"
+			aria-label={`View ${name} artwork`}
+			><img
+				{src}
+				alt=""
+				loading="lazy"
+				width="112"
+				height="64"
+				class="h-16 w-28 object-contain"
+			/></Dialog.Trigger
+		>
+		<Dialog.Content class="sm:max-w-3xl"
+			><Dialog.Header
+				><Dialog.Title>{name}</Dialog.Title><Dialog.Description
+					>{source?.credit ?? 'Weapon artwork'}</Dialog.Description
+				></Dialog.Header
+			><img
+				{src}
+				alt={`${name} weapon reference for ${game.replaceAll('-', ' ')}`}
+				class="max-h-[65dvh] w-full object-contain"
+			/>{#if source}<!-- Catalog or validated external URL. -->
+				<!-- eslint-disable svelte/no-navigation-without-resolve -->
+				<a
+					href={source.source}
+					target="_blank"
+					rel="noreferrer"
+					class="text-xs text-muted-foreground underline">Image source ↗</a
+				>
+				<!-- eslint-enable svelte/no-navigation-without-resolve -->{/if}</Dialog.Content
+		>
+	</Dialog.Root>
+{/if}

src/lib/game-tracker/WeaponRankControls.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+	import { deserialize } from '$app/forms';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import Minus from 'lucide-svelte/icons/minus';
+	import Plus from 'lucide-svelte/icons/plus';
+	let {
+		itemId,
+		name,
+		level,
+		prestige,
+		levelCap = null,
+		prestigeCap = 1000,
+		prestigeRequiresMaxLevel = false,
+		compact = false,
+		disabled,
+		onupdate,
+		onedit
+	}: {
+		itemId: number;
+		name: string;
+		level: number;
+		prestige: number;
+		levelCap?: number | null;
+		prestigeCap?: number;
+		prestigeRequiresMaxLevel?: boolean;
+		compact?: boolean;
+		disabled: boolean;
+		onupdate: (rank: { itemId: number; level: number; prestige: number }) => void;
+		onedit: () => void;
+	} = $props();
+	let saving = $state(false);
+	let error = $state('');
+	let saved = $state(false);
+	async function adjust(field: 'level' | 'prestige', delta: number) {
+		if (saving) return;
+		saving = true;
+		error = '';
+		saved = false;
+		const body = new FormData();
+		body.set('itemId', String(itemId));
+		body.set('field', field);
+		body.set('delta', String(delta));
+		try {
+			const result = deserialize(
+				await (await fetch('?/adjustWeaponRank', { method: 'POST', body })).text()
+			);
+			if (result.type !== 'success')
+				throw new Error(
+					result.type === 'failure'
+						? String(result.data?.message ?? 'Could not save.')
+						: 'Could not save.'
+				);
+			const rank = result.data?.rank as { itemId: number; level: number; prestige: number };
+			onupdate(rank);
+			saved = true;
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Could not save. Try again.';
+		} finally {
+			saving = false;
+		}
+	}
+</script>
+
+<div class="space-y-1">
+	<div class="flex flex-wrap items-center gap-3">
+		<div
+			class="flex items-center gap-1 rounded-lg border bg-background p-1"
+			aria-label={`${name} level controls`}
+		>
+			<Button
+				variant="ghost"
+				size="icon"
+				class={compact ? 'size-7' : 'size-10'}
+				aria-label={`Level down ${name}`}
+				disabled={disabled || saving || level <= 1}
+				onclick={() => adjust('level', -1)}
+				><Minus class={compact ? 'size-3' : 'size-4'} aria-hidden="true" /></Button
+			>
+			<Button
+				variant="ghost"
+				class={compact
+					? 'h-8 min-w-11 flex-col gap-0 px-1 tabular-nums'
+					: 'h-10 min-w-16 flex-col gap-0 px-2 tabular-nums'}
+				aria-label={`Edit ${name} level and prestige`}
+				disabled={disabled || saving}
+				onclick={onedit}
+				><span
+					class={compact ? 'text-[8px] text-muted-foreground' : 'text-[10px] text-muted-foreground'}
+					>LEVEL</span
+				><span class={compact ? 'text-sm font-semibold' : 'text-lg font-semibold'}>{level}{#if levelCap}<span class="text-muted-foreground">/{levelCap}</span>{/if}</span
+				></Button
+			>
+			<Button
+				variant="secondary"
+				size="icon"
+				class={compact ? 'size-7' : 'size-10'}
+				aria-label={`Level up ${name}`}
+				disabled={disabled || saving || level >= (levelCap ?? 10000)}
+				onclick={() => adjust('level', 1)}
+				><Plus class={compact ? 'size-3' : 'size-4'} aria-hidden="true" /></Button
+			>
+		</div>
+		<div
+			class="flex items-center gap-1 rounded-lg border bg-background p-1"
+			aria-label={`${name} prestige controls`}
+		>
+			<Button
+				variant="ghost"
+				size="icon"
+				class={compact ? 'size-7' : 'size-10'}
+				aria-label={`Prestige down ${name}`}
+				disabled={disabled || saving || prestige <= 0}
+				onclick={() => adjust('prestige', -1)}
+				><Minus class={compact ? 'size-3' : 'size-4'} aria-hidden="true" /></Button
+			>
+			<span class="min-w-12 text-center tabular-nums"
+				><span
+					class={compact
+						? 'block text-[8px] text-muted-foreground'
+						: 'block text-[10px] text-muted-foreground'}>PRESTIGE</span
+				><span class={compact ? 'text-sm font-semibold' : 'text-lg font-semibold'}>{prestige}{#if prestigeCap < 1000}<span class="text-muted-foreground">/{prestigeCap}</span>{/if}</span
+				></span
+			>
+			<Button
+				variant="secondary"
+				size="icon"
+				class={compact ? 'size-7' : 'size-10'}
+				aria-label={`Prestige up ${name}`}
+				disabled={disabled || saving || prestige >= prestigeCap || (prestigeRequiresMaxLevel && level < (levelCap ?? 10000))}
+				onclick={() => adjust('prestige', 1)}
+				><Plus class={compact ? 'size-3' : 'size-4'} aria-hidden="true" /></Button
+			>
+		</div>
+	</div>
+	<p class="min-h-3 text-[9px] text-muted-foreground" role="status">
+		{saving ? 'Saving…' : error || (saved ? 'Saved' : 'Tap the level to edit both values')}
+	</p>
+</div>

src/lib/game-tracker/fit-viewport.ts

@@ -0,0 +1,28 @@
+/** Size a companion panel from its real page position, allowing room for its footer. */
+export function fitViewport(node: HTMLElement, { minimum = 140, maximum = 560, bottom = 48 } = {}) {
+	let frame = 0;
+	const measure = () => {
+		cancelAnimationFrame(frame);
+		frame = requestAnimationFrame(() => {
+			if (!node.getClientRects().length) return;
+			const top = node.getBoundingClientRect().top + window.scrollY;
+			const height = Math.round(
+				Math.max(minimum, Math.min(maximum, window.innerHeight - top - bottom))
+			);
+			if (node.style.height !== `${height}px`) node.style.height = `${height}px`;
+		});
+	};
+	const observer = new ResizeObserver(measure);
+	// Ancestors capture team, filters, tabs and responsive header changes above the panel.
+	for (let parent = node.parentElement; parent; parent = parent.parentElement)
+		observer.observe(parent);
+	window.addEventListener('resize', measure);
+	measure();
+	return {
+		destroy() {
+			observer.disconnect();
+			window.removeEventListener('resize', measure);
+			cancelAnimationFrame(frame);
+		}
+	};
+}

src/lib/game-tracker/game-art.ts

@@ -0,0 +1,15 @@
+import releases from '../../../data/pokemon-releases.json';
+import { base } from '$app/paths';
+
+const dates: Record<string, string> = releases.dates;
+export function pokemonRelease(slug: string | null) {
+	return dates[slug ?? ''] ?? '';
+}
+export function chronologicalPokemon<T extends { slug: string | null; id: number }>(games: T[]) {
+	return [...games].sort(
+		(a, b) => pokemonRelease(a.slug).localeCompare(pokemonRelease(b.slug)) || a.id - b.id
+	);
+}
+export function pokemonImage(number: number, kind: 'sprite' | 'shiny' | 'artwork' = 'sprite') {
+	return `${base}/game-art/pokemon/${kind}/${number}.webp`;
+}

src/lib/game-tracker/journal.test.ts

@@ -0,0 +1,78 @@
+import { describe, expect, it } from 'vitest';
+import { allowedOsuUrl, boundedInteger, firstCatches, validDate } from './journal';
+import { gameRegions, milestonesFor, regionMaps } from './pokemon-world';
+
+describe('journal input and collection rules', () => {
+	it('keeps the first registered catch even when a duplicate has an earlier caught date', () => {
+		const original = { id: 2, pokemonId: 387, nickname: 'Sprout', caughtOn: '2026-09-25' };
+		const duplicate = { id: 8, pokemonId: 387, nickname: 'Other', caughtOn: '2020-01-01' };
+		const input = [duplicate, original, { ...original, id: 9, pokemonId: 399 }];
+		expect(firstCatches(input).get(387)).toBe(original);
+		expect(firstCatches(input).size).toBe(2);
+		expect(input[0]).toBe(duplicate);
+	});
+	it('rejects malformed or impossible numeric values', () => {
+		for (const value of [null, '', '-1', '1e2', '1.5', ' 2', 'NaN', '101'])
+			expect(boundedInteger(value, 1, 100)).toBeNull();
+		expect(boundedInteger('100', 1, 100)).toBe(100);
+		expect(boundedInteger('0', 0, 100)).toBe(0);
+	});
+	it('accepts actual calendar dates including leap days', () => {
+		expect(validDate('2024-02-29')).toBe(true);
+		for (const date of [
+			'2026-02-29',
+			'2026-04-31',
+			'0000-01-01',
+			'2026-13-01',
+			'2026-09-25T00:00:00Z'
+		])
+			expect(validDate(date)).toBe(false);
+	});
+	it('accepts osu links and rejects lookalike hosts, credentials and unrelated routes', () => {
+		expect(allowedOsuUrl('https://osu.ppy.sh/beatmapsets/123#osu/456', 'beatmap')).toBe(true);
+		expect(allowedOsuUrl('https://osu.ppy.sh/scores/osu/123', 'score')).toBe(true);
+		for (const url of [
+			'javascript:alert(1)',
+			'http://osu.ppy.sh/beatmaps/1',
+			'https://osu.ppy.sh.evil.test/beatmaps/1',
+			'https://user@osu.ppy.sh/beatmaps/1',
+			'https://osu.ppy.sh:123/beatmaps/1',
+			'https://osu.ppy.sh/users/1'
+		])
+			expect(allowedOsuUrl(url, 'beatmap')).toBe(false);
+	});
+});
+
+describe('atlas and milestone integrity', () => {
+	it('has unique locations and finite map coordinates in every region', () => {
+		for (const map of Object.values(regionMaps)) {
+			expect(new Set(map.nodes.map((n) => n.slug)).size).toBe(map.nodes.length);
+			expect(map.source).toMatch(/^https:\/\//);
+			for (const node of map.nodes)
+				expect(Number.isFinite(node.x) && Number.isFinite(node.y)).toBe(true);
+		}
+		expect(regionMaps.sinnoh.nodes.some((n) => n.slug === 'sinnoh-route-201')).toBe(true);
+	});
+	it('uses the right region and version-specific leaders', () => {
+		expect(gameRegions('legends-arceus', ['sinnoh'])).toEqual(['hisui']);
+		expect(gameRegions('heartgold', ['kanto', 'johto'])).toEqual(['johto', 'kanto']);
+		expect(gameRegions('unknown', ['unknown'])).toEqual([]);
+		expect(
+			milestonesFor('platinum', 'sinnoh').filter((m) => m.category === 'badge')[2].title
+		).toContain('Fantina');
+		expect(
+			milestonesFor('diamond', 'sinnoh').filter((m) => m.category === 'badge')[2].title
+		).toContain('Maylene');
+		expect(milestonesFor('emerald', 'hoenn').some((m) => m.title === 'Champion · Wallace')).toBe(
+			true
+		);
+		expect(
+			milestonesFor('ultra-sun', 'alola').some((m) => m.title === 'Elite Four · Molayne')
+		).toBe(true);
+		expect(
+			milestonesFor('heartgold', 'johto').filter(
+				(m) => m.stage === 'postgame' && m.category === 'badge'
+			)
+		).toHaveLength(8);
+	});
+});

src/lib/game-tracker/journal.ts

@@ -0,0 +1,67 @@
+export const stages = [
+	{
+		value: 'story',
+		label: 'The adventure',
+		description: 'Catch as you go, earn badges and become Champion.'
+	},
+	{
+		value: 'postgame',
+		label: 'Beyond the credits',
+		description: 'Explore the postgame and finish what you can in this game.'
+	},
+	{
+		value: 'collection',
+		label: 'Complete the collection',
+		description: 'Trades, transfers and event Pokémon.'
+	}
+] as const;
+export type Stage = (typeof stages)[number]['value'];
+export const obtainedMethods = [
+	'caught',
+	'starter',
+	'gift',
+	'evolved',
+	'bred',
+	'trade',
+	'transfer',
+	'event'
+] as const;
+export const isStage = (value: string): value is Stage => stages.some((s) => s.value === value);
+
+export function boundedInteger(value: FormDataEntryValue | null, min: number, max: number) {
+	if (typeof value !== 'string' || !/^\d+$/.test(value)) return null;
+	const number = Number(value);
+	return Number.isSafeInteger(number) && number >= min && number <= max ? number : null;
+}
+export function validDate(value: string) {
+	return (
+		/^\d{4}-\d{2}-\d{2}$/.test(value) &&
+		Number(value.slice(0, 4)) > 0 &&
+		!Number.isNaN(Date.parse(value)) &&
+		new Date(value).toISOString().slice(0, 10) === value
+	);
+}
+export function firstCatches<T extends { id: number; pokemonId: number }>(catches: T[]) {
+	const first = new Map<number, T>();
+	for (const caught of [...catches].sort((a, b) => a.id - b.id))
+		if (!first.has(caught.pokemonId)) first.set(caught.pokemonId, caught);
+	return first;
+}
+export function allowedOsuUrl(value: string, kind: 'beatmap' | 'score') {
+	if (!value) return true;
+	try {
+		const url = new URL(value);
+		return (
+			url.protocol === 'https:' &&
+			url.hostname === 'osu.ppy.sh' &&
+			!url.username &&
+			!url.password &&
+			!url.port &&
+			(kind === 'beatmap'
+				? /^\/(beatmaps|b|beatmapsets)\/\d+\/?$/.test(url.pathname)
+				: /^\/scores\/(?:osu\/|taiko\/|fruits\/|mania\/)?\d+\/?$/.test(url.pathname))
+		);
+	} catch {
+		return false;
+	}
+}

src/lib/game-tracker/mastery.ts

@@ -30,6 +30,13 @@ export type MasteryRules = {
 	tiers: Tier[];
 	classes: string[];
 	steamApps: { id: number; label: string }[];
+	rankCaps?: {
+		player: { level: number; prestige: number };
+		weaponPrestige: number;
+		weaponLevelsByClass: Record<string, number>;
+		weaponLevelOverrides?: Record<string, number>;
+		sourceUrl?: string;
+	};
 };
 
 export type Weapon = { id: number; name: string; category: string; postLaunch: boolean };

src/lib/game-tracker/pokemon-world.ts

@@ -0,0 +1,305 @@
+import atlas from '../../../data/pokemon-atlas.json';
+export type AtlasNode = {
+	slug: string;
+	name: string;
+	x: number;
+	y: number;
+	kind: string;
+	cells: number[][];
+};
+export type RegionMap = {
+	name: string;
+	width: number;
+	height: number;
+	nodes: AtlasNode[];
+	source: string;
+	precision: string;
+};
+export const regionMaps: Record<string, RegionMap> = atlas.regions;
+export function gameRegions(slug: string, regions: string[]) {
+	if (['gold', 'silver', 'crystal', 'heartgold', 'soulsilver'].includes(slug))
+		return ['johto', 'kanto'];
+	if (slug === 'legends-arceus') return ['hisui'];
+	if (slug.includes('teal-mask')) return ['kitakami'];
+	if (slug.includes('indigo-disk')) return ['blueberry'];
+	if (['colosseum', 'xd'].includes(slug)) return ['orre'];
+	return regions.filter((r) => r in regionMaps);
+}
+export function initialLocation(slug: string, region: string) {
+	if (['diamond', 'pearl'].includes(slug)) return 'lake-verity';
+	return (
+		(
+			{
+				sinnoh: 'sinnoh-route-201',
+				kanto: 'pallet-town',
+				johto: 'new-bark-town',
+				hoenn: 'hoenn-route-101',
+				unova: slug.endsWith('-2') ? 'aspertia-city' : 'nuvema-town',
+				kalos: 'aquacorde-town',
+				alola: 'alola-route-1',
+				galar: 'postwick',
+				hisui: 'obsidian-fieldlands',
+				paldea: 'cabo-poco',
+				orre: 'phenac-city',
+				kitakami: 'mossui-town',
+				blueberry: 'central-plaza'
+			} as Record<string, string>
+		)[region] ?? ''
+	);
+}
+
+export type Milestone = {
+	key: string;
+	title: string;
+	category: string;
+	stage: 'story' | 'postgame' | 'collection';
+};
+export function milestonesFor(slug: string, region: string): Milestone[] {
+	const rows: Milestone[] = [];
+	const add = (title: string, category: string, stage: Milestone['stage'] = 'story') =>
+		rows.push({
+			key: `${category}:${title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`,
+			title,
+			category,
+			stage
+		});
+	const badges: Record<string, string[]> = {
+		kanto: [
+			'Boulder · Brock',
+			'Cascade · Misty',
+			'Thunder · Lt. Surge',
+			'Rainbow · Erika',
+			'Soul · Koga',
+			'Marsh · Sabrina',
+			'Volcano · Blaine',
+			'Earth · Giovanni'
+		],
+		johto: [
+			'Zephyr · Falkner',
+			'Hive · Bugsy',
+			'Plain · Whitney',
+			'Fog · Morty',
+			'Storm · Chuck',
+			'Mineral · Jasmine',
+			'Glacier · Pryce',
+			'Rising · Clair'
+		],
+		hoenn: [
+			'Stone · Roxanne',
+			'Knuckle · Brawly',
+			'Dynamo · Wattson',
+			'Heat · Flannery',
+			'Balance · Norman',
+			'Feather · Winona',
+			'Mind · Tate & Liza',
+			`Rain · ${slug === 'emerald' ? 'Juan' : 'Wallace'}`
+		],
+		sinnoh:
+			slug === 'platinum'
+				? [
+						'Coal · Roark',
+						'Forest · Gardenia',
+						'Relic · Fantina',
+						'Cobble · Maylene',
+						'Fen · Crasher Wake',
+						'Mine · Byron',
+						'Icicle · Candice',
+						'Beacon · Volkner'
+					]
+				: [
+						'Coal · Roark',
+						'Forest · Gardenia',
+						'Cobble · Maylene',
+						'Fen · Crasher Wake',
+						'Relic · Fantina',
+						'Mine · Byron',
+						'Icicle · Candice',
+						'Beacon · Volkner'
+					],
+		unova: slug.endsWith('-2')
+			? [
+					'Basic · Cheren',
+					'Toxic · Roxie',
+					'Insect · Burgh',
+					'Bolt · Elesa',
+					'Quake · Clay',
+					'Jet · Skyla',
+					'Legend · Drayden',
+					'Wave · Marlon'
+				]
+			: [
+					'Trio · Cilan / Chili / Cress',
+					'Basic · Lenora',
+					'Insect · Burgh',
+					'Bolt · Elesa',
+					'Quake · Clay',
+					'Jet · Skyla',
+					'Freeze · Brycen',
+					`Legend · ${slug === 'white' ? 'Iris' : 'Drayden'}`
+				],
+		kalos: [
+			'Bug · Viola',
+			'Cliff · Grant',
+			'Rumble · Korrina',
+			'Plant · Ramos',
+			'Voltage · Clemont',
+			'Fairy · Valerie',
+			'Psychic · Olympia',
+			'Iceberg · Wulfric'
+		],
+		galar: [
+			'Grass · Milo',
+			'Water · Nessa',
+			'Fire · Kabu',
+			slug === 'shield' ? 'Ghost · Allister' : 'Fighting · Bea',
+			'Fairy · Opal',
+			slug === 'shield' ? 'Ice · Melony' : 'Rock · Gordie',
+			'Dark · Piers',
+			'Dragon · Raihan'
+		],
+		paldea: [
+			'Bug · Katy',
+			'Grass · Brassius',
+			'Electric · Iono',
+			'Water · Kofu',
+			'Normal · Larry',
+			'Ghost · Ryme',
+			'Psychic · Tulip',
+			'Ice · Grusha'
+		]
+	};
+	if (
+		/legends-za|mega-dimension|champions|isle-of-armor|crown-tundra|teal-mask|indigo-disk/.test(
+			slug
+		)
+	) {
+		if (slug.includes('isle-of-armor'))
+			['Master dojo trials', 'Tower of Darkness / Waters', 'Final battle with Mustard'].forEach(
+				(t) => add(t, 'boss')
+			);
+		if (slug.includes('crown-tundra'))
+			[
+				'Calyrex expedition',
+				'Legendary giants expedition',
+				'Legendary birds expedition',
+				'Galarian Star Tournament'
+			].forEach((t) => add(t, 'event'));
+		if (slug.includes('teal-mask'))
+			['Festival of Masks', 'Loyal Three battles', 'Ogerpon', 'Final battle with Kieran'].forEach(
+				(t) => add(t, 'boss')
+			);
+		if (slug.includes('indigo-disk'))
+			['Crispin', 'Amarys', 'Lacey', 'Drayton', 'Kieran', 'Terapagos'].forEach((t) =>
+				add(t, 'boss')
+			);
+	} else {
+		(badges[region] ?? []).forEach((t) => add(t, 'badge'));
+		const leagues: Record<string, string[]> = {
+			kanto: ['Lorelei', 'Bruno', 'Agatha', 'Lance'],
+			johto: ['Will', 'Koga', 'Bruno', 'Karen'],
+			hoenn: ['Sidney', 'Phoebe', 'Glacia', 'Drake'],
+			sinnoh: ['Aaron', 'Bertha', 'Flint', 'Lucian'],
+			unova: ['Shauntal', 'Grimsley', 'Caitlin', 'Marshal'],
+			kalos: ['Malva', 'Siebold', 'Wikstrom', 'Drasna'],
+			alola: [slug.startsWith('ultra-') ? 'Molayne' : 'Hala', 'Olivia', 'Acerola', 'Kahili'],
+			paldea: ['Rika', 'Poppy', 'Larry', 'Hassel']
+		};
+		(leagues[region] ?? []).forEach((t) => add(`Elite Four · ${t}`, 'league'));
+		const champion: Record<string, string> = {
+			kanto: slug.startsWith('lets-go') ? 'Trace' : 'Blue',
+			johto: 'Lance',
+			hoenn: slug === 'emerald' ? 'Wallace' : 'Steven',
+			sinnoh: 'Cynthia',
+			unova: slug.endsWith('-2') ? 'Iris' : 'Alder',
+			kalos: 'Diantha',
+			galar: 'Leon',
+			paldea: 'Geeta'
+		};
+		if (champion[region])
+			add(
+				`Champion · ${champion[region]}`,
+				'league',
+				region === 'unova' && !slug.endsWith('-2') ? 'postgame' : 'story'
+			);
+		if (region === 'sinnoh') {
+			[
+				'Commander Mars · Valley Windworks',
+				'Commander Jupiter · Eterna',
+				'Team Galactic · Lake battles',
+				'Cyrus · Galactic HQ',
+				slug === 'platinum' ? 'Cyrus · Distortion World' : 'Cyrus · Spear Pillar'
+			].forEach((t) => add(t, 'boss'));
+			['National Pokédex', 'Battle Zone', 'Stark Mountain · Heatran', 'Battle Tower'].forEach((t) =>
+				add(t, 'event', 'postgame')
+			);
+		}
+		if (region === 'johto') {
+			['Brock', 'Misty', 'Lt. Surge', 'Erika', 'Janine', 'Sabrina', 'Blaine', 'Blue'].forEach((t) =>
+				add(`Kanto badge · ${t}`, 'badge', 'postgame')
+			);
+			add('Red · Mt. Silver', 'boss', 'postgame');
+		}
+		if (region === 'kanto') {
+			add('Team Rocket · Silph Co.', 'boss');
+			add('Cerulean Cave · Mewtwo', 'event', 'postgame');
+		}
+		if (region === 'hoenn') {
+			add('Team Aqua / Magma finale', 'boss');
+			add('Legendary weather Pokémon', 'event');
+			if (['omega-ruby', 'alpha-sapphire'].includes(slug))
+				add('Delta Episode', 'event', 'postgame');
+		}
+		if (region === 'unova') ['N', 'Ghetsis'].forEach((t) => add(`Team Plasma · ${t}`, 'boss'));
+		if (region === 'kalos') add('Lysandre · Team Flare finale', 'boss');
+		if (region === 'alola') {
+			[
+				'Verdant Cavern',
+				'Brooklet Hill',
+				'Wela Volcano Park',
+				'Lush Jungle',
+				'Hokulani Observatory',
+				'Thrifty Megamart',
+				'Vast Poni Canyon'
+			].forEach((t) => add(`Trial · ${t}`, 'badge'));
+			['Hala', 'Olivia', 'Nanu', 'Hapu'].forEach((t) => add(`Grand trial · ${t}`, 'boss'));
+			add(slug.startsWith('ultra-') ? 'Ultra Necrozma' : 'Lusamine', 'boss');
+			add(slug.startsWith('ultra-') ? 'Title match · Hau' : 'Title match · Kukui', 'league');
+		}
+		if (region === 'galar')
+			['Champion Cup semifinals', 'Champion Cup finals', 'Rose', 'Eternatus'].forEach((t) =>
+				add(t, 'boss')
+			);
+		if (region === 'hisui') {
+			['Kleavor', 'Lilligant', 'Arcanine', 'Electrode', 'Avalugg'].forEach((t) =>
+				add(`Noble · ${t}`, 'boss')
+			);
+			add('Dialga & Palkia', 'boss');
+			add('Volo & Giratina', 'boss', 'postgame');
+			add('Arceus', 'boss', 'postgame');
+		}
+		if (region === 'paldea') {
+			[
+				'Klawf',
+				'Bombirdier',
+				'Orthworm',
+				'Great Tusk / Iron Treads',
+				'Dondozo & Tatsugiri'
+			].forEach((t) => add(`Titan · ${t}`, 'boss'));
+			['Giacomo', 'Mela', 'Atticus', 'Ortega', 'Eri', 'Cassiopeia'].forEach((t) =>
+				add(`Team Star · ${t}`, 'boss')
+			);
+			['Arven', 'Nemona', 'The Way Home'].forEach((t) => add(t, 'boss'));
+			add('Academy Ace Tournament', 'event', 'postgame');
+		}
+		if (region === 'orre')
+			(slug === 'xd'
+				? ['Lovrina', 'Snattle', 'Gorigan', 'Greevil']
+				: ['Miror B.', 'Dakim', 'Venus', 'Ein', 'Nascour', 'Evice']
+			).forEach((t) => add(`Cipher · ${t}`, 'boss'));
+	}
+	add('Finish my in-game collection', 'collection', 'postgame');
+	['Trade evolutions', 'Version exclusives', 'Transfers from other games', 'Event Pokémon'].forEach(
+		(t) => add(t, 'collection', 'collection')
+	);
+	return rows;
+}

src/lib/game-tracker/progress.test.ts

@@ -0,0 +1,108 @@
+import { describe, it, expect } from 'vitest';
+import { combinedProgress, fraction, challengeProgress, pokemonProgress } from './progress';
+import { milestonesFor } from './pokemon-world';
+
+const input: Parameters<typeof pokemonProgress>[0] = {
+	games: [{ id: 1, name: 'Platinum', slug: 'platinum', regions: ['sinnoh'] }],
+	entries: [
+		{ id: 1, gameId: 1, pokemonId: 387, availability: 'catchable' },
+		{ id: 2, gameId: 1, pokemonId: 399, availability: 'catchable' },
+		{ id: 3, gameId: 1, pokemonId: 1, availability: 'transfer_only' },
+		{ id: 4, gameId: 1, pokemonId: 99, availability: 'unknown' },
+		{ id: 5, gameId: 2, pokemonId: 387, availability: 'catchable' }
+	],
+	caughtIds: [],
+	seen: [],
+	journeys: [],
+	milestones: [],
+	dex: [
+		{ gameId: 1, pokemonId: 387 },
+		{ gameId: 1, pokemonId: 399 },
+		{ gameId: 1, pokemonId: 387 }
+	],
+	speciesTotal: 1025
+};
+
+describe('tracker completion calculations', () => {
+	it('balances categories, omits empty catalogs and clamps fractions', () => {
+		expect(
+			fraction(
+				combinedProgress([
+					{ value: 1, total: 2 },
+					{ value: 100, total: 100 },
+					{ value: 0, total: 0 }
+				])
+			)
+		).toBe(0.75);
+		expect(fraction({ value: 3, total: 2 })).toBe(1);
+		expect(fraction({ value: 0, total: 0 })).toBe(0);
+		expect(fraction(combinedProgress([]))).toBe(0);
+	});
+	it('credits partial challenge targets and explicit unlocks without overcounting', () => {
+		const result = challengeProgress(
+			[
+				{ id: 1, target: 100 },
+				{ id: 2, target: null },
+				{ id: 3, target: 5 }
+			],
+			[
+				{ challengeId: 1, current: 25, done: false },
+				{ challengeId: 2, current: 0, done: true },
+				{ challengeId: 3, current: 99, done: false }
+			]
+		);
+		expect(result).toEqual({ value: 2.25, total: 3 });
+	});
+	it('counts a species once globally, once per game, and caught implies seen', () => {
+		const result = pokemonProgress({
+			...input,
+			games: [...input.games, { id: 2, name: 'Diamond', slug: 'diamond', regions: ['sinnoh'] }],
+			caughtIds: [1, 5],
+			seen: [
+				{ gameId: 1, pokemonId: 387 },
+				{ gameId: 1, pokemonId: 399 }
+			]
+		});
+		expect(result.caught.value).toBe(1);
+		expect(result.seen.value).toBe(2);
+		expect(result.collection.value).toBe(2);
+		expect(result.games[0].regional).toEqual({ value: 1, total: 2 });
+	});
+	it('includes confirmed trade/transfer targets, excludes unknowns and scopes selected games', () => {
+		const result = pokemonProgress({
+			...input,
+			caughtIds: [1, 5],
+			seen: [{ gameId: 2, pokemonId: 999 }]
+		});
+		expect(result.games[0].collection).toEqual({ value: 1, total: 3 });
+		expect(result.games[0].inGame).toEqual({ value: 1, total: 2 });
+		expect(result.seen.value).toBe(1);
+		expect(pokemonProgress({ ...input, games: [] }).completed).toEqual({ value: 0, total: 0 });
+	});
+	it('allows real catches to confirm unknown availability', () => {
+		expect(pokemonProgress({ ...input, caughtIds: [4] }).games[0].collection).toEqual({
+			value: 1,
+			total: 4
+		});
+	});
+	it('credits story completion without pretending all collection tasks are complete', () => {
+		const before = pokemonProgress(input);
+		const after = pokemonProgress({ ...input, journeys: [{ gameId: 1, completed: true }] });
+		expect(after.completed.value).toBe(1);
+		expect(fraction(after.games[0].overall)).toBeGreaterThan(fraction(before.games[0].overall));
+		expect(fraction(after.games[0].overall)).toBeLessThan(1);
+		expect(after.games[0].badges.value).toBe(0);
+	});
+	it('infers a cleared game from all default story milestones, not arbitrary custom ones', () => {
+		const milestones = milestonesFor('platinum', 'sinnoh')
+			.filter((m) => m.stage === 'story')
+			.map((m) => ({ ...m, gameId: 1, done: true }));
+		expect(pokemonProgress({ ...input, milestones }).completed.value).toBe(1);
+		expect(
+			pokemonProgress({
+				...input,
+				milestones: [{ gameId: 1, key: 'custom:win', stage: 'story', category: 'boss', done: true }]
+			}).completed.value
+		).toBe(0);
+	});
+});

src/lib/game-tracker/progress.ts

@@ -0,0 +1,125 @@
+import { obtainableAvailability, type Availability } from '$lib/availability';
+import { gameRegions, milestonesFor } from './pokemon-world';
+
+export type ProgressCount = { value: number; total: number };
+export const fraction = ({ value, total }: ProgressCount) =>
+	total > 0 ? Math.max(0, Math.min(1, value / total)) : 0;
+export function combinedProgress(parts: ProgressCount[]): ProgressCount {
+	const available = parts.filter((p) => p.total > 0);
+	return { value: available.reduce((n, p) => n + fraction(p), 0), total: available.length };
+}
+export function sumProgress(parts: ProgressCount[]): ProgressCount {
+	return parts.reduce((a, p) => ({ value: a.value + p.value, total: a.total + p.total }), {
+		value: 0,
+		total: 0
+	});
+}
+export function challengeProgress(
+	challenges: { id: number; target: number | null }[],
+	progress: { challengeId: number; current: number; done: boolean }[]
+) {
+	const saved = new Map(progress.map((p) => [p.challengeId, p]));
+	return {
+		value: challenges.reduce((n, c) => {
+			const p = saved.get(c.id);
+			return n + (p?.done ? 1 : fraction({ value: p?.current ?? 0, total: c.target ?? 0 }));
+		}, 0),
+		total: challenges.length
+	};
+}
+
+export function pokemonProgress(input: {
+	games: { id: number; name: string; slug: string | null; regions: string[] }[];
+	entries: { id: number; gameId: number; pokemonId: number; availability: Availability }[];
+	caughtIds: number[];
+	seen: { gameId: number; pokemonId: number }[];
+	journeys: { gameId: number; completed: boolean }[];
+	milestones: { gameId: number; key: string; stage: string; category: string; done: boolean }[];
+	dex: { gameId: number; pokemonId: number }[];
+	speciesTotal: number;
+}) {
+	const caught = new Set(input.caughtIds);
+	const entries = Map.groupBy(input.entries, (e) => e.gameId);
+	const sightings = Map.groupBy(input.seen, (e) => e.gameId);
+	const milestones = Map.groupBy(input.milestones, (m) => m.gameId);
+	const dexes = Map.groupBy(input.dex, (d) => d.gameId);
+	const allCaught = new Set<number>();
+	const allSeen = new Set<number>();
+	const games = input.games.map((game) => {
+		const list = entries.get(game.id) ?? [];
+		const caughtSpecies = new Set(list.filter((e) => caught.has(e.id)).map((e) => e.pokemonId));
+		const seenSpecies = new Set([
+			...caughtSpecies,
+			...(sightings.get(game.id) ?? []).map((s) => s.pokemonId)
+		]);
+		for (const id of caughtSpecies) allCaught.add(id);
+		for (const id of seenSpecies) allSeen.add(id);
+		const collect = (ids: number[], source = caughtSpecies): ProgressCount => {
+			const unique = new Set(ids);
+			return { value: [...unique].filter((id) => source.has(id)).length, total: unique.size };
+		};
+		const collection = collect(
+			list
+				.filter((e) => e.availability !== 'unknown' || caughtSpecies.has(e.pokemonId))
+				.map((e) => e.pokemonId)
+		);
+		const inGame = collect(
+			list.filter((e) => obtainableAvailability.has(e.availability)).map((e) => e.pokemonId)
+		);
+		const seen = collect(
+			list.map((e) => e.pokemonId),
+			seenSpecies
+		);
+		const regionalIds = (dexes.get(game.id) ?? []).map((d) => d.pokemonId);
+		const regional = collect(regionalIds);
+		const regionalSeen = collect(regionalIds, seenSpecies);
+		const saved = new Map((milestones.get(game.id) ?? []).map((m) => [m.key, m]));
+		const defaults = milestonesFor(
+			game.slug ?? '',
+			gameRegions(game.slug ?? '', game.regions)[0] ?? ''
+		);
+		const count = (rows: { key: string }[]): ProgressCount => ({
+			value: rows.filter((m) => saved.get(m.key)?.done).length,
+			total: rows.length
+		});
+		const story = count(defaults.filter((m) => m.stage === 'story'));
+		const postgame = count(defaults.filter((m) => m.stage === 'postgame'));
+		const transfers = count(defaults.filter((m) => m.stage === 'collection'));
+		const badges = count(defaults.filter((m) => m.category === 'badge'));
+		const league = count(defaults.filter((m) => m.category === 'league'));
+		const bosses = count(defaults.filter((m) => m.category === 'boss'));
+		const custom = count([...saved.values()].filter((m) => m.key.startsWith('custom:')));
+		const completed =
+			input.journeys.some((j) => j.gameId === game.id && j.completed) ||
+			(story.total > 0 && story.value === story.total);
+		const adventure = { value: story.value + Number(completed), total: story.total + 1 };
+		return {
+			id: game.id,
+			name: game.name,
+			slug: game.slug,
+			collection,
+			inGame,
+			seen,
+			regional,
+			regionalSeen,
+			story,
+			adventure,
+			postgame,
+			transfers,
+			badges,
+			league,
+			bosses,
+			custom,
+			completed,
+			overall: combinedProgress([collection, adventure, postgame, transfers])
+		};
+	});
+	return {
+		games,
+		caught: { value: allCaught.size, total: input.speciesTotal },
+		seen: { value: allSeen.size, total: input.speciesTotal },
+		completed: { value: games.filter((g) => g.completed).length, total: games.length },
+		collection: sumProgress(games.map((g) => g.collection)),
+		overall: combinedProgress(games.map((g) => g.overall))
+	};
+}

src/lib/game-tracker/rank-limits.ts

@@ -0,0 +1,43 @@
+import type { MasteryRules } from './mastery';
+
+export type RankLimits = {
+	maxLevel: number | null;
+	maxPrestige: number;
+	canPrestigeOnlyAtMaxLevel: boolean;
+	rankable: boolean;
+};
+
+const capsFor = (rules: MasteryRules) => rules.rankCaps;
+
+export function playerRankLimits(rules: MasteryRules): RankLimits {
+	const caps = capsFor(rules)?.player;
+	return {
+		maxLevel: caps?.level ?? null,
+		maxPrestige: caps?.prestige ?? 1000,
+		canPrestigeOnlyAtMaxLevel: false,
+		rankable: true
+	};
+}
+
+export function weaponRankLimits(
+	rules: MasteryRules,
+	weapon: Pick<{ category: string; name: string }, 'category' | 'name'>
+): RankLimits {
+	const caps = capsFor(rules);
+	if (!caps) {
+		return {
+			maxLevel: null,
+			maxPrestige: 1000,
+			canPrestigeOnlyAtMaxLevel: false,
+			rankable: true
+		};
+	}
+	const maxLevel =
+		caps.weaponLevelOverrides?.[weapon.name] ?? caps.weaponLevelsByClass[weapon.category] ?? null;
+	return {
+		maxLevel,
+		maxPrestige: caps.weaponPrestige,
+		canPrestigeOnlyAtMaxLevel: true,
+		rankable: maxLevel !== null
+	};
+}

src/lib/seo.ts

@@ -39,12 +39,17 @@ const publicPages: Record<string, { title: string; description: string }> = {
 	'/projects/game-tracker': {
 		title: 'Game Tracker',
 		description:
-			'Completionist progress for every Pokémon in every game and Call of Duty achievements, weapons and camos.'
+			'Pokémon adventures and collections, Call of Duty ranks and unlocks, and osu! scores and training.'
 	},
 	'/projects/game-tracker/pokemon': {
-		title: 'Catchemall',
+		title: 'Pokémon journal',
 		description:
-			'Track which Pokémon you have caught across 53 games, with where to find them and how to evolve or breed them.'
+			'Explore Pokémon encounters and regional Pokédexes, record catches and teams, and track badges across your playthroughs.'
+	},
+	'/projects/game-tracker/osu': {
+		title: 'osu! training',
+		description:
+			'Keep memorable scores, beatmap goals and a training journal for speed, stamina and consistency.'
 	},
 	'/projects/game-tracker/pokemon/locations': {
 		title: 'Pokémon locations',

src/lib/server/db/schema/index.ts

@@ -5,6 +5,7 @@ export * from './blog';
 export * from './progress';
 export * from './catch-em-all';
 export * from './game-tracker';
+export * from './tracker-journal';
 export * from './animaldex';
 export * from './lists';
 export * from './money-tracker';

src/lib/server/db/schema/tracker-journal.ts

@@ -0,0 +1,299 @@
+import {
+	boolean,
+	check,
+	date,
+	index,
+	integer,
+	jsonb,
+	pgTable,
+	text,
+	unique
+} from 'drizzle-orm/pg-core';
+import { sql } from 'drizzle-orm';
+import { user } from './auth';
+import { games, pokemon } from './catch-em-all';
+import { trackerGames, trackerItems } from './game-tracker';
+import { id, timestamps } from './helpers';
+
+export const pokemonResearch = pgTable('pokemon_research', {
+	pokemonId: integer('pokemon_id')
+		.primaryKey()
+		.references(() => pokemon.id, { onDelete: 'cascade' }),
+	facts: jsonb('facts')
+		.$type<{
+			height: number;
+			weight: number;
+			baseExperience: number | null;
+			captureRate: number;
+			baseHappiness: number | null;
+			growthRate: string;
+			genderRate: number;
+			hatchCounter: number | null;
+			eggGroups: string[];
+			abilities: { name: string; hidden: boolean }[];
+			evYield: number[];
+		}>()
+		.notNull()
+});
+
+export const pokemonDexNumbers = pgTable(
+	'pokemon_dex_numbers',
+	{
+		id: id(),
+		pokemonId: integer('pokemon_id')
+			.notNull()
+			.references(() => pokemon.id, { onDelete: 'cascade' }),
+		gameId: integer('game_id')
+			.notNull()
+			.references(() => games.id, { onDelete: 'cascade' }),
+		dex: text('dex').notNull(),
+		dexName: text('dex_name').notNull(),
+		number: integer('number').notNull()
+	},
+	(t) => [unique().on(t.pokemonId, t.gameId, t.dex), index().on(t.gameId)]
+);
+
+export const pokemonMoves = pgTable('pokemon_moves', {
+	id: integer('id').primaryKey(),
+	name: text('name').notNull(),
+	type: text('type').notNull(),
+	category: text('category').notNull(),
+	power: integer('power'),
+	accuracy: integer('accuracy'),
+	pp: integer('pp'),
+	priority: integer('priority').notNull(),
+	target: text('target').notNull()
+});
+
+export const pokemonLearnsets = pgTable(
+	'pokemon_learnsets',
+	{
+		id: id(),
+		pokemonId: integer('pokemon_id')
+			.notNull()
+			.references(() => pokemon.id, { onDelete: 'cascade' }),
+		versionGroup: integer('version_group').notNull(),
+		moves: jsonb('moves').$type<[moveId: number, method: string, level: number][]>().notNull()
+	},
+	(t) => [unique().on(t.pokemonId, t.versionGroup)]
+);
+
+export const pokemonGameResearch = pgTable('pokemon_game_research', {
+	gameId: integer('game_id')
+		.primaryKey()
+		.references(() => games.id, { onDelete: 'cascade' }),
+	versionGroup: integer('version_group').notNull(),
+	regions: text('regions').array().notNull()
+});
+
+export const pokemonJourneys = pgTable(
+	'pokemon_journeys',
+	{
+		id: id(),
+		userId: text('user_id')
+			.notNull()
+			.references(() => user.id, { onDelete: 'cascade' }),
+		gameId: integer('game_id')
+			.notNull()
+			.references(() => games.id, { onDelete: 'cascade' }),
+		stage: text('stage', { enum: ['story', 'postgame', 'collection'] })
+			.notNull()
+			.default('story'),
+		location: text('location'),
+		completed: boolean('completed').notNull().default(false),
+		...timestamps
+	},
+	(t) => [unique().on(t.userId, t.gameId)]
+);
+
+export const pokemonSeen = pgTable(
+	'pokemon_seen',
+	{
+		id: id(),
+		userId: text('user_id')
+			.notNull()
+			.references(() => user.id, { onDelete: 'cascade' }),
+		gameId: integer('game_id')
+			.notNull()
+			.references(() => games.id, { onDelete: 'cascade' }),
+		pokemonId: integer('pokemon_id')
+			.notNull()
+			.references(() => pokemon.id, { onDelete: 'cascade' }),
+		...timestamps
+	},
+	(t) => [unique().on(t.userId, t.gameId, t.pokemonId), index().on(t.userId)]
+);
+
+export const pokemonCatches = pgTable(
+	'pokemon_catches',
+	{
+		id: id(),
+		userId: text('user_id')
+			.notNull()
+			.references(() => user.id, { onDelete: 'cascade' }),
+		gameId: integer('game_id')
+			.notNull()
+			.references(() => games.id, { onDelete: 'cascade' }),
+		pokemonId: integer('pokemon_id')
+			.notNull()
+			.references(() => pokemon.id, { onDelete: 'cascade' }),
+		nickname: text('nickname').notNull().default(''),
+		level: integer('level').notNull().default(1),
+		moves: text('moves').array().notNull().default([]),
+		partySlot: integer('party_slot'),
+		shiny: boolean('shiny').notNull().default(false),
+		nature: text('nature'),
+		ability: text('ability'),
+		ball: text('ball'),
+		location: text('location'),
+		obtained: text('obtained').notNull().default('caught'),
+		stage: text('stage', { enum: ['story', 'postgame', 'collection'] })
+			.notNull()
+			.default('story'),
+		notes: text('notes').notNull().default(''),
+		caughtOn: date('caught_on'),
+		...timestamps
+	},
+	(t) => [
+		index().on(t.userId, t.gameId, t.pokemonId),
+		unique().on(t.userId, t.gameId, t.partySlot),
+		check('pokemon_catch_level', sql`${t.level} between 1 and 100`),
+		check('pokemon_party_slot', sql`${t.partySlot} between 1 and 6`),
+		check('pokemon_four_moves', sql`cardinality(${t.moves}) <= 4`)
+	]
+);
+
+export const pokemonMilestones = pgTable(
+	'pokemon_milestones',
+	{
+		id: id(),
+		userId: text('user_id')
+			.notNull()
+			.references(() => user.id, { onDelete: 'cascade' }),
+		gameId: integer('game_id')
+			.notNull()
+			.references(() => games.id, { onDelete: 'cascade' }),
+		key: text('key').notNull(),
+		title: text('title').notNull(),
+		category: text('category').notNull(),
+		stage: text('stage').notNull().default('story'),
+		done: boolean('done').notNull().default(false),
+		notes: text('notes').notNull().default(''),
+		...timestamps
+	},
+	(t) => [unique().on(t.userId, t.gameId, t.key)]
+);
+
+export const trackerRanks = pgTable(
+	'tracker_ranks',
+	{
+		id: id(),
+		userId: text('user_id')
+			.notNull()
+			.references(() => user.id, { onDelete: 'cascade' }),
+		gameId: integer('game_id')
+			.notNull()
+			.references(() => trackerGames.id, { onDelete: 'cascade' }),
+		level: integer('level').notNull().default(1),
+		prestige: integer('prestige').notNull().default(0),
+		...timestamps
+	},
+	(t) => [
+		unique().on(t.userId, t.gameId),
+		check(
+			'tracker_rank_range',
+			sql`${t.level} between 1 and 10000 and ${t.prestige} between 0 and 1000`
+		)
+	]
+);
+
+export const trackerWeaponRanks = pgTable(
+	'tracker_weapon_ranks',
+	{
+		id: id(),
+		userId: text('user_id')
+			.notNull()
+			.references(() => user.id, { onDelete: 'cascade' }),
+		itemId: integer('item_id')
+			.notNull()
+			.references(() => trackerItems.id, { onDelete: 'cascade' }),
+		level: integer('level').notNull().default(1),
+		prestige: integer('prestige').notNull().default(0),
+		...timestamps
+	},
+	(t) => [
+		unique().on(t.userId, t.itemId),
+		check(
+			'tracker_weapon_rank_range',
+			sql`${t.level} between 1 and 10000 and ${t.prestige} between 0 and 1000`
+		)
+	]
+);
+
+export const trackerChallenges = pgTable(
+	'tracker_challenges',
+	{
+		id: id(),
+		gameId: integer('game_id')
+			.notNull()
+			.references(() => trackerGames.id, { onDelete: 'cascade' }),
+		key: text('key').notNull(),
+		name: text('name').notNull(),
+		category: text('category').notNull(),
+		requirement: text('requirement').notNull(),
+		reward: text('reward'),
+		icon: text('icon'),
+		target: integer('target'),
+		sourceUrl: text('source_url').notNull()
+	},
+	(t) => [unique().on(t.gameId, t.key)]
+);
+
+export const trackerChallengeProgress = pgTable(
+	'tracker_challenge_progress',
+	{
+		id: id(),
+		userId: text('user_id')
+			.notNull()
+			.references(() => user.id, { onDelete: 'cascade' }),
+		challengeId: integer('challenge_id')
+			.notNull()
+			.references(() => trackerChallenges.id, { onDelete: 'cascade' }),
+		current: integer('current').notNull().default(0),
+		done: boolean('done').notNull().default(false),
+		...timestamps
+	},
+	(t) => [unique().on(t.userId, t.challengeId)]
+);
+
+export const osuEntries = pgTable(
+	'osu_entries',
+	{
+		id: id(),
+		userId: text('user_id')
+			.notNull()
+			.references(() => user.id, { onDelete: 'cascade' }),
+		kind: text('kind', { enum: ['score', 'goal', 'training'] }).notNull(),
+		title: text('title').notNull(),
+		mode: text('mode').notNull().default('osu'),
+		beatmapUrl: text('beatmap_url'),
+		scoreUrl: text('score_url'),
+		goal: text('goal').notNull().default('pass'),
+		skill: text('skill').notNull().default('stamina'),
+		bpm: integer('bpm'),
+		duration: integer('duration'),
+		accuracy: text('accuracy'),
+		combo: integer('combo'),
+		misses: integer('misses'),
+		pp: text('pp'),
+		mods: text('mods').notNull().default('NM'),
+		rate: text('rate').notNull().default('1.00'),
+		achieved: boolean('achieved').notNull().default(false),
+		playedOn: date('played_on').notNull(),
+		notes: text('notes').notNull().default(''),
+		...timestamps
+	},
+	(t) => [index().on(t.userId, t.kind)]
+);
+
+export type PokemonCatch = typeof pokemonCatches.$inferSelect;

src/lib/server/pokemon-detail.ts

@@ -1,5 +1,6 @@
 import { error } from '@sveltejs/kit';
 import { and, asc, eq, inArray } from 'drizzle-orm';
+import { pokemonResearch, pokemonGameResearch, pokemonLearnsets, pokemonMoves } from './db/schema';
 import { db } from '$lib/server/db';
 import {
 	games,
@@ -104,8 +105,50 @@ export async function pokemonDetail(number: number, gameId: number | null) {
 				)
 		: [];
 
+	const [research] = await db
+		.select()
+		.from(pokemonResearch)
+		.where(eq(pokemonResearch.pokemonId, species.id));
+	const [gameResearch] = gameId
+		? await db.select().from(pokemonGameResearch).where(eq(pokemonGameResearch.gameId, gameId))
+		: [];
+	const [learnset] = gameResearch
+		? await db
+				.select()
+				.from(pokemonLearnsets)
+				.where(
+					and(
+						eq(pokemonLearnsets.pokemonId, species.id),
+						eq(pokemonLearnsets.versionGroup, gameResearch.versionGroup)
+					)
+				)
+		: [];
+	const moveIds = [...new Set((learnset?.moves ?? []).map((m) => m[0]))];
+	const moves = moveIds.length
+		? await db.select().from(pokemonMoves).where(inArray(pokemonMoves.id, moveIds))
+		: [];
+	const moveMap = new Map(moves.map((m) => [m.id, m]));
+
 	const numbers = new Map(members.map((member) => [member.id, member.number]));
 	return {
+		facts: research?.facts ?? null,
+		stats: [
+			{ name: 'HP', value: species.hp },
+			{ name: 'Attack', value: species.attack },
+			{ name: 'Defense', value: species.defense },
+			{ name: 'Sp. Atk', value: species.specialAttack },
+			{ name: 'Sp. Def', value: species.specialDefense },
+			{ name: 'Speed', value: species.speed }
+		],
+		learnset: (learnset?.moves ?? [])
+			.flatMap(([id, method, level]) => {
+				const move = moveMap.get(id);
+				return move ? [{ ...move, method, level }] : [];
+			})
+			.sort(
+				(a, b) =>
+					a.method.localeCompare(b.method) || a.level - b.level || a.name.localeCompare(b.name)
+			),
 		pokemon: {
 			number: species.number,
 			name: species.name,

src/lib/server/pokemon-journal.ts

@@ -0,0 +1,278 @@
+import { and, asc, eq, sql } from 'drizzle-orm';
+import { fail } from '@sveltejs/kit';
+import type { Actions } from '@sveltejs/kit';
+import { db } from './db';
+import {
+	games,
+	pokemon,
+	pokemonCatches,
+	pokemonJourneys,
+	pokemonMilestones,
+	pokemonSeen,
+	pokemonGameEntries,
+	userEntries
+} from './db/schema';
+import { boundedInteger, isStage, obtainedMethods, validDate } from '$lib/game-tracker/journal';
+
+// Serialize mutations for one user's game, including competing party assignments.
+async function lockGame(
+	tx: Parameters<Parameters<typeof db.transaction>[0]>[0],
+	userId: string,
+	gameId: number
+) {
+	await tx.execute(sql`select pg_advisory_xact_lock(hashtext(${userId}), ${gameId})`);
+}
+
+export const pokemonJournalActions = {
+	setSeen: async ({ request, locals }) => {
+		if (!locals.user) return fail(401, { message: 'Sign in to record a sighting.' });
+		const form = await request.formData();
+		const gameId = boundedInteger(form.get('gameId'), 1, 2147483647);
+		const pokemonId = boundedInteger(form.get('pokemonId'), 1, 2147483647);
+		const seen = form.get('seen');
+		if (!gameId || !pokemonId || !['on', 'off'].includes(String(seen)))
+			return fail(400, { message: 'Invalid sighting.' });
+		const [entry] = await db
+			.select({ id: pokemonGameEntries.id })
+			.from(pokemonGameEntries)
+			.where(
+				and(eq(pokemonGameEntries.gameId, gameId), eq(pokemonGameEntries.pokemonId, pokemonId))
+			);
+		if (!entry) return fail(404, { message: 'Species not found in this game.' });
+		return db.transaction(async (tx) => {
+			await lockGame(tx, locals.user!.id, gameId);
+			if (seen === 'on')
+				await tx
+					.insert(pokemonSeen)
+					.values({ userId: locals.user!.id, gameId, pokemonId })
+					.onConflictDoNothing();
+			else {
+				const [caught] = await tx
+					.select({ id: userEntries.id })
+					.from(userEntries)
+					.where(
+						and(
+							eq(userEntries.userId, locals.user!.id),
+							eq(userEntries.pokemonGameEntryId, entry.id)
+						)
+					);
+				if (caught) return fail(400, { message: 'Caught Pokémon also count as seen.' });
+				await tx
+					.delete(pokemonSeen)
+					.where(
+						and(
+							eq(pokemonSeen.userId, locals.user!.id),
+							eq(pokemonSeen.gameId, gameId),
+							eq(pokemonSeen.pokemonId, pokemonId)
+						)
+					);
+			}
+			return { saved: true };
+		});
+	},
+	setCompleted: async ({ request, locals }) => {
+		if (!locals.user) return fail(401, { message: 'Sign in to record a completed game.' });
+		const form = await request.formData();
+		const gameId = boundedInteger(form.get('gameId'), 1, 2147483647);
+		if (!gameId || !['on', 'off'].includes(String(form.get('completed'))))
+			return fail(400, { message: 'Invalid completion state.' });
+		if (!(await db.select({ id: games.id }).from(games).where(eq(games.id, gameId))).length)
+			return fail(404, { message: 'Game not found.' });
+		const completed = form.get('completed') === 'on';
+		await db
+			.insert(pokemonJourneys)
+			.values({ userId: locals.user.id, gameId, completed })
+			.onConflictDoUpdate({
+				target: [pokemonJourneys.userId, pokemonJourneys.gameId],
+				set: { completed, updatedAt: new Date() }
+			});
+		return { saved: true };
+	},
+	saveCatch: async ({ request, locals }) => {
+		if (!locals.user) return fail(401, { message: 'Sign in to register a catch.' });
+		const data = await request.formData();
+		const gameId = boundedInteger(data.get('gameId'), 1, 2147483647);
+		const pokemonId = boundedInteger(data.get('pokemonId'), 1, 2147483647);
+		const id = data.get('id') ? boundedInteger(data.get('id'), 1, 2147483647) : null;
+		const level = boundedInteger(data.get('level'), 1, 100);
+		const partySlot = data.get('partySlot') ? boundedInteger(data.get('partySlot'), 1, 6) : null;
+		const text = (key: string) => String(data.get(key) ?? '').trim();
+		const stage = text('stage');
+		const obtained = text('obtained');
+		const moves = data
+			.getAll('moves')
+			.map((v) => String(v).trim())
+			.filter(Boolean);
+		if (
+			!gameId ||
+			!pokemonId ||
+			!level ||
+			(data.get('id') && !id) ||
+			(data.get('partySlot') && !partySlot) ||
+			!isStage(stage) ||
+			!(obtainedMethods as readonly string[]).includes(obtained) ||
+			moves.length > 4 ||
+			moves.some((m) => m.length > 60) ||
+			new Set(moves).size !== moves.length ||
+			text('nickname').length > 50 ||
+			text('notes').length > 2000 ||
+			['location', 'nature', 'ability', 'ball'].some((k) => text(k).length > 150) ||
+			(text('caughtOn') && !validDate(text('caughtOn')))
+		)
+			return fail(400, {
+				message:
+					'Check the catch details: level 1–100, up to four different moves and a valid date.'
+			});
+		const [entry] = await db
+			.select()
+			.from(pokemonGameEntries)
+			.where(
+				and(eq(pokemonGameEntries.gameId, gameId), eq(pokemonGameEntries.pokemonId, pokemonId))
+			);
+		if (!entry) return fail(400, { message: 'This species has no catalog entry for this game.' });
+		const userId = locals.user.id;
+		const values = {
+			userId,
+			gameId,
+			pokemonId,
+			level,
+			partySlot,
+			stage,
+			obtained,
+			moves,
+			nickname: text('nickname'),
+			notes: text('notes'),
+			shiny: data.get('shiny') === 'on',
+			location: text('location') || null,
+			nature: text('nature') || null,
+			ability: text('ability') || null,
+			ball: text('ball') || null,
+			caughtOn: text('caughtOn') || null
+		};
+		return db.transaction(async (tx) => {
+			await lockGame(tx, userId, gameId);
+			if (id) {
+				const [owned] = await tx
+					.select({ id: pokemonCatches.id })
+					.from(pokemonCatches)
+					.where(
+						and(
+							eq(pokemonCatches.id, id),
+							eq(pokemonCatches.userId, userId),
+							eq(pokemonCatches.gameId, gameId),
+							eq(pokemonCatches.pokemonId, pokemonId)
+						)
+					);
+				if (!owned) return fail(404, { message: 'Catch not found.' });
+			}
+			if (partySlot)
+				await tx
+					.update(pokemonCatches)
+					.set({ partySlot: null })
+					.where(
+						and(
+							eq(pokemonCatches.userId, userId),
+							eq(pokemonCatches.gameId, gameId),
+							eq(pokemonCatches.partySlot, partySlot)
+						)
+					);
+			if (id)
+				await tx
+					.update(pokemonCatches)
+					.set(values)
+					.where(and(eq(pokemonCatches.id, id), eq(pokemonCatches.userId, userId)));
+			else await tx.insert(pokemonCatches).values(values);
+			await tx
+				.insert(userEntries)
+				.values({ userId, pokemonGameEntryId: entry.id })
+				.onConflictDoNothing();
+			await tx.insert(pokemonSeen).values({ userId, gameId, pokemonId }).onConflictDoNothing();
+			return { saved: true };
+		});
+	},
+	deleteCatch: async ({ request, locals }) => {
+		if (!locals.user) return fail(401, { message: 'Sign in to edit your catches.' });
+		const data = await request.formData();
+		const id = boundedInteger(data.get('id'), 1, 2147483647);
+		if (!id) return fail(400, { message: 'Invalid catch.' });
+		const [owned] = await db
+			.select()
+			.from(pokemonCatches)
+			.where(and(eq(pokemonCatches.id, id), eq(pokemonCatches.userId, locals.user.id)));
+		if (!owned) return fail(404, { message: 'Catch not found.' });
+		await db.transaction(async (tx) => {
+			await lockGame(tx, locals.user!.id, owned.gameId);
+			await tx
+				.delete(pokemonCatches)
+				.where(and(eq(pokemonCatches.id, id), eq(pokemonCatches.userId, locals.user!.id)));
+			// The historical caught checkmark deliberately survives deleting a journal record.
+		});
+		return { saved: true };
+	},
+	saveJourney: async ({ request, locals }) => {
+		if (!locals.user) return fail(401, { message: 'Sign in to save your adventure.' });
+		const data = await request.formData();
+		const gameId = boundedInteger(data.get('gameId'), 1, 2147483647);
+		const stage = String(data.get('stage') ?? '');
+		const location = String(data.get('location') ?? '').trim();
+		if (!gameId || !isStage(stage) || location.length > 150)
+			return fail(400, { message: 'Invalid journey.' });
+		if (!(await db.select({ id: games.id }).from(games).where(eq(games.id, gameId))).length)
+			return fail(404, { message: 'Game not found.' });
+		await db
+			.insert(pokemonJourneys)
+			.values({ userId: locals.user.id, gameId, stage, location: location || null })
+			.onConflictDoUpdate({
+				target: [pokemonJourneys.userId, pokemonJourneys.gameId],
+				set: { stage, location: location || null, updatedAt: new Date() }
+			});
+		return { saved: true };
+	},
+	saveMilestone: async ({ request, locals }) => {
+		if (!locals.user) return fail(401, { message: 'Sign in to track milestones.' });
+		const data = await request.formData();
+		const gameId = boundedInteger(data.get('gameId'), 1, 2147483647);
+		const text = (k: string) => String(data.get(k) ?? '').trim();
+		const key = text('key') || `custom:${crypto.randomUUID()}`;
+		if (
+			!gameId ||
+			!isStage(text('stage')) ||
+			!text('title') ||
+			text('title').length > 200 ||
+			text('notes').length > 2000 ||
+			key.length > 200 ||
+			!['badge', 'league', 'boss', 'event', 'collection'].includes(text('category'))
+		)
+			return fail(400, { message: 'Check the milestone details.' });
+		if (!(await db.select({ id: games.id }).from(games).where(eq(games.id, gameId))).length)
+			return fail(404, { message: 'Game not found.' });
+		const values = {
+			userId: locals.user.id,
+			gameId,
+			key,
+			title: text('title'),
+			category: text('category'),
+			stage: text('stage'),
+			notes: text('notes'),
+			done: data.get('done') === 'on'
+		};
+		await db
+			.insert(pokemonMilestones)
+			.values(values)
+			.onConflictDoUpdate({
+				target: [pokemonMilestones.userId, pokemonMilestones.gameId, pokemonMilestones.key],
+				set: values
+			});
+		return { saved: true };
+	}
+} satisfies Actions;
+
+export async function catchesFor(userId: string | undefined, gameId: number) {
+	if (!userId) return [];
+	return db
+		.select({ catch: pokemonCatches, number: pokemon.number, name: pokemon.name })
+		.from(pokemonCatches)
+		.innerJoin(pokemon, eq(pokemon.id, pokemonCatches.pokemonId))
+		.where(and(eq(pokemonCatches.userId, userId), eq(pokemonCatches.gameId, gameId)))
+		.orderBy(asc(pokemon.number), asc(pokemonCatches.id));
+}

src/lib/server/tracker-progress.ts

@@ -0,0 +1,95 @@
+import { eq, count } from 'drizzle-orm';
+import { db } from './db';
+import { pokemonProgress } from '$lib/game-tracker/progress';
+import {
+	games,
+	pokemon,
+	pokemonGameEntries,
+	pokemonGameResearch,
+	pokemonDexNumbers,
+	pokemonJourneys,
+	pokemonMilestones,
+	pokemonSeen,
+	userEntries,
+	userGames,
+	catchEmAllSettings
+} from './db/schema';
+
+export async function loadPokemonProgress(userId?: string) {
+	const [
+		gameRows,
+		entries,
+		research,
+		dex,
+		caught,
+		seen,
+		journeys,
+		milestones,
+		selected,
+		settings,
+		totals
+	] = await Promise.all([
+		db.select({ id: games.id, name: games.name, slug: games.slug }).from(games),
+		db
+			.select({
+				id: pokemonGameEntries.id,
+				gameId: pokemonGameEntries.gameId,
+				pokemonId: pokemonGameEntries.pokemonId,
+				availability: pokemonGameEntries.availability
+			})
+			.from(pokemonGameEntries),
+		db
+			.select({ gameId: pokemonGameResearch.gameId, regions: pokemonGameResearch.regions })
+			.from(pokemonGameResearch),
+		db
+			.select({ gameId: pokemonDexNumbers.gameId, pokemonId: pokemonDexNumbers.pokemonId })
+			.from(pokemonDexNumbers),
+		userId
+			? db
+					.select({ id: userEntries.pokemonGameEntryId })
+					.from(userEntries)
+					.where(eq(userEntries.userId, userId))
+			: [],
+		userId
+			? db
+					.select({ gameId: pokemonSeen.gameId, pokemonId: pokemonSeen.pokemonId })
+					.from(pokemonSeen)
+					.where(eq(pokemonSeen.userId, userId))
+			: [],
+		userId
+			? db
+					.select({ gameId: pokemonJourneys.gameId, completed: pokemonJourneys.completed })
+					.from(pokemonJourneys)
+					.where(eq(pokemonJourneys.userId, userId))
+			: [],
+		userId ? db.select().from(pokemonMilestones).where(eq(pokemonMilestones.userId, userId)) : [],
+		userId
+			? db.select({ gameId: userGames.gameId }).from(userGames).where(eq(userGames.userId, userId))
+			: [],
+		userId
+			? db
+					.select({ id: catchEmAllSettings.id })
+					.from(catchEmAllSettings)
+					.where(eq(catchEmAllSettings.userId, userId))
+			: [],
+		db.select({ count: count() }).from(pokemon)
+	]);
+	const configured = settings.length > 0 || selected.length > 0;
+	const ids = new Set(selected.map((g) => g.gameId));
+	const regions = new Map(research.map((r) => [r.gameId, r.regions]));
+	return {
+		...pokemonProgress({
+			games: gameRows
+				.filter((g) => !configured || ids.has(g.id))
+				.map((g) => ({ ...g, regions: regions.get(g.id) ?? [] })),
+			entries,
+			dex,
+			caughtIds: caught.map((c) => c.id),
+			seen,
+			journeys,
+			milestones,
+			speciesTotal: totals[0].count
+		}),
+		configured
+	};
+}