feat: roomier BO2 companion with +/- rank stepping

- Scale the COD page to the screen: larger gun art, text and progress
  ribbon, sized from one viewport unit so it fills a MacBook Pro 16"
  and big monitors and still fits 1280x720 without scrolling.
- Five columns on wide screens and four below, picked by CSS, so the
  server-rendered page already has the final layout.
- Replace the tabs/filters/overview rows with one toolbar of matching
  controls.
- Player and weapon ranks step with + and -: level 55 + 1 is the next
  prestige at level 1, up to max prestige. Presses show at once, batch
  while a save is running, and stepRank does the arithmetic in SQL.
- Clicking a rank still opens exact entry for big jumps.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/lib/game-tracker/RankStepper.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { deserialize } from '$app/forms';
+	import Minus from 'lucide-svelte/icons/minus';
+	import Plus from 'lucide-svelte/icons/plus';
+	import type { RankLimits } from './rank-limits';
+	import { maxUncappedLevel, rankProgress, stepRank, type Rank } from './rank-progress';
+
+	type SavedRank = Rank & { itemId: number | null };
+	let {
+		itemId,
+		name,
+		level,
+		prestige,
+		limits,
+		disabled,
+		large = false,
+		onupdate,
+		children
+	}: {
+		/** null steps the player rank. */
+		itemId: number | null;
+		name: string;
+		level: number;
+		prestige: number;
+		limits: RankLimits;
+		disabled: boolean;
+		large?: boolean;
+		onupdate: (rank: SavedRank) => void;
+		children?: Snippet;
+	} = $props();
+
+	let error = $state('');
+	let status = $state('');
+	// Presses show immediately; presses made while a save is running go out as one batch.
+	let unsent = 0;
+	let saving = false;
+	let confirmed: Rank = { level: 1, prestige: 0 };
+
+	const progress = $derived(rankProgress(limits, { level, prestige }));
+	const atTop = $derived(
+		limits.maxLevel === null ? level >= maxUncappedLevel : progress.value >= progress.total
+	);
+	const atBottom = $derived(level <= 1 && (limits.maxLevel === null || prestige <= 0));
+
+	function press(delta: 1 | -1) {
+		const next = stepRank(limits, { level, prestige }, delta);
+		if (next.level === level && next.prestige === prestige) return;
+		if (!saving && !unsent) confirmed = { level, prestige };
+		unsent += delta;
+		error = '';
+		onupdate({ itemId, ...next });
+		void save();
+	}
+
+	async function save() {
+		if (saving || !unsent) return;
+		saving = true;
+		status = 'Saving…';
+		// The server accepts at most 100 levels per request; any rest goes in the next one.
+		const delta = Math.max(-100, Math.min(100, unsent));
+		unsent -= delta;
+		const body = new FormData();
+		if (itemId !== null) body.set('itemId', String(itemId));
+		body.set('delta', String(delta));
+		try {
+			const result = deserialize(
+				await (await fetch('?/stepRank', { 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 SavedRank;
+			confirmed = { level: rank.level, prestige: rank.prestige };
+		} catch (e) {
+			unsent = 0;
+			error = e instanceof Error ? e.message : 'Could not save. Try again.';
+		}
+		saving = false;
+		if (unsent) return save();
+		status = error ? '' : 'Saved';
+		onupdate({ itemId, ...confirmed });
+	}
+</script>
+
+<div class="stepper" class:large>
+	<button
+		type="button"
+		class="step"
+		aria-label={`Level down ${name}`}
+		disabled={disabled || atBottom}
+		onclick={() => press(-1)}><Minus aria-hidden="true" /></button
+	>
+	{@render children?.()}
+	<button
+		type="button"
+		class="step up"
+		aria-label={`Level up ${name}`}
+		disabled={disabled || atTop}
+		onclick={() => press(1)}><Plus aria-hidden="true" /></button
+	>
+	<span role="status" class={error ? 'error' : 'sr-only'}>{error || status}</span>
+</div>
+
+<style>
+	.stepper {
+		--size: calc(30 * var(--u, 1px));
+		position: relative;
+		display: flex;
+		flex-shrink: 0;
+		align-items: center;
+		gap: calc(4 * var(--u, 1px));
+	}
+	.large {
+		--size: 40px;
+		gap: 10px;
+	}
+	.step {
+		display: grid;
+		place-items: center;
+		width: var(--size);
+		height: var(--size);
+		border: 1px solid var(--site-border);
+		border-radius: calc(var(--size) / 4);
+		background: var(--background);
+		color: var(--site-text);
+		cursor: pointer;
+		transition:
+			background 0.15s,
+			border-color 0.15s;
+	}
+	.step :global(svg) {
+		width: 55%;
+		height: 55%;
+	}
+	.step.up {
+		border-color: color-mix(in srgb, #f59e0b 55%, var(--site-border));
+		background: color-mix(in srgb, #f59e0b 14%, var(--background));
+	}
+	.step:hover:not(:disabled) {
+		border-color: #f59e0b;
+		background: color-mix(in srgb, #f59e0b 26%, var(--background));
+	}
+	.step:focus-visible {
+		outline: 2px solid #f59e0b;
+		outline-offset: 1px;
+	}
+	.step:disabled {
+		cursor: default;
+		opacity: 0.35;
+	}
+	.error {
+		position: absolute;
+		top: calc(100% + 4px);
+		right: 0;
+		z-index: 20;
+		width: 13rem;
+		border-radius: 6px;
+		background: var(--destructive);
+		padding: 6px 8px;
+		font-size: 12px;
+		color: white;
+	}
+</style>