Fix Show Deck showing the deck from a previous battle

Enable non-default costs for custom cards
Fix issues with lobby game settings UI
2026-03-22 01:44:12 -05:00 · 2025-08-20 22:40:35 +10:00 · 2025-03-29 18:52:12 +11:00 · 2025-03-29 18:48:02 +11:00 · 2025-03-27 18:09:55 +11:00 · 2024-06-10 12:45:25 +10:00
51 changed files with 3820 additions and 1353 deletions
--- a/TableturfBattleClient/assets/CardBackground-0-0.webp
+++ b/TableturfBattleClient/assets/CardBackground-0-0.webp
--- a/TableturfBattleClient/assets/CardBackground-0-1.webp
+++ b/TableturfBattleClient/assets/CardBackground-0-1.webp
--- a/TableturfBattleClient/assets/CardBackground-1-0.webp
+++ b/TableturfBattleClient/assets/CardBackground-1-0.webp
--- a/TableturfBattleClient/assets/CardBackground-1-1.webp
+++ b/TableturfBattleClient/assets/CardBackground-1-1.webp
--- a/TableturfBattleClient/assets/CardBackground-2-0.webp
+++ b/TableturfBattleClient/assets/CardBackground-2-0.webp
--- a/TableturfBattleClient/assets/CardBackground-2-1.webp
+++ b/TableturfBattleClient/assets/CardBackground-2-1.webp
--- a/TableturfBattleClient/assets/site.webmanifest
+++ b/TableturfBattleClient/assets/site.webmanifest
@ -2,14 +2,14 @@
 	"name": "Tableturf Battle",
 	"icons": [
 		{
-			"src": "external/android-chrome-192x192.png",
+			"src": "external/android-chrome-192x192.webp",
 			"sizes": "192x192",
-			"type": "image/png"
+			"type": "image/webp"
 		},
 		{
-			"src": "external/android-chrome-512x512.png",
+			"src": "external/android-chrome-512x512.webp",
 			"sizes": "512x512",
-			"type": "image/png"
+			"type": "image/webp"
 		}
 	],
 	"theme_color": "#0c92f2",
--- a/TableturfBattleClient/index.html
+++ b/TableturfBattleClient/index.html
@ -9,8 +9,8 @@
 		</script>
 		<title>Tableturf Battle</title>
 		<link rel="apple-touch-icon" sizes="180x180" href="assets/external/apple-touch-icon.png">
-		<link rel="icon" type="image/png" sizes="32x32" href="assets/external/favicon-32x32.png">
-		<link rel="icon" type="image/png" sizes="16x16" href="assets/external/favicon-16x16.png">
+		<link rel="icon" type="image/webp" sizes="32x32" href="assets/external/favicon-32x32.webp">
+		<link rel="icon" type="image/webp" sizes="16x16" href="assets/external/favicon-16x16.webp">
 		<link rel="manifest" href="assets/site.webmanifest">
 		<link rel="stylesheet" href="tableturf.css"/>
 		<script src="config/config.js"></script>
@ -30,8 +30,27 @@
 	</head>
 	<body>
 		<div id="noJSPage">This application requires JavaScript.</div>
+		<svg id="cardDisplayAssets">
+			<defs>
+				<clipPath id="cardBorder">
+					<rect x="19" y="20" width="404" height="576" rx="18" ry="18"/>
+				</clipPath>
+				<linearGradient id='rareGradient' gradientUnits="userSpaceOnUse" x1="29.2%" y1='21.5%' x2="55.5%" y2="15.7%" spreadMethod='reflect'>
+					<stop offset='0%' stop-color='#FBFFCC'/>
+					<stop offset='100%' stop-color='#E0AE12'/>
+				</linearGradient>
+				<linearGradient id='freshGradient' gradientUnits="userSpaceOnUse" x1="17.5%" y1="-2.5%" x2="83.5%" y2="32%">
+					<stop offset='0%' stop-color='#FF93DD'/>
+					<stop offset='20%' stop-color='#FEF499'/>
+					<stop offset='50%' stop-color='#C9448A'/>
+					<stop offset='75%' stop-color='#1EFBC3'/>
+					<stop offset='95%' stop-color='#FD97DB'/>
+					<stop offset='100%' stop-color='#FFBAC2'/>
+				</linearGradient>
+			</defs>
+		</svg>
 		<div id="preGamePage" hidden>
-			<div id="logoBanner"><img title="Tableturf Battle" alt="Tableturf Battle logo" id="logo" src="assets/external/logo.png"></div>
+			<div id="logoBanner"><img title="Tableturf Battle" alt="Tableturf Battle logo" id="logo" src="assets/external/logo.webp"></div>
 			<h1>Tableturf Battle</h1>
 			<form id="preGameForm">
 				<p><label for="nameBox">Choose a nickname: <input type="text" id="nameBox" required minlength="1" maxlength="20"/></label></p>
@ -57,6 +76,7 @@
 				</div>
 				<p>
 					<a id="preGameDeckEditorButton" href="deckeditor">Edit decks</a> |
+					<a id="preGameGalleryButton" href="cardlist">Card list</a> |
 					<a id="preGameReplayButton" href="replay">Replay</a> |
 					<a id="preGameSettingsButton" href="settings">Settings</a> |
 					<a id="preGameHelpButton" href="help">Help</a>
@ -75,11 +95,18 @@
 				<p>Other players can join using a link to this page.<br/>
 					<button type="button" id="shareLinkButton">Share link</button><button type="button" id="showQrCodeButton">Show QR code</button></p>
 				<ul id="playerList"></ul>
+				<h3>Game rules</h3>
 				<label for="lobbyTimeLimitBox">
 					Turn time limit:
 					<input type="number" id="lobbyTimeLimitBox" min="10" max="120" step="10" placeholder="None"/>
 					<span id="lobbyTimeLimitUnit">seconds</span>
 				</label>
+				<label for="lobbyAllowUpcomingCardsBox">
+					<input type="checkbox" id="lobbyAllowUpcomingCardsBox"/> Allow upcoming cards
+				</label>
+				<label for="lobbyAllowCustomCardsBox">
+					<input type="checkbox" id="lobbyAllowCustomCardsBox"/> Allow custom cards
+				</label>
 			</section>
 			<section id="lobbySelectedStageSection">
 				<h3>Stage</h3>
@ -480,6 +507,12 @@
 						<input type="radio" name="deckSleeves" id="deckSleeve22" value="22"/><label for="deckSleeve22"></label>
 						<input type="radio" name="deckSleeves" id="deckSleeve23" value="23"/><label for="deckSleeve23"></label>
 						<input type="radio" name="deckSleeves" id="deckSleeve24" value="24"/><label for="deckSleeve24"></label>
+						<input type="radio" name="deckSleeves" id="deckSleeve25" value="25"/><label for="deckSleeve25"></label>
+						<input type="radio" name="deckSleeves" id="deckSleeve26" value="26"/><label for="deckSleeve26"></label>
+						<input type="radio" name="deckSleeves" id="deckSleeve27" value="27"/><label for="deckSleeve27"></label>
+						<input type="radio" name="deckSleeves" id="deckSleeve28" value="28"/><label for="deckSleeve28"></label>
+						<input type="radio" name="deckSleeves" id="deckSleeve29" value="29"/><label for="deckSleeve29"></label>
+						<input type="radio" name="deckSleeves" id="deckSleeve30" value="30"/><label for="deckSleeve30"></label>
 					</section>
 					<section id="deckSleevesFormButtons">
 						<button type="submit" id="deckSleevesOkButton">Select</button>
@ -502,7 +535,7 @@
 						Import from screenshots
 					</label>
 					<section id="deckImportScreenshotSection">
-						<input type="file" id="deckImportFileBox" accept="image/png,image/jpeg,image/webp,image/bmp" multiple autocomplete="off"/>
+						<input type="file" id="deckImportFileBox" accept="image/*" multiple autocomplete="off"/>
 						<div>
 							<button type="button" id="deckImportScreenshotInstructionsButton">Show instructions</button>
 							<div id="deckImportScreenshotInstructions" hidden>
@ -577,9 +610,63 @@
 					<input type="text" id="cardListFilterBox" placeholder="Filter"/>
 				</div>
 				<div id="cardList" class="cardListGrid"></div>
+				<button id="deckEditorRemoveButton">Cut from deck</button>
 			</section>
 			<div id="deckEditorCardListBackdrop"></div>
 		</div>
+		<div id="galleryPage" hidden>
+			<header>
+				<a id="galleryBackButton" href=".">Back</a>
+				<label for="gallerySortBox">
+					Sort by
+					<select id="gallerySortBox" autocomplete="off"></select>
+				</label>
+				<input type="text" id="galleryFilterBox" placeholder="Filter"/>
+				<button id="galleryNewCustomCardButton">New custom card</button>
+				<label for="galleryChecklistBox"><input type="checkbox" id="galleryChecklistBox" autocomplete="off"/>Checklist</label>
+				Bits to complete: <span id="bitsToCompleteField"></span>
+			</header>
+			<main id="galleryCardList">
+			</main>
+			<dialog id="galleryCardDialog">
+				<div id="galleryCardEditor" hidden>
+					<textarea type="text" id="galleryCardEditorName" placeholder="Card name"></textarea>
+					<div id="galleryCardEditorGrid"></div>
+					<div id="galleryCardEditorImageToolbar" class="galleryCardEditorToolbar">
+						<input type="file" id="galleryCardEditorImageFile" accept="image/*" autocomplete="off"/>
+						<button id="galleryCardEditorImageSelectButton">Choose image</button>
+						<button id="galleryCardEditorImageClearButton">Clear</button>
+						<footer>(The image will not be seen by other players.)</footer>
+					</div>
+					<div id="galleryCardEditorColoursToolbar" class="galleryCardEditorToolbar">
+						Colours:
+						<input type="color" id="galleryCardEditorColour1"/>
+						<input type="color" id="galleryCardEditorColour2"/>
+						<select id="galleryCardEditorColourPresetBox"></select>
+					</div>
+					<div id="galleryCardEditorRarityToolbar" class="galleryCardEditorToolbar">
+						<label for="galleryCardEditorRarityBox">Rarity: <select id="galleryCardEditorRarityBox"></select></label>
+					</div>
+					<div id="galleryCardEditorSpecialCost">
+						<label for="galleryCardEditorSpecialCostDefaultBox"><input type="checkbox" id="galleryCardEditorSpecialCostDefaultBox" checked/>Default</label>
+					</div>
+				</div>
+				<form method="dialog">
+					<button type="button" id="galleryCardEditorEditButton">Edit</button>
+					<button type="button" id="galleryCardEditorSubmitButton">Save</button>
+					<button type="button" id="galleryCardEditorDeleteButton">Delete</button>
+					<button type="button" id="galleryCardEditorSnapshotButton">Snapshot</button>
+					<button type="submit" id="galleryCardEditorCancelButton">Cancel</button>
+				</form>
+				<dialog id="galleryCardDeleteDialog">
+					<div></div>
+					<form method="dialog">
+						<button type="submit" id="galleryCardEditorDeleteYesButton">Delete</button>
+						<button type="submit">Cancel</button>
+					</form>
+				</dialog>
+			</dialog>
+		</div>
 		<dialog id="testStageSelectionDialog">
 			<h3>Select a stage.</h3>
 			<form id="testStageSelectionForm" method="dialog">
@ -619,6 +706,10 @@
 							</select>
 						</label>
 					</p>
+					<p>
+						<label for="gameSetupAllowUpcomingCardsBox"><input type="checkbox" id="gameSetupAllowUpcomingCardsBox" checked/> Allow upcoming cards</label>
+						<label for="gameSetupAllowCustomCardsBox"><input type="checkbox" id="gameSetupAllowCustomCardsBox"/> Allow custom cards</label>
+					</p>
 					<p>Stage selection:</p>
 					<table>
 						<tr>
@ -724,6 +815,35 @@
 			<div id="settingsMessage"></div>
 			<form id="settingsDialogForm" method="dialog">
 				<p><label for="optionsColourLock"><input type="checkbox" id="optionsColourLock" checked/> Colour lock</label></p>
+				<p>
+					Preferred colours &ndash;
+					<label for="optionsColourGoodBox">Good guy:
+						<select id="optionsColourGoodBox">
+							<option value="red">Red</option>
+							<option value="orange">Orange</option>
+							<option value="yellow">Yellow</option>
+							<option value="limegreen">Lime</option>
+							<option value="green">Green</option>
+							<option value="turquoise">Turquoise</option>
+							<option value="blue">Blue</option>
+							<option value="purple">Purple</option>
+							<option value="magenta">Magenta</option>
+						</select>
+					</label>
+					<label for="optionsColourBadBox">Bad guy:
+						<select id="optionsColourBadBox">
+							<option value="red">Red</option>
+							<option value="orange">Orange</option>
+							<option value="yellow">Yellow</option>
+							<option value="limegreen">Lime</option>
+							<option value="green">Green</option>
+							<option value="turquoise">Turquoise</option>
+							<option value="blue">Blue</option>
+							<option value="purple">Purple</option>
+							<option value="magenta">Magenta</option>
+						</select>
+					</label>
+				</p>
 				<p><label for="optionsTurnNumberStyle">Turn number style: <select id="optionsTurnNumberStyle"><option value="remaining" selected>Turns remaining</option><option value="absolute">Turn number</option></select></label></p>
 				<p><label for="optionsSpecialWeaponSorting">Special weapon card sorting: <select id="optionsSpecialWeaponSorting"><option value="First" selected>First</option><option value="Last">Last</option><option value="InOrder">In order</option></select></label></p>
 				<button type="submit">Close</button>
--- a/TableturfBattleClient/src/Board.ts
+++ b/TableturfBattleClient/src/Board.ts
@ -247,7 +247,6 @@ class Board {
 						}
 						const cell = this.cells[x2][y2];
 						cell.classList.add('hover');
-						cell.classList.add(`hover${this.playerIndex + 1}`);
 						if (!legal)
 							cell.classList.add('hoverillegal');
 						if (space == Space.SpecialInactive1)
@ -269,11 +268,26 @@ class Board {

 	private internalClearHighlight() {
 		for (const s of this.highlightedCells) {
-			this.cells[s.x][s.y].setAttribute('class', Space[this.grid[s.x][s.y]] );
+			this.cells[s.x][s.y].classList.remove('hover', 'hoverillegal', 'hoverspecial');
 		}
 		this.highlightedCells.splice(0);
 	}

+	setTestHighlight(x: number, y: number, highlight: boolean) {
+		if (highlight)
+			this.cells[x][y].classList.add('testHighlight');
+		else
+			this.cells[x][y].classList.remove('testHighlight');
+	}
+
+	clearTestHighlight() {
+		for (let x = 0; x < this.grid.length; x++) {
+			for (let y = 0; y < this.grid[x].length; y++) {
+				this.cells[x][y].classList.remove('testHighlight');
+			}
+		}
+	}
+
 	enableInkAnimations() {
 		this.table.classList.add('enableInkAnimation');
 	}
@ -340,9 +354,6 @@ class Board {
 	resize(grid?: Space[][]) {
 		if (grid) this.grid = grid;

-		if (this.cells.length == this.grid.length && this.cells[0].length == this.grid[0].length)
-			return;  // Reconnected and board size did not change.
-
 		clearChildren(this.table);
 		this.cells.splice(0);
 		this.highlightedCells.splice(0);
@ -373,8 +384,8 @@ class Board {
 					if (e.pointerType != 'touch') {
 						if (this.autoHighlight && this.cardPlaying != null) {
 							const offset = this.rotatedMouseOffset;
-							const x = parseInt((e.target as HTMLTableCellElement).dataset.x!) - (this.flip ? Math.ceil(offset.x) : Math.floor(offset.x));
-							const y = parseInt((e.target as HTMLTableCellElement).dataset.y!) - (this.flip ? Math.ceil(offset.y) : Math.floor(offset.y));
+							const x = parseInt((e.currentTarget as HTMLTableCellElement).dataset.x!) - (this.flip ? Math.ceil(offset.x) : Math.floor(offset.x));
+							const y = parseInt((e.currentTarget as HTMLTableCellElement).dataset.y!) - (this.flip ? Math.ceil(offset.y) : Math.floor(offset.y));
 							if (x != this.highlightX || y != this.highlightY) {
 								this.highlightX = x;
 								this.highlightY = y;
@ -434,7 +445,9 @@ class Board {
 	}

 	setDisplayedSpace(x: number, y: number, newState: Space) {
+		const isTestHighlight = this.cells[x][y].classList.contains('testHighlight');
 		this.cells[x][y].setAttribute('class', Space[newState]);
+		if (isTestHighlight) this.cells[x][y].classList.add('testHighlight');
 		if (this.cells[x][y].childNodes.length > 0) {
 			if ((newState & Space.SpecialActive1) != Space.SpecialActive1)
 				this.clearSpecialAnimation(x, y);
--- a/TableturfBattleClient/src/Card.ts
+++ b/TableturfBattleClient/src/Card.ts
@ -1,42 +1,77 @@
 class Card {
 	number: number;
-	altNumber: number | null;
-	name: string;
-	line1: string | null;
-	line2: string | null;
-	artFileName: string | null;
+	altNumber?: number | null;
+	readonly name: string;
+	readonly line1: string | null;
+	readonly line2: string | null;
+	artFileName?: string | null;
 	imageUrl?: string;
 	textScale: number;
 	inkColour1: Colour;
 	inkColour2: Colour;
 	rarity: Rarity;
 	specialCost: number;
-	grid: readonly (readonly Space[])[];
+	grid: Space[][];
 	size: number;
+	isVariantOf?: number | null;

 	private minX: number;
 	private minY: number;
 	private maxX: number;
 	private maxY: number;

-	private static DEFAULT_INK_COLOUR_1: Colour = { r: 116, g: 96, b: 240 };
-	private static DEFAULT_INK_COLOUR_2: Colour = { r: 224, g: 242, b: 104 };
+	static DEFAULT_INK_COLOUR_1: Colour = { r: 224, g: 242, b: 104 };
+	static DEFAULT_INK_COLOUR_2: Colour = { r: 116, g: 96, b: 240 };
+	private static textScaleCalculationContext: OffscreenCanvasRenderingContext2D | null = null;

-	constructor(number: number, altNumber: number | null, name: string, line1: string | null, line2: string | null, artFileName: string | null, textScale: number, inkColour1: Colour, inkColour2: Colour, rarity: Rarity, specialCost: number, grid: Space[][]) {
+	private static getTextScaleCalculationContext() {
+		if (this.textScaleCalculationContext == null) {
+			const canvas = new OffscreenCanvas(256, 256);
+			this.textScaleCalculationContext = canvas.getContext("2d")!;
+			this.textScaleCalculationContext.font = 'bold 72pt "Splatoon 1"';
+		}
+		return this.textScaleCalculationContext;
+	}
+
+	static wrapName(name: string): [line1: string | null, line2: string | null] {
+		// If the user has entered manual line breaks, use those instead of auto-wrapping.
+		const pos = name.indexOf('\n');
+		if (pos >= 0)
+			return [ name.substring(0, pos), name.substring(pos + 1) ];
+
+		const ctx = Card.getTextScaleCalculationContext();
+		const line1Width = ctx.measureText(name).width;
+		if (line1Width <= 700)
+			return [ null, null ];
+
+		// We're going to break the line.
+		let bestPos = 0; let bestWidth = Infinity;
+		for (const m of name.matchAll(/[-\s]/g)) {
+			const pos = m.index! + 1;
+			const width = Math.max(ctx.measureText(name.substring(0, m[0] == ' ' ? pos - 1 : pos)).width, ctx.measureText(name.substring(pos)).width);
+			if (width < bestWidth) {
+				bestPos = pos;
+				bestWidth = width;
+			}
+		}
+
+		return bestPos > 0
+			? [ name.substring(0, bestPos).trimEnd(), name.substring(bestPos) ]
+			: [ null, null ];
+	}
+
+	constructor(number: number, name: string, line1: string | null, line2: string | null, inkColour1: Colour, inkColour2: Colour, rarity: Rarity, specialCost: number, grid: Space[][]) {
 		this.number = number;
-		this.altNumber = altNumber;
 		this.name = name;
 		this.line1 = line1;
 		this.line2 = line2;
-		this.artFileName = artFileName;
-		this.textScale = textScale;
 		this.inkColour1 = inkColour1;
 		this.inkColour2 = inkColour2;
 		this.rarity = rarity;
 		this.specialCost = specialCost;
 		this.grid = grid;

-		let size = 0, minX = 3, minY = 3, maxX = 3, maxY = 3;
+		let size = 0, minX = 3, minY = 3, maxX = 3, maxY = 3, hasSpecialSpace = false;
 		for (let y = 0; y < 8; y++) {
 			for (let x = 0; x < 8; x++) {
 				if (grid[x][y] != Space.Empty) {
@ -45,6 +80,8 @@ class Card {
 					minY = Math.min(minY, y);
 					maxX = Math.max(maxX, x);
 					maxY = Math.max(maxY, y);
+					if (grid[x][y] == Space.SpecialInactive1)
+						hasSpecialSpace = true;
 				}
 			}
 		}
@ -53,15 +90,47 @@ class Card {
 		this.minY = minY;
 		this.maxX = maxX;
 		this.maxY = maxY;
+		if (!specialCost) {
+			this.specialCost =
+				size <= 3 ? 1
+					: size <= 5 ? 2
+						: size <= 8 ? 3
+							: size <= 11 ? 4
+								: size <= 15 ? 5
+									: 6;
+			if (!hasSpecialSpace && this.specialCost > 3)
+				this.specialCost = 3;
+		}
+
+		const ctx = Card.getTextScaleCalculationContext();
+		const line1Width = ctx.measureText(line1 ?? name).width;
+		const line2Width = line2 != null ? ctx.measureText(line2).width : 0;
+		const width = Math.max(line1Width, line2Width);
+		this.textScale = width <= 700 ? 1 : 700 / width;
 	}

 	static fromJson(obj: any) {
-		return cardDatabase.cards && cardDatabase.isValidCardNumber(obj.number)
-			? cardDatabase.get(obj.number)
-			: new Card(obj.number, obj.altNumber ?? null, obj.name, obj.line1 ?? null, obj.line2 ?? null, obj.artFileName ?? null, obj.textScale ?? 1, obj.inkColour1 ?? this.DEFAULT_INK_COLOUR_1, obj.inkColour2 ?? this.DEFAULT_INK_COLOUR_2, obj.rarity, obj.specialCost, obj.grid);
+		if (cardDatabase.cards && cardDatabase.isValidCardNumber(obj.number)) return cardDatabase.get(obj.number);
+		const card = new Card(obj.number, obj.name, obj.line1, obj.line2, obj.inkColour1 ?? this.DEFAULT_INK_COLOUR_1, obj.inkColour2 ?? this.DEFAULT_INK_COLOUR_2, obj.rarity, obj.specialCost, obj.grid);
+		card.altNumber = obj.altNumber ?? null;
+		card.artFileName = obj.artFileName ?? null;
+		card.imageUrl = obj.imageUrl ?? null;
+		card.isVariantOf = obj.isVariantOf ?? null;
+		return card;
 	}

-	get isUpcoming() { return this.number < 0; }
+	isTheSameAs(jsonCard: Card) {
+		if (this.name != jsonCard.name) return false;
+		for (let x = 0; x < 8; x++) {
+			for (let y = 0; y < 8; y++) {
+				if (this.grid[x][y] != jsonCard.grid[x][y]) return false;
+			}
+		}
+		return true;
+	}
+
+	get isCustom() { return this.number <= UNSAVED_CUSTOM_CARD_INDEX; }
+	get isUpcoming() { return this.number < 0 && !this.isCustom; }
 	get isSpecialWeapon() { return this.specialCost == 3 && this.size == 12 };

 	getSpace(x: number, y: number, rotation: number) {
--- a/TableturfBattleClient/src/CardButton.ts
+++ b/TableturfBattleClient/src/CardButton.ts
@ -1,6 +1,7 @@
 /// <reference path="CheckButton.ts"/>

-class CardButton extends CheckButton {
+class CardButton extends CheckButton implements ICardElement {
+	readonly element: HTMLButtonElement;
 	private static idNumber = 0;

 	readonly card: Card;
@ -10,9 +11,11 @@ class CardButton extends CheckButton {
 		button.type = 'button';
 		button.classList.add('cardButton');
 		button.classList.add([ 'common', 'rare', 'fresh' ][card.rarity]);
-		if (card.number < 0) button.classList.add('upcoming');
+		if (card.isCustom) button.classList.add('custom');
+		else if (card.isUpcoming) button.classList.add('upcoming');
 		button.dataset.cardNumber = card.number.toString();
 		super(button);
+		this.element = button;

 		this.card = card;

@ -34,7 +37,7 @@ class CardButton extends CheckButton {

 		let el2 = document.createElement('div');
 		el2.classList.add('cardNumber');
-		el2.innerText = card.number >= 0 ? `No. ${card.number}` : 'Upcoming';
+		el2.innerText = card.number >= 0 ? `No. ${card.number}` : card.isCustom ? 'Custom' : 'Upcoming';
 		row.appendChild(el2);

 		el2 = document.createElement('div');
--- a/TableturfBattleClient/src/CardDatabase.ts
+++ b/TableturfBattleClient/src/CardDatabase.ts
@ -1,6 +1,14 @@
 const cardDatabase = {
+	/** The list of official cards, or null if the database has not yet been loaded. */
 	cards: null as Card[] | null,
+	/** The list of custom cards added by the user. */
+	customCards: [ ] as Card[],
+	/** The list of custom cards used in the current game that were not added by the user. */
+	receivedCustomCards: [ ] as Card[],
+	customCardsModified: false,
+	/** The number of official cards, and the highest card number among official cards. */
 	lastOfficialCardNumber: 0,
+
 	_byAltNumber: [ ] as Card[],

 	// Upcoming cards are identified with a negative number, as their actual numbers aren't known until their release.
@ -10,76 +18,101 @@ const cardDatabase = {
 		if (number > 0) {
 			number--;
 			if (number < cardDatabase.lastOfficialCardNumber) return cardDatabase.cards[number];
+		} else if (number <= RECEIVED_CUSTOM_CARD_START) {
+			const card = cardDatabase.receivedCustomCards[RECEIVED_CUSTOM_CARD_START - number];
+			if (card) return card;
+		} else if (number <= CUSTOM_CARD_START) {
+			const card = cardDatabase.customCards[CUSTOM_CARD_START - number];
+			if (card) return card;
 		} else if (number < 0) {
 			const card = cardDatabase._byAltNumber[-number];
 			if (card) return card;
 		}
 		throw new RangeError(`No card with number ${number}`);
 	},
-	isValidCardNumber(number: number) {
+	isValidOfficialCardNumber(number: number) {
 		return number > 0 ? number <= cardDatabase.lastOfficialCardNumber : cardDatabase._byAltNumber[-number] != undefined;
 	},
+	isValidCardNumber(number: number) {
+		return number > 0 ? number <= cardDatabase.lastOfficialCardNumber
+			: number <= RECEIVED_CUSTOM_CARD_START ? RECEIVED_CUSTOM_CARD_START - number < cardDatabase.receivedCustomCards.length
+			: number <= CUSTOM_CARD_START ? CUSTOM_CARD_START - number < cardDatabase.customCards.length
+			: cardDatabase._byAltNumber[-number] != undefined;
+	},
 	loadAsync() {
 		return new Promise<Card[]>((resolve, reject) => {
-			if (cardDatabase.cards != null) {
-				resolve(cardDatabase.cards);
-				return;
-			}
-			const cardListRequest = new XMLHttpRequest();
-			cardListRequest.open('GET', `${config.apiBaseUrl}/cards`);
-			cardListRequest.addEventListener('load', e => {
-				const cards: Card[] = [ ];
-				if (cardListRequest.status == 200) {
-					const s = cardListRequest.responseText;
-					const response = JSON.parse(s) as object[];
-					for (const o of response) {
-						const card = Card.fromJson(o);
-						cards.push(card);
-						cardDatabase.lastOfficialCardNumber = Math.max(cardDatabase.lastOfficialCardNumber, card.number);
-						if (card.number < 0) cardDatabase._byAltNumber[-card.number] = card;
-						else if (card.altNumber != null && card.altNumber < 0) cardDatabase._byAltNumber[-card.altNumber] = card;
-					}
-					cardDatabase.cards = cards;
-
-					if (window.location.protocol == 'file:') {
-						// If debugging locally, just read the files from the assets directory.
-						for (const card of cardDatabase.cards!) {
-							card.imageUrl = `assets/external/card/${card.artFileName}.webp`
-						}
-						resolve(cards);
-						return;
-					}
-					// Otherwise, download and extract card images from a .tar package.
-					const imagesRequest = new XMLHttpRequest();
-					imagesRequest.responseType = 'arraybuffer';
-					imagesRequest.open('GET', 'assets/external/card.tar');
-					imagesRequest.addEventListener('load', () => {
-						if (imagesRequest.status == 200 && imagesRequest.response) {
-							const buffer = imagesRequest.response as ArrayBuffer;
-							untar(buffer).then(files => {
-								for (const tarFile of files) {
-									const card = cardDatabase.cards!.find(c => tarFile.name == `${c.artFileName}.webp`);
-									if (!card) continue;
-									card.imageUrl = tarFile.getBlobUrl();
-								}
-								resolve(cards);
-							});
-						} else {
-							reject(new Error(`Error downloading card images: response was ${imagesRequest.status}`));
-						}
-					});
-					imagesRequest.addEventListener('error', () => {
-						reject(new Error('Error downloading card images: no further information.'))
-					});
-					imagesRequest.send();
-				} else {
-					reject(new Error(`Error downloading card database: response was ${cardListRequest.status}`));
+			function afterFontLoaded() {
+				if (cardDatabase.cards != null) {
+					resolve(cardDatabase.cards);
+					return;
 				}
-			});
-			cardListRequest.addEventListener('error', e => {
-				reject(new Error('Error downloading card database: no further information.'))
-			});
-			cardListRequest.send();
+				const cardListRequest = new XMLHttpRequest();
+				cardListRequest.open('GET', `${config.apiBaseUrl}/cards`);
+				cardListRequest.addEventListener('load', e => {
+					const cards: Card[] = [ ];
+					if (cardListRequest.status == 200) {
+						const s = cardListRequest.responseText;
+						const response = JSON.parse(s) as object[];
+						for (const o of response) {
+							const card = Card.fromJson(o);
+							cards.push(card);
+							cardDatabase.lastOfficialCardNumber = Math.max(cardDatabase.lastOfficialCardNumber, card.number);
+							if (card.number < 0) cardDatabase._byAltNumber[-card.number] = card;
+							else if (card.altNumber != null && card.altNumber < 0) cardDatabase._byAltNumber[-card.altNumber] = card;
+						}
+						cardDatabase.cards = cards;
+
+						if (window.location.protocol == 'file:') {
+							// If debugging locally, just read the files from the assets directory.
+							for (const card of cardDatabase.cards!) {
+								card.imageUrl = `assets/external/card/${card.artFileName}.webp`
+							}
+							resolve(cards);
+							return;
+						}
+						// Otherwise, download and extract card images from a .tar package.
+						const imagesRequest = new XMLHttpRequest();
+						imagesRequest.responseType = 'arraybuffer';
+						imagesRequest.open('GET', 'assets/external/card.tar');
+						imagesRequest.addEventListener('load', () => {
+							if (imagesRequest.status == 200 && imagesRequest.response) {
+								const buffer = imagesRequest.response as ArrayBuffer;
+								untar(buffer).then(files => {
+									for (const tarFile of files) {
+										const card = cardDatabase.cards!.find(c => tarFile.name == `${c.artFileName}.webp`);
+										if (!card) continue;
+										card.imageUrl = tarFile.getBlobUrl();
+									}
+									resolve(cards);
+								});
+							} else {
+								reject(new Error(`Error downloading card images: response was ${imagesRequest.status}`));
+							}
+						});
+						imagesRequest.addEventListener('error', () => {
+							reject(new Error('Error downloading card images: no further information.'))
+						});
+						imagesRequest.send();
+					} else {
+						reject(new Error(`Error downloading card database: response was ${cardListRequest.status}`));
+					}
+				});
+				cardListRequest.addEventListener('error', e => {
+					reject(new Error('Error downloading card database: no further information.'))
+				});
+				cardListRequest.send();
+			}
+
+			// Preload the font first; calculating text scale depends on this.
+			const link = document.createElement('link');
+			link.rel = 'preload';
+			link.href = 'assets/external/splatoon1.woff2';
+			link.as = 'font';
+			link.type = 'font/woff';
+			link.crossOrigin = '';
+			link.addEventListener('load', afterFontLoaded);
+			link.addEventListener('error', afterFontLoaded);
+			document.head.appendChild(link);
 		});
 	}
 }
--- a/TableturfBattleClient/src/CardDisplay.ts
+++ b/TableturfBattleClient/src/CardDisplay.ts
@ -1,34 +1,73 @@
-class CardDisplay {
+class CardDisplay implements ICardElement {
 	readonly card: Card;
-	readonly element: SVGSVGElement;
+	level: number;
+	readonly element: HTMLElement;
+	readonly svg: SVGSVGElement;
+	private readonly sizeElement: SVGTextElement;
+	private readonly specialCostGroup: SVGGElement;
+	private idNumber: number;

-	constructor(card: Card, level: number) {
-		let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-		svg.setAttribute('viewBox', '0 0 635 885');
+	private static nextIdNumber = 0;
+
+	private static getGradientId(baseId: string, scale: number) {
+		if (scale >= 20) return baseId;
+
+		const roundedScale = Math.round(scale * 20);
+		if (roundedScale >= 20) return baseId;
+
+		const id = `${baseId}${roundedScale}`;
+		if (document.getElementById(id)) return id;
+
+		const baseElement = document.getElementById(baseId);
+		if (!baseElement)
+			throw new Error(`Base gradient element '${baseId}' not found.`);
+		const el = <Element> baseElement!.cloneNode(true);
+		baseElement.insertAdjacentElement('afterend', el);
+		el.setAttribute('id', id);
+		el.setAttribute('gradientTransform', `translate(${-6350 / roundedScale + 317.5} 0) scale(${20 / roundedScale} 1)`);
+		return id;
+	}
+
+	constructor(card: Card, level: number, elementType: string = 'div') {
+		this.idNumber = CardDisplay.nextIdNumber++;
+		this.card = card;
+		this.level = level;
+
+		const element = document.createElement(elementType);
+		element.classList.add('card');
+		element.classList.add([ 'common', 'rare', 'fresh' ][card.rarity]);
+		this.element = element;
+
+		const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+		svg.setAttribute('viewBox', '0 0 442 616');
 		svg.setAttribute('alt', card.name);
-		this.element = svg;
+		this.svg = svg;
+		element.appendChild(svg);

-		svg.classList.add('card');
-		svg.classList.add([ 'common', 'rare', 'fresh' ][card.rarity]);
-		if (card.number < 0) svg.classList.add('upcoming');
+		if (card.isCustom) svg.classList.add('custom');
+		else if (card.isUpcoming) svg.classList.add('upcoming');
 		svg.dataset.cardNumber = card.number.toString();
 		svg.style.setProperty("--number", card.number.toString());

 		// Background
 		const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
-		image.setAttribute('href', `assets/CardBackground-${card.rarity}-${level > 0 ? '1' : '0'}.webp`);
+		image.setAttribute('class', 'cardDisplayBackground');
+		image.setAttribute('href', `assets/external/CardBackground${card.isCustom ? '-custom' : ''}-${card.rarity}-${level > 0 ? '1' : '0'}.webp`);
 		image.setAttribute('width', '100%');
 		image.setAttribute('height', '100%');
 		svg.appendChild(image);

-		if (level == 0) {
-			svg.insertAdjacentHTML('beforeend', `<image href="assets/external/CardInk.webp" width="635" height="885" clip-path="url(#myClip)"/>`);
-		} else {
+		if (level > 0) {
+			const r1 = card.inkColour1.r / 255;
+			const g1 = card.inkColour1.g / 255;
+			const b1 = card.inkColour1.b / 255;
+			const dr = (card.inkColour2.r - card.inkColour1.r) / 255;
+			const dg = (card.inkColour2.g - card.inkColour1.g) / 255;
+			const db = (card.inkColour2.b - card.inkColour1.b) / 255;
 			svg.insertAdjacentHTML('beforeend', `
-				<filter id="ink1-${card.number}" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="${card.inkColour1.r / 255} 0 0 0 0 0 ${card.inkColour1.g / 255} 0 0 0 0 0 ${card.inkColour1.b / 255} 0 0 0 0 0 0.88 0"/></filter>
-				<image href="assets/external/CardInk-1.webp" width="635" height="885" clip-path="url(#myClip)" filter="url(#ink1-${card.number})"/>
-				<filter id="ink2-${card.number}" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="${card.inkColour2.r / 255} 0 0 0 0 0 ${card.inkColour2.g / 255} 0 0 0 0 0 ${card.inkColour2.b / 255} 0 0 0 0 0 0.88 0"/></filter>
-				<image href="assets/external/CardInk-2.webp" width="635" height="885" clip-path="url(#myClip)" filter="url(#ink2-${card.number})"/>
+				<filter id="ink-${this.idNumber}" class="inkFilter" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="${dr} 0 0 0 ${r1} 0 ${dg} 0 0 ${g1} 0 0 ${db} 0 ${b1} 0 0 0 0.88 0"/></filter>
+				<image href="assets/external/CardInk_00.webp" width="100%" height="100%" clip-path="url(#cardBorder)" filter="url(#ink-${this.idNumber})"/>
+				<image href="assets/external/CardFrame_01.webp" width="100%" height="100%" clip-path="url(#cardBorder)"/>
 			`);
 		}

@ -44,7 +83,8 @@ class CardDisplay {

 		// Grid
 		const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-		g.setAttribute('transform', 'translate(380 604) rotate(6.5) scale(0.283)');
+		g.setAttribute('class', 'cardGrid');
+		g.setAttribute('transform', 'translate(264 420) rotate(6.5) scale(0.197)');
 		svg.appendChild(g);

 		CardDisplay.CreateSvgCardGrid(card, g);
@ -53,11 +93,12 @@ class CardDisplay {
 		const text1 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
 		text1.setAttribute('class', 'cardDisplayName');
 		text1.setAttribute('x', '50%');
-		text1.setAttribute('y', '168');
-		text1.setAttribute('font-size', '76');
+		text1.setAttribute('y', '19%');
+		text1.setAttribute('text-anchor', 'middle');
+		text1.setAttribute('font-size', '53');
 		text1.setAttribute('font-weight', 'bold');
 		text1.setAttribute('stroke', 'black');
-		text1.setAttribute('stroke-width', '15');
+		text1.setAttribute('stroke-width', '10.5');
 		text1.setAttribute('stroke-linejoin', 'round');
 		text1.setAttribute('paint-order', 'stroke');
 		text1.setAttribute('word-spacing', '-10');
@ -68,37 +109,30 @@ class CardDisplay {
 				text1.setAttribute('fill', '#6038FF');
 				break;
 			case Rarity.Rare:
-				svg.insertAdjacentHTML('beforeend', `
-					<linearGradient id='rareGradient' y1='25%' spreadMethod='reflect'>
-						<stop offset='0%' stop-color='#FEF9C6'/>
-						<stop offset='50%' stop-color='#DFAF17'/>
-						<stop offset='100%' stop-color='#FEF9C6'/>
-					</linearGradient>
-				`);
-				text1.setAttribute('fill', 'url("#rareGradient")');
+				text1.setAttribute('fill', `url("#${CardDisplay.getGradientId('rareGradient', card.textScale)}")`);
 				break;
 			case Rarity.Fresh:
-				svg.insertAdjacentHTML('beforeend', `
-					<linearGradient id='freshGradient' y2='25%'>
-						<stop offset='0%' stop-color='#FF8EDD'/>
-						<stop offset='25%' stop-color='#FFEC9F'/>
-						<stop offset='50%' stop-color='#B84386'/>
-						<stop offset='75%' stop-color='#2BEFC8'/>
-						<stop offset='100%' stop-color='#FF8EDD'/>
-					</linearGradient>
-				`);
-				text1.setAttribute('fill', 'url("#freshGradient")');
+				text1.setAttribute('fill', `url("#${CardDisplay.getGradientId('freshGradient', card.textScale)}")`);
 				break;
 		}
-		if (card.line1 && card.line2) {
+		if (card.line1 != null && card.line2 != null) {
 			const tspan1 = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
-			tspan1.setAttribute('y', '122');
+			tspan1.setAttribute('y', '13.8%');
 			tspan1.appendChild(document.createTextNode(card.line1));
 			text1.appendChild(tspan1);

+			if (!card.line1.endsWith('-') && !card.line2.startsWith('-')) {
+				// Add a space in the middle, to be included when copying the card name.
+				const tspanBr = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+				tspanBr.setAttribute('x', '50%');
+				tspanBr.setAttribute('y', '19%');
+				tspanBr.appendChild(document.createTextNode(' '));
+				text1.appendChild(tspanBr);
+			}
+
 			const tspan2 = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
 			tspan2.setAttribute('x', '50%');
-			tspan2.setAttribute('y', '216');
+			tspan2.setAttribute('y', '24.4%');
 			tspan2.appendChild(document.createTextNode(card.line2));
 			text1.appendChild(tspan2);
 		} else
@ -107,29 +141,18 @@ class CardDisplay {
 		svg.appendChild(text1);

 		// Size
-		svg.insertAdjacentHTML('beforeend', `<image href='assets/external/Game Assets/CardCost_0${card.rarity}.png' width='80' height='80' transform='translate(12 798) rotate(-45) scale(1.33)'/>`);
-		svg.insertAdjacentHTML('beforeend', `<text fill='white' stroke='${card.rarity == Rarity.Common ? '#482BB4' : card.rarity == Rarity.Rare ? '#8B7E25' : '#481EF9'}' paint-order='stroke' stroke-width='5' font-size='48' y='816' x='87'>${card.size}</text>`);
+		svg.insertAdjacentHTML('beforeend', `<image class='cardSizeBackground' href='assets/external/CardCost_0${card.rarity}.webp' width='74.1' height='74.1' transform='translate(8.4 555) rotate(-45)'/>`);
+		svg.insertAdjacentHTML('beforeend', `<text fill='white' stroke='${card.rarity == Rarity.Common ? '#482BB4' : card.rarity == Rarity.Rare ? '#8B7E25' : '#481EF9'}' paint-order='stroke' stroke-width='5' font-size='33.4' x='13.7%' y='92.2%' text-anchor='middle'>${card.size}</text>`);
+		this.sizeElement = svg.lastElementChild as SVGTextElement;

 		// Special cost
 		const g2 = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+		this.specialCostGroup = g2;
 		g2.setAttribute('class', 'specialCost');
-		g2.setAttribute('transform', 'translate(170 806) scale(0.32)');
+		g2.setAttribute('transform', 'translate(118 561) scale(0.222)');
 		svg.appendChild(g2);

-		for (let i = 0; i < card.specialCost; i++) {
-			let rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-			const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
-			image.setAttribute('href', 'assets/SpecialOverlay.png');
-			for (const el of [ rect, image ]) {
-				el.setAttribute('x', (110 * (i % 5)).toString());
-				el.setAttribute('y', (-125 * Math.floor(i / 5)).toString());
-				el.setAttribute('width', '95');
-				el.setAttribute('height', '95');
-				g2.appendChild(el);
-			}
-		}
-
-		this.card = card;
+		this.setSpecialCost(card.specialCost);
 	}

 	static CreateSvgCardGrid(card: Card, parent: SVGElement) {
@ -148,7 +171,7 @@ class CardDisplay {
 					rect.classList.add(card.grid[x][y] == Space.SpecialInactive1 ? 'special' : 'ink');
 					const elements: Element[] = [rect];
 					const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
-					image.setAttribute('href', card.grid[x][y] == Space.SpecialInactive1 ? 'assets/SpecialOverlay.png' : 'assets/InkOverlay.png');
+					image.setAttribute('href', card.grid[x][y] == Space.SpecialInactive1 ? 'assets/SpecialOverlay.webp' : 'assets/InkOverlay.webp');
 					elements.push(image);

 					for (const el of elements) {
@ -162,4 +185,24 @@ class CardDisplay {
 			}
 		}
 	}
+
+	setSpecialCost(value: number) {
+		clearChildren(this.specialCostGroup);
+		for (let i = 0; i < value; i++) {
+			let rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+			const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+			image.setAttribute('href', 'assets/SpecialOverlay.webp');
+			for (const el of [ rect, image ]) {
+				el.setAttribute('x', (110 * (i % 5)).toString());
+				el.setAttribute('y', (-125 * Math.floor(i / 5)).toString());
+				el.setAttribute('width', '95');
+				el.setAttribute('height', '95');
+				this.specialCostGroup.appendChild(el);
+			}
+		}
+	}
+
+	setSize(value: number) {
+		this.sizeElement.innerHTML = value.toString();
+	}
 }
--- a/TableturfBattleClient/src/CardList.ts
+++ b/TableturfBattleClient/src/CardList.ts
@ -1,16 +1,37 @@
-class CardList {
+class CardList<T extends ICardElement> {
 	readonly listElement: HTMLElement;
 	readonly sortBox: HTMLSelectElement;
 	readonly filterBox: HTMLInputElement;
-	readonly cardButtons: CardButton[] = [ ];
+	readonly cardButtons: T[] = [ ];

 	static readonly cardSortOrders: { [key: string]: (a: Card, b: Card) => number } = {
-		'number': (a, b) => compareCardNumbers(a.number, b.number),
-		'name': (a, b) => a.name.localeCompare(b.name),
-		'size': (a, b) => a.size != b.size ? a.size - b.size : compareCardNumbers(a.number, b.number),
-		'rarity': (a, b) => a.rarity != b.rarity ? b.rarity - a.rarity : compareCardNumbers(a.number, b.number),
+		'number': (a, b) => CardList.compareByNumber(a, b),
+		'name': (a, b) => CardList.compareByName(a, b),
+		'size': (a, b) => CardList.compareBySize(a, b),
+		'rarity': (a, b) => CardList.compareByRarity(a, b),
 	}

+	static compareCardNumbers(a: number, b: number) {
+		// Sort upcoming cards after released cards.
+		return a >= 0 ? (b >= 0 ? a - b : -1) : (b >= 0 ? 1 : b - a);
+	}
+
+	static compareByInGameSecondaryOrder(a: Card, b: Card) {
+		// Keep variants and special weapons together.
+		// TODO: There may be a better way to do this than hard-coding the first special weapon card number.
+		const baseA = a.isVariantOf ?? (a.isSpecialWeapon ? 70 : a.number);
+		const baseB = b.isVariantOf ?? (b.isSpecialWeapon ? 70 : b.number);
+		if (baseA != baseB) return CardList.compareCardNumbers(baseA, baseB);
+
+		// Sort by card number within each category.
+		return CardList.compareCardNumbers(a.number, b.number);
+	}
+
+	static compareByNumber(a: Card, b: Card) { return CardList.compareCardNumbers(a.number, b.number); }
+	static compareByName(a: Card, b: Card) { return a.name.localeCompare(b.name); }
+	static compareBySize(a: Card, b: Card) { return a.size != b.size ? a.size - b.size : CardList.compareByInGameSecondaryOrder(a, b); }
+	static compareByRarity(a: Card, b: Card) { return a.rarity != b.rarity ? b.rarity - a.rarity : CardList.compareByInGameSecondaryOrder(a, b); }
+
 	constructor(listElement: HTMLElement, sortBox: HTMLSelectElement, filterBox: HTMLInputElement) {
 		this.listElement = listElement;
 		this.sortBox = sortBox;
@ -21,7 +42,7 @@ class CardList {
 		filterBox.addEventListener('input', () => {
 			const s = filterBox.value.toLowerCase();
 			for (const button of this.cardButtons)
-				button.buttonElement.hidden = s != '' && !button.card.name.toLowerCase().includes(s);
+				button.element.hidden = s != '' && !button.card.name.toLowerCase().includes(s);
 		});

 		for (const label in CardList.cardSortOrders) {
@ -38,17 +59,42 @@ class CardList {
 			clearChildren(this.listElement);
 			this.cardButtons.sort((a, b) => sortOrder(a.card, b.card));
 			for (const button of this.cardButtons)
-				this.listElement.appendChild(button.buttonElement);
+				this.listElement.appendChild(button.element);
 		}
 	}

-	static fromId(id: string, sortBoxId: string, filterBoxId: string) {
-		return new CardList(document.getElementById(id)!, document.getElementById(sortBoxId) as HTMLSelectElement, document.getElementById(filterBoxId) as HTMLInputElement);
+	static fromId<T extends ICardElement>(id: string, sortBoxId: string, filterBoxId: string) {
+		return new CardList<T>(document.getElementById(id)!, document.getElementById(sortBoxId) as HTMLSelectElement, document.getElementById(filterBoxId) as HTMLInputElement);
 	}

-	add(button: CardButton) {
+	add(button: T) {
 		this.cardButtons.push(button);
-		this.listElement.appendChild(button.buttonElement);
+		this.listElement.appendChild(button.element);
+	}
+
+	update(button: T, card: Card) {
+		const i = this.cardButtons.findIndex(c => c.card.number == card.number);
+		if (i < 0) throw new Error('The card to update was not found in the list.');
+		const existingButton = this.cardButtons[i];
+		this.cardButtons.splice(i, 1, button);
+		this.listElement.replaceChild(button.element, existingButton.element);
+	}
+
+	remove(card: Card) {
+		const i = this.cardButtons.findIndex(b => b.card.number == card.number);
+		if (i < 0) return;
+		this.listElement.removeChild(this.cardButtons[i].element);
+		this.cardButtons.splice(i, 1);
+	}
+
+	removeAllCustomCards() {
+		for (let i = this.cardButtons.length - 1; i >= 0; i--) {
+			const button = this.cardButtons[i];
+			if (button.card.isCustom) {
+				this.listElement.removeChild(button.element);
+				this.cardButtons.splice(i, 1);
+			}
+		}
 	}

 	setSortOrder(sortOrder: string) {
@ -59,11 +105,6 @@ class CardList {
 	clearFilter() {
 		this.filterBox.value = '';
 		for (const button of this.cardButtons)
-			button.buttonElement.hidden = false;
+			button.element.hidden = false;
 	}
 }
-
-function compareCardNumbers(a: number, b: number) {
-	// Sort upcoming cards after released cards.
-	return a >= 0 ? (b >= 0 ? a - b : -1) : (b >= 0 ? 1 : b - a);
-}
--- a/TableturfBattleClient/src/Config.ts
+++ b/TableturfBattleClient/src/Config.ts
@ -15,6 +15,8 @@ enum SpecialWeaponSorting {
 class Config {
 	name: string | null = null;
 	colourLock = true;
+	goodColour?: string;
+	badColour?: string;
 	absoluteTurnNumber = false;
 	specialWeaponSorting = SpecialWeaponSorting.First;
 	lastCustomRoomConfig?: CustomRoomConfig;
@ -24,6 +26,8 @@ interface CustomRoomConfig {
 	maxPlayers: number;
 	turnTimeLimit: number | null;
 	goalWinCount: number | null;
+	allowUpcomingCards: boolean;
+	allowCustomCards: boolean;
 	stageSelectionMethodFirst: StageSelectionMethod;
 	stageSelectionMethodAfterWin: StageSelectionMethod | null;
 	stageSelectionMethodAfterDraw: StageSelectionMethod | null;
@ -49,3 +53,11 @@ let userConfig = new Config();
 function saveSettings() {
 	localStorage.setItem('settings', JSON.stringify(userConfig));
 }
+
+function saveChecklist() {
+	localStorage.setItem('checklist', JSON.stringify(ownedCards));
+}
+
+function saveCustomCards() {
+	localStorage.setItem('customCards', JSON.stringify(cardDatabase.customCards));
+}
--- a/TableturfBattleClient/src/Deck.ts
+++ b/TableturfBattleClient/src/Deck.ts
@ -13,6 +13,10 @@ class SavedDeck {
 		this.isReadOnly = isReadOnly;
 	}

+	static fromJson(obj: any) {
+		return new SavedDeck(obj.name, obj.sleeves ?? 0, obj.cards, obj.upgrades ?? new Array(15).fill(1), false);
+	}
+
 	get isValid() {
 		if (!cardDatabase.cards) throw new Error('Card database must be loaded to validate decks.');
 		if (this.cards.length != 15) return false;
@ -24,6 +28,11 @@ class SavedDeck {
 	}
 }

+interface DeckFullExport {
+	decks: SavedDeck[] | number[][];
+	customCards?: {[key: number]: Card};
+}
+
 class Deck {
 	name: string;
 	sleeves: number;
--- a/TableturfBattleClient/src/GameVariables.ts
+++ b/TableturfBattleClient/src/GameVariables.ts
@ -12,6 +12,10 @@ interface Game {
 	turnTimeLeft: number | null,
 	/** The number of game wins needed to win the set, or null if no goal win count is set. */
 	goalWinCount: number | null,
+	/** Whether upcoming cards may be used. */
+	allowUpcomingCards: boolean,
+	/** Whether custom cards may be used. */
+	allowCustomCards: boolean
 }

 /** A UUID used to identify the client. */
@ -22,6 +26,7 @@ let currentGame: {
 	game: Game,
 	/** The user's player data, or null if they are spectating. */
 	me: PlayerData | null,
+	isHost: boolean,
 	/** The WebSocket used for receiving game events, or null if not yet connected. */
 	webSocket: WebSocket | null,
 	reconnecting?: boolean
--- a/TableturfBattleClient/src/ICardElement.ts
+++ b/TableturfBattleClient/src/ICardElement.ts
@ -0,0 +1,4 @@
+interface ICardElement {
+	card: Card;
+	element: HTMLElement;
+}
--- a/TableturfBattleClient/src/Pages/DeckEditPage.ts
+++ b/TableturfBattleClient/src/Pages/DeckEditPage.ts
@ -3,7 +3,7 @@
 const deckNameLabel2 = document.getElementById('deckName2')!;
 const deckEditSize = document.getElementById('deckEditSize')!;
 const deckCardListEdit = document.getElementById('deckCardListEdit')!;
-const cardList = CardList.fromId('cardList', 'cardListSortBox', 'cardListFilterBox');
+const cardList = CardList.fromId<CardButton>('cardList', 'cardListSortBox', 'cardListFilterBox');
 const cardListButtonGroup = new CheckButtonGroup<Card>();

 const deckEditMenu = document.getElementById('deckEditMenu')!;
@ -13,6 +13,7 @@ const deckTestButton = document.getElementById('deckTestButton') as HTMLButtonEl
 const deckSaveButton = document.getElementById('deckSaveButton') as HTMLButtonElement;
 const deckCancelButton = document.getElementById('deckCancelButton') as HTMLButtonElement;
 const deckCardListBackButton = document.getElementById('deckCardListBackButton') as HTMLLinkElement;
+const deckEditorRemoveButton = document.getElementById('deckEditorRemoveButton') as HTMLButtonElement;
 const cardListFilterBox = document.getElementById('cardListFilterBox') as HTMLSelectElement;
 const testStageSelectionList = document.getElementById('testStageSelectionList')!;
 const testStageButtons = new CheckButtonGroup<Stage>(testStageSelectionList);
@ -24,45 +25,71 @@ let draggingCardButton: Element | null = null;

 function deckEditInitCardDatabase(cards: Card[]) {
 	for (const card of cards) {
-		const button = new CardButton(card);
-		cardList.add(button);
-		cardListButtonGroup.add(button, card);
-		button.buttonElement.addEventListener('click', () => {
-			if (!button.enabled) return;
-
-			for (const button2 of cardList.cardButtons) {
-				if (button2 != button)
-					button2.checked = false;
-			}
-
-			const index = deckEditCardButtons.entries.findIndex(el => el.button.checked);
-			if (index < 0) return;
-			const oldEntry = deckEditCardButtons.entries[index];
-			const oldCardNumber = oldEntry.value;
-
-			if (oldCardNumber != 0)
-				cardListButtonGroup.entries.find(e => e.value.number == oldCardNumber || e.value.altNumber == oldCardNumber)!.button.enabled = true;
-			cardListButtonGroup.entries.find(e => e.value.number == card.number)!.button.enabled = false;
-
-			const button3 = createDeckEditCardButton(card.number);
-			button3.checked = true;
-
-			deckEditCardButtons.replace(index, button3, card.number);
-			deckEditUpdateSize();
-
-			cardList.listElement.parentElement!.classList.remove('selecting');
-			if (!deckModified) {
-				deckModified = true;
-				window.addEventListener('beforeunload', onBeforeUnload_deckEditor);
-			}
-			selectFirstEmptySlot();
-		});
+		addCardToDeckEditor(card);
 		addTestCard(card);
 	}
 	cardList.setSortOrder('size');
 	testAllCardsList.setSortOrder('size');
 }

+function addCardToDeckEditor(card: Card) {
+	const button = new CardButton(card);
+	cardList.add(button);
+	cardListButtonGroup.add(button, card);
+	button.buttonElement.addEventListener('click', () => {
+		if (!button.enabled) return;
+
+		for (const button2 of cardList.cardButtons) {
+			if (button2 != button)
+				button2.checked = false;
+		}
+
+		const index = deckEditCardButtons.entries.findIndex(el => el.button.checked);
+		if (index < 0) return;
+		const oldEntry = deckEditCardButtons.entries[index];
+		const oldCardNumber = oldEntry.value;
+
+		if (oldCardNumber != 0)
+			cardListButtonGroup.entries.find(e => e.value.number == oldCardNumber || e.value.altNumber == oldCardNumber)!.button.enabled = true;
+		cardListButtonGroup.entries.find(e => e.value.number == card.number)!.button.enabled = false;
+
+		const button3 = createDeckEditCardButton(card.number);
+		button3.checked = true;
+
+		deckEditCardButtons.replace(index, button3, card.number);
+		deckEditUpdateSize();
+
+		cardList.listElement.parentElement!.classList.remove('selecting');
+		if (!deckModified) {
+			deckModified = true;
+			window.addEventListener('beforeunload', onBeforeUnload_deckEditor);
+		}
+		selectFirstEmptySlot();
+	});
+}
+
+deckEditorRemoveButton.addEventListener('click', () => {
+	const index = deckEditCardButtons.entries.findIndex(el => el.button.checked);
+	if (index < 0) return;
+	const oldEntry = deckEditCardButtons.entries[index];
+	const oldCardNumber = oldEntry.value;
+
+	if (oldCardNumber != 0)
+		cardListButtonGroup.entries.find(e => e.value.number == oldCardNumber || e.value.altNumber == oldCardNumber)!.button.enabled = true;
+
+	const button3 = createDeckEditEmptySlotButton();
+	button3.checked = true;
+
+	deckEditCardButtons.replace(index, button3, 0);
+	deckEditUpdateSize();
+
+	cardList.listElement.parentElement!.classList.remove('selecting');
+	if (!deckModified) {
+		deckModified = true;
+		window.addEventListener('beforeunload', onBeforeUnload_deckEditor);
+	}
+});
+
 function deckEditInitStageDatabase(stages: Stage[]) {
 	for (const stage of stages) {
 		const button = new StageButton(stage);
@ -111,6 +138,7 @@ function editDeck() {
 	for (const entry of cardListButtonGroup.entries)
 		entry.button.enabled = !selectedDeck.cards.includes(entry.value.number);

+	reloadCustomCards();
 	deckEditUpdateSize();
 	cardList.clearFilter();
 	editingDeck = true;
@ -118,6 +146,16 @@ function editDeck() {
 	selectFirstEmptySlot();
 }

+function reloadCustomCards() {
+	if (!cardDatabase.customCardsModified) return;
+	cardList.removeAllCustomCards();
+	testAllCardsList.removeAllCustomCards();
+	for (const card of cardDatabase.customCards) {
+		addCardToDeckEditor(card);
+		addTestCard(card);
+	}
+}
+
 function selectFirstEmptySlot() {
 	let found = false;
 	for (const el of deckEditCardButtons.entries) {
@ -141,6 +179,7 @@ function createDeckEditCardButton(cardNumber: number) {
 			button2.checked = button2.card.number == cardNumber;
 		}
 		cardList.listElement.parentElement!.classList.add('selecting');
+		deckEditorRemoveButton.hidden = false;
 	});
 	button.buttonElement.addEventListener('dragstart', e => {
 		if (e.dataTransfer == null) return;
@ -220,6 +259,7 @@ function createDeckEditEmptySlotButton() {
 		for (const button2 of cardList.cardButtons)
 			button2.checked = false;
 		cardList.listElement.parentElement!.classList.add('selecting');
+		deckEditorRemoveButton.hidden = true;
 	});
 	buttonElement.addEventListener('dragenter', e => e.preventDefault());
 	buttonElement.addEventListener('dragover', deckEditCardButton_dragover);
@ -240,7 +280,7 @@ function deckSortCompare(reverse: boolean, numberA: number, numberB: number) {
 		else if (cardB.isSpecialWeapon && !cardA.isSpecialWeapon)
 			return ((userConfig.specialWeaponSorting == SpecialWeaponSorting.Last) != reverse) ? -1 : 1;
 	}
-	const result = CardList.cardSortOrders['size'](cardA, cardB);
+	const result = CardList.compareBySize(cardA, cardB);
 	return reverse ? -result : result;
 }

--- a/TableturfBattleClient/src/Pages/DeckListPage.ts
+++ b/TableturfBattleClient/src/Pages/DeckListPage.ts
@ -103,7 +103,7 @@ function saveDecks() {
 	const decksString = localStorage.getItem('decks');
 	if (decksString) {
 		for (const deck of JSON.parse(decksString)) {
-			decks.push(new SavedDeck(deck.name, deck.sleeves ?? 0, deck.cards, deck.upgrades ?? new Array(15).fill(1), false));
+			decks.push(SavedDeck.fromJson(deck));
 		}
 	} else {
 		const lastDeckString = localStorage.getItem('lastDeck');
@ -136,7 +136,7 @@ function createDeckButton(deck: SavedDeck) {
 		const index = decks.indexOf(deck);
 		draggingDeckButton = buttonElement;
 		e.dataTransfer.effectAllowed = 'copyMove';
-		e.dataTransfer.setData('text/plain', JSON.stringify(deck, [ 'name', 'cards', 'sleeves', 'upgrades' ]));
+		e.dataTransfer.setData('text/plain', serialiseDecks([ deck ]));
 		e.dataTransfer.setData('application/tableturf-deck-index', index.toString());
 		buttonElement.classList.add('dragging');
 	});
@ -211,11 +211,37 @@ function deckButton_drop(e: DragEvent) {
 	}
 }

-function importDecks(decksToImport: (SavedDeck | number[])[]) {
+function importDecks(decksToImport: DeckFullExport) {
 	let newSelectedDeck: SavedDeck | null = null;
-	for (const el of decksToImport) {
+
+	// Merge custom cards.
+	const customCardNumbers: {[key: number]: number} = { };
+	if (decksToImport.customCards) {
+		console.log('Merging custom cards...');
+		for (const key in decksToImport.customCards) {
+			const incomingCard = Card.fromJson(decksToImport.customCards[key]);
+			const existingCard = cardDatabase.customCards.find(c => c.isTheSameAs(incomingCard));
+			if (existingCard) {
+				console.log(`Incoming card (${key}) ${incomingCard.name} matches existing (${existingCard.number}).`);
+				customCardNumbers[key] = existingCard.number;
+			} else {
+				const newNumber = CUSTOM_CARD_START - cardDatabase.customCards.length;
+				console.log(`Adding incoming card (${key}) ${incomingCard.name} as (${newNumber}).`);
+				incomingCard.number = newNumber;
+				cardDatabase.customCards.push(incomingCard);
+				addCardToGallery(incomingCard);
+				cardDatabase.customCardsModified = true;
+				customCardNumbers[key] = incomingCard.number;
+			}
+		}
+		console.log('Done merging custom cards.');
+		saveCustomCards();
+	}
+
+	// Import decks.
+	for (const el of decksToImport.decks) {
 		let deck;
-		if (el instanceof Array)
+		if (Array.isArray(el))
 			deck = new SavedDeck(`Imported Deck ${decks.length + 1}`, 0, el, new Array(15).fill(1), false);
 		else {
 			deck = el;
@ -224,6 +250,10 @@ function importDecks(decksToImport: (SavedDeck | number[])[]) {
 			deck.isReadOnly = false;
 			if (!deck.name) deck.name = `Imported Deck ${decks.length + 1}`;
 		}
+		for (let i = 0; i < deck.cards.length; i++) {
+			if (deck.cards[i] <= CUSTOM_CARD_START)
+				deck.cards[i] = customCardNumbers[deck.cards[i]];
+		}
 		createDeckButton(deck);
 		decks.push(deck);
 		newSelectedDeck ??= deck;
@ -271,7 +301,7 @@ deckImportForm.addEventListener('submit', e => {
 	}
 });

-function parseDecksForImport(s: string) {
+function parseDecksForImport(s: string) : DeckFullExport {
 	let isKoishiShareUrl = false;
 	const pos = s.indexOf('deck=');
 	if (pos >= 0) {
@ -284,23 +314,30 @@ function parseDecksForImport(s: string) {
 			if (data.length > 15 || data.find(i => typeof(i) != 'number' || !cardDatabase.isValidCardNumber(isKoishiShareUrl ? i : i + 1)))
 				throw new SyntaxError('Invalid deck data');
 			if (isKoishiShareUrl)
-				return [ data ];  // tableturf.koishi.top share URL
+				return { decks: [ data ] };  // tableturf.koishi.top share URL
 			else
-				return [ data.map(n => n + 1) ];  // Tooltip export data
+				return { decks: [ data.map(n => n + 1) ] };  // Tooltip export data
 		} else {
 			for (const deck of data) {
 				if (typeof(deck) != 'object' || !Array.isArray(deck.cards) || deck.cards.length > 15 || (deck.cards as any[]).find((i => typeof(i) != 'number' || !cardDatabase.isValidCardNumber(i))))
 					throw new SyntaxError('Invalid JSON deck');
 			}
-			return data;  // Our export data
+			return { decks: data.map(SavedDeck.fromJson) };  // Our export data without custom cards
 		}
 	} else if (typeof(data) == 'object') {
-		if (!Array.isArray(data.cards) || data.cards.length > 15 || (data.cards as any[]).find((i => typeof(i) != 'number' || !cardDatabase.isValidCardNumber(i))))
-			throw new SyntaxError('Invalid JSON deck');
-		return [ data ];  // Our old export data
+		if ('decks' in data) {
+			// Our export data with custom cards
+			const fullExport = data as DeckFullExport;
+			fullExport.decks = fullExport.decks.map(SavedDeck.fromJson);
+			return fullExport;
+		} else {
+			// Our old export data
+			if (!Array.isArray(data.cards) || data.cards.length > 15 || (data.cards as any[]).find((i => typeof(i) != 'number' || !cardDatabase.isValidOfficialCardNumber(i))))
+				throw new SyntaxError('Invalid JSON deck');
+			return { decks: [ SavedDeck.fromJson(data) ] };
+		}
 	} else
 		throw new SyntaxError('Invalid JSON deck');
-	// TODO: add support for tblturf.ink
 }

 deckViewMenuButton.addEventListener('click', () => {
@ -383,9 +420,47 @@ function deselectDeck() {
 	deckListPage.classList.remove('showingDeck');
 }

+function deckExportJsonReplacer(key: string, value: any) {
+	switch (key) {
+		case 'isReadOnly':
+		case 'number':
+		case 'altNumber':
+		case 'artFileName':
+		case 'size':
+		case 'textScale':
+		case 'isVariantOf':
+		case 'minX':
+		case 'minY':
+		case 'maxX':
+		case 'maxY':
+			return undefined;
+		case 'line1':
+		case 'line2':
+			return value ?? undefined;  // Omit null values.
+		case 'imageUrl':
+			// Custom cards store image data here, so include it if it is a data URI.
+			return value && (<string> value).startsWith('data:') ? value : undefined;
+		default:
+			return value;
+	}
+}
+
+function serialiseDecks(decks: SavedDeck[]) {
+	let customCards: {[key: number]: Card} | null = null;
+	for (const deck of decks) {
+		for (const number of deck.cards) {
+			if (number <= CUSTOM_CARD_START) {
+				customCards ??= { };
+				customCards[number] = cardDatabase.customCards[CUSTOM_CARD_START - number];
+			}
+		}
+	}
+	return JSON.stringify(customCards != null ? { decks, customCards } : decks, deckExportJsonReplacer);
+}
+
 deckExportButton.addEventListener('click', () => {
 	if (selectedDeck == null) return;
-	const json = JSON.stringify(selectedDeck, [ 'name', 'cards', 'sleeves', 'upgrades' ]);
+	const json = serialiseDecks([ selectedDeck ]);
 	deckExportTextBox.value = json;
 	deckExportCopyButton.innerText = 'Copy';
 	deckExportDialog.showModal();
@ -408,7 +483,7 @@ deckRenameButton.addEventListener('click', () => {

 deckCopyButton.addEventListener('click', () => {
 	if (selectedDeck == null) return;
-	importDecks([ new SavedDeck(`${selectedDeck.name} - Copy`, selectedDeck.sleeves, Array.from(selectedDeck.cards), Array.from(selectedDeck.upgrades), false) ]);
+	importDecks({ decks: [ new SavedDeck(`${selectedDeck.name} - Copy`, selectedDeck.sleeves, Array.from(selectedDeck.cards), Array.from(selectedDeck.upgrades), false) ] });
 });

 deckDeleteButton.addEventListener('click', () => {
@ -453,7 +528,7 @@ deckImportFileBox.addEventListener('change', async () => {
 	if (deckImportFileBox.files && deckImportFileBox.files.length > 0) {
 		try {
 			const bitmaps = await Promise.all(Array.from(deckImportFileBox.files, f => createImageBitmap(f)));
-			importDecks(bitmaps.map(getCardListFromImageBitmap));
+			importDecks({ decks: bitmaps.map(getCardListFromImageBitmap) });
 			deckImportDialog.close();
 		} catch (ex: any) {
 			deckImportErrorBox.innerText = ex.message;
@ -464,7 +539,7 @@ deckImportFileBox.addEventListener('change', async () => {
 });

 deckExportAllButton.addEventListener('click', () => {
-	const json = JSON.stringify(decks.filter(d => !d.isReadOnly), [ 'name', 'cards', 'sleeves', 'upgrades' ]);
+	const json = serialiseDecks(decks.filter(d => !d.isReadOnly));
 	deckExportTextBox.value = json;
 	deckExportCopyButton.innerText = 'Copy';
 	deckExportDialog.showModal();
--- a/TableturfBattleClient/src/Pages/GalleryPage.ts
+++ b/TableturfBattleClient/src/Pages/GalleryPage.ts
@ -0,0 +1,658 @@
+const galleryCardList = CardList.fromId<CardDisplay>('galleryCardList', 'gallerySortBox', 'galleryFilterBox');
+const galleryBackButton = document.getElementById('galleryBackButton') as HTMLLinkElement;
+const galleryCardDialog = document.getElementById('galleryCardDialog') as HTMLDialogElement;
+const galleryCardDeleteDialog = document.getElementById('galleryCardDeleteDialog') as HTMLDialogElement;
+
+const galleryNewCustomCardButton = document.getElementById('galleryNewCustomCardButton') as HTMLButtonElement;
+const galleryChecklistBox = document.getElementById('galleryChecklistBox') as HTMLInputElement;
+const bitsToCompleteField = document.getElementById('bitsToCompleteField') as HTMLElement;
+
+let galleryCardDisplay: CardDisplay | null = null;
+let gallerySelectedCardDisplay: CardDisplay | null = null;
+const galleryCardEditor = document.getElementById('galleryCardEditor') as HTMLButtonElement;
+const galleryCardEditorImageFile = document.getElementById('galleryCardEditorImageFile') as HTMLInputElement;
+const galleryCardEditorImageSelectButton = document.getElementById('galleryCardEditorImageSelectButton') as HTMLButtonElement;
+const galleryCardEditorImageClearButton = document.getElementById('galleryCardEditorImageClearButton') as HTMLButtonElement;
+const galleryCardEditorRarityBox = document.getElementById('galleryCardEditorRarityBox') as HTMLSelectElement;
+const galleryCardEditorColour1 = document.getElementById('galleryCardEditorColour1') as HTMLInputElement;
+const galleryCardEditorColour2 = document.getElementById('galleryCardEditorColour2') as HTMLInputElement;
+const galleryCardEditorColourPresetBox = document.getElementById('galleryCardEditorColourPresetBox') as HTMLSelectElement;
+const galleryCardEditorName = document.getElementById('galleryCardEditorName') as HTMLTextAreaElement;
+const galleryCardEditorGridButtons: HTMLButtonElement[][] = [ ];
+const galleryCardEditorSpecialCostButtons: HTMLButtonElement[] = [ ];
+const galleryCardEditorSpecialCost = document.getElementById('galleryCardEditorSpecialCost') as HTMLElement;
+const galleryCardEditorSpecialCostDefaultBox = document.getElementById('galleryCardEditorSpecialCostDefaultBox') as HTMLInputElement;
+const galleryCardEditorEditButton = document.getElementById('galleryCardEditorEditButton') as HTMLButtonElement;
+const galleryCardEditorSubmitButton = document.getElementById('galleryCardEditorSubmitButton') as HTMLButtonElement;
+const galleryCardEditorDeleteButton = document.getElementById('galleryCardEditorDeleteButton') as HTMLButtonElement;
+const galleryCardEditorSnapshotButton = document.getElementById('galleryCardEditorSnapshotButton') as HTMLButtonElement;
+const galleryCardEditorCancelButton = document.getElementById('galleryCardEditorCancelButton') as HTMLButtonElement;
+const galleryCardEditorDeleteYesButton = document.getElementById('galleryCardEditorDeleteYesButton') as HTMLButtonElement;
+
+const colourPresets: {[key: string]: [ Colour, Colour ]} = {
+	"Default": [ Card.DEFAULT_INK_COLOUR_1, Card.DEFAULT_INK_COLOUR_2 ],
+	"Octarian": [ { r: 121, g: 111, b: 174 }, { r: 166, g: 105, b: 169 } ],
+	"Salmonid": [ { r: 193, g: 111, b: 98 }, { r: 84, g: 142, b: 122 } ],
+};
+
+const ownedCards: {[key: number]: number} = { 6: 0, 34: 0, 159: 0, 13: 0, 45: 0, 137: 0, 22: 0, 52: 0, 141: 0, 28: 0, 55: 0, 103: 0, 40: 0, 56: 0, 92: 0 };
+let lastGridButton: HTMLButtonElement | null = null;
+let customCardSize = 0;
+let customCardSpecialCost = 0;
+
+function showCardList() {
+	showPage('gallery');
+}
+
+function galleryInitCardDatabase(cards: Card[]) {
+	for (const card of cards.concat(cardDatabase.customCards)) {
+		addCardToGallery(card);
+	}
+	updateBitsToComplete();
+}
+
+function addCardToGallery(card: Card) {
+	const display = createGalleryCardDisplay(card);
+	galleryCardList.add(display);
+}
+
+function createGalleryCardDisplay(card: Card) {
+	const display = new CardDisplay(card, 1, 'button');
+
+	const cardNumber = document.createElement('div');
+	cardNumber.className = 'cardNumber';
+	cardNumber.innerText = card.number >= 0 ? `No. ${card.number}` : card.isCustom ? 'Custom' : 'Upcoming';
+	display.element.insertBefore(cardNumber, display.element.firstChild);
+
+	display.element.addEventListener('click', () => {
+		if (galleryChecklistBox.checked) {
+			if (card.number <= 0) return;
+			if (card.number in ownedCards) {
+				delete ownedCards[card.number];
+				display.element.classList.add('unowned');
+			} else {
+				ownedCards[card.number] = 0;
+				display.element.classList.remove('unowned');
+			}
+			updateBitsToComplete();
+			saveChecklist();
+		} else {
+			gallerySelectedCardDisplay = display;
+			openGalleryCardView(card);
+		}
+	});
+
+	return display;
+}
+
+function updateCardInGallery(card: Card) {
+	const display = createGalleryCardDisplay(card);
+	galleryCardList.update(display, card);
+}
+
+function openGalleryCardView(card: Card) {
+	const existingEl = galleryCardDialog.firstElementChild;
+	if (existingEl && existingEl.tagName != 'FORM')
+		galleryCardDialog.removeChild(existingEl);
+	const display = new CardDisplay(card, 1);
+	galleryCardDisplay = display;
+	galleryCardDialog.insertBefore(display.element, galleryCardDialog.firstChild);
+
+	galleryCardEditor.parentElement?.removeChild(galleryCardEditor);
+	display.element.appendChild(galleryCardEditor);
+	galleryCardEditor.hidden = true;
+	display.element.classList.remove('editing');
+	galleryCardEditorEditButton.hidden = !card.isCustom;
+	galleryCardEditorDeleteButton.hidden = !card.isCustom;
+	galleryCardEditorSubmitButton.hidden = true;
+	galleryCardEditorCancelButton.innerText = 'Close';
+
+	if (card.isCustom) {
+		galleryCardEditorRarityBox.value = card.rarity.toString();
+		galleryCardEditorColour1.value = `#${card.inkColour1.r.toString(16).padStart(2, '0')}${card.inkColour1.g.toString(16).padStart(2, '0')}${card.inkColour1.b.toString(16).padStart(2, '0')}`;
+		galleryCardEditorColour2.value = `#${card.inkColour2.r.toString(16).padStart(2, '0')}${card.inkColour2.g.toString(16).padStart(2, '0')}${card.inkColour2.b.toString(16).padStart(2, '0')}`;
+		updateSelectedPreset([card.inkColour1, card.inkColour2]);
+
+		galleryCardEditorName.value = card.line2 == null ? card.name : `${card.line1}\n${card.line2}`;
+
+		let size = 0; let hasSpecialSpace = false;
+		for (let y = 0; y < 8; y++) {
+			for (let x = 0; x < 8; x++) {
+				galleryCardEditorGridButtons[y][x].dataset.state = card.grid[y][x].toString();
+				switch (card.grid[y][x]) {
+					case Space.Ink1:
+						size++;
+						break;
+					case Space.SpecialInactive1:
+						size++;
+						hasSpecialSpace = true;
+						break;
+				}
+			}
+		}
+
+		let defaultSpecialCost =
+			size <= 3 ? 1
+				: size <= 5 ? 2
+					: size <= 8 ? 3
+						: size <= 11 ? 4
+							: size <= 15 ? 5
+								: 6;
+		if (!hasSpecialSpace && defaultSpecialCost > 3)
+			defaultSpecialCost = 3;
+
+		galleryCardEditorSpecialCostDefaultBox.checked = card.specialCost == defaultSpecialCost;
+		customCardSpecialCost = card.specialCost;
+		for (let i = 0; i < galleryCardEditorSpecialCostButtons.length; i++) {
+			const button = galleryCardEditorSpecialCostButtons[i];
+			if (parseInt(button.dataset.value!) <= card.specialCost)
+				button.classList.add('active');
+			else
+				button.classList.remove('active');
+		}
+
+		updateCustomCardSize();
+	}
+
+	galleryCardDialog.showModal();
+}
+
+function updateSelectedPreset(selectedColours: Colour[]) {
+	for (const key in colourPresets) {
+		const colours = colourPresets[key];
+		if (selectedColours[0].r == colours[0].r && selectedColours[0].g == colours[0].g && selectedColours[0].b == colours[0].b
+			&& selectedColours[1].r == colours[1].r && selectedColours[1].g == colours[1].g && selectedColours[1].b == colours[1].b) {
+			galleryCardEditorColourPresetBox.value = key;
+			return;
+		}
+	}
+	galleryCardEditorColourPresetBox.value = 'Custom';
+}
+
+function startEditingCustomCard() {
+	galleryCardEditor.hidden = false;
+	galleryCardDisplay?.element.classList.add('editing');
+	galleryCardEditorEditButton.hidden = true;
+	galleryCardEditorDeleteButton.hidden = true;
+	galleryCardEditorSubmitButton.hidden = false;
+	galleryCardEditorCancelButton.innerText = 'Cancel';
+}
+
+galleryBackButton.addEventListener('click', e => {
+	e.preventDefault();
+	showPage('preGame');
+
+	if (canPushState) {
+		try {
+			history.pushState(null, '', '.');
+		} catch {
+			canPushState = false;
+		}
+	}
+	if (location.hash)
+		location.hash = '';
+});
+
+galleryChecklistBox.addEventListener('change', () => {
+	if (galleryChecklistBox.checked) {
+		for (const cardDisplay of galleryCardList.cardButtons) {
+			if (cardDisplay.card.number in ownedCards)
+				cardDisplay.element.classList.remove('unowned');
+			else
+				cardDisplay.element.classList.add('unowned');
+		}
+	} else {
+		for (const cardDisplay of galleryCardList.cardButtons)
+			cardDisplay.element.classList.remove('unowned');
+	}
+});
+
+function updateBitsToComplete() {
+	if (!cardDatabase.cards) throw new Error('Card database not loaded');
+	let bitsRequired = 0;
+	for (const card of cardDatabase.cards) {
+		if (card.isUpcoming || card.number in ownedCards) continue;
+		switch (card.rarity) {
+			case Rarity.Fresh: bitsRequired += 40; break;
+			case Rarity.Rare: bitsRequired += 15; break;
+			default: bitsRequired += 5; break;
+		}
+	}
+	bitsToCompleteField.innerText = bitsRequired.toString();
+}
+
+{
+	for (var i = 0; ; i++) {
+		if (!(i in Rarity)) break;
+		const option = document.createElement('option');
+		option.value = i.toString();
+		option.innerText = Rarity[i];
+		galleryCardEditorRarityBox.appendChild(option);
+	}
+
+	for (const k in colourPresets) {
+		const option = document.createElement('option');
+		option.innerText = k;
+		galleryCardEditorColourPresetBox.appendChild(option);
+	}
+	const optionCustom = document.createElement('option');
+	optionCustom.innerText = 'Custom';
+	galleryCardEditorColourPresetBox.appendChild(optionCustom);
+
+	for (let x = 0; x < 8; x++) {
+		const row = [ ];
+		for (let y = 0; y < 8; y++) {
+			const button = document.createElement('button');
+			button.type = 'button';
+			button.dataset.state = Space.Empty.toString();
+			button.dataset.x = x.toString();
+			button.dataset.y = y.toString();
+			button.addEventListener('click', () => {
+				const state = parseInt(button.dataset.state ?? '0');
+				switch (state) {
+					case Space.Empty:
+						button.dataset.state = Space.Ink1.toString();
+						break;
+					case Space.Ink1:
+						if (lastGridButton == button) {
+							// When a space is pressed twice, move the special space there.
+							for (const row of galleryCardEditorGridButtons) {
+								for (const button2 of row) {
+									if (button2 == button)
+										button2.dataset.state = Space.SpecialInactive1.toString();
+									else if (button2.dataset.state == Space.SpecialInactive1.toString())
+										button2.dataset.state = Space.Ink1.toString();
+								}
+							}
+						} else
+							button.dataset.state = Space.Empty.toString();
+						break;
+					default:
+						button.dataset.state = Space.Empty.toString();
+						break;
+				}
+				lastGridButton = button;
+
+				updateCustomCardSize();
+			});
+			row.push(button);
+		}
+		galleryCardEditorGridButtons.push(row);
+	}
+
+	const galleryCardEditorGrid = document.getElementById('galleryCardEditorGrid')!;
+	for (let y = 0; y < 8; y++) {
+		for (let x = 0; x < 8; x++) {
+			galleryCardEditorGrid.appendChild(galleryCardEditorGridButtons[x][y]);
+		}
+	}
+
+	// Load the saved checklist and custom cards.
+	const checklistString = localStorage.getItem('checklist');
+	if (checklistString) {
+		const cards = JSON.parse(checklistString);
+		Object.assign(ownedCards, cards);
+	}
+
+	const customCardsString = localStorage.getItem('customCards');
+	if (customCardsString) {
+		for (const cardJson of JSON.parse(customCardsString)) {
+			cardDatabase.customCards.push(Card.fromJson(cardJson));
+		}
+		cardDatabase.customCardsModified = cardDatabase.customCards.length > 0;
+	}
+}
+
+for (let i = 0; i < 10; i++) {
+	const button = document.createElement('button');
+	const n = i < 5 ? i + 6 : i - 4;
+	button.dataset.value = n.toString();
+	galleryCardEditorSpecialCost.appendChild(button);
+	galleryCardEditorSpecialCostButtons.push(button);
+	button.addEventListener('click', () => {
+		customCardSpecialCost = n;
+		galleryCardEditorSpecialCostDefaultBox.checked = false;
+		updateCustomCardSpecialCost();
+	});
+}
+
+function updateCustomCardSize() {
+	let size = 0, hasSpecialSpace = false;
+	for (const row of galleryCardEditorGridButtons) {
+		for (const button2 of row) {
+			switch (parseInt(button2.dataset.state!)) {
+				case Space.Ink1:
+					size++;
+					break;
+				case Space.SpecialInactive1:
+					size++;
+					hasSpecialSpace = true;
+					break;
+			}
+		}
+	}
+
+	customCardSize = size;
+	galleryCardDisplay!.setSize(size);
+	if (galleryCardEditorSpecialCostDefaultBox.checked) {
+		customCardSpecialCost =
+			size <= 3 ? 1
+				: size <= 5 ? 2
+					: size <= 8 ? 3
+						: size <= 11 ? 4
+							: size <= 15 ? 5
+								: 6;
+		if (!hasSpecialSpace && customCardSpecialCost > 3)
+			customCardSpecialCost = 3;
+		updateCustomCardSpecialCost();
+	}
+}
+
+function updateCustomCardSpecialCost() {
+	galleryCardDisplay?.setSpecialCost(customCardSpecialCost);
+	for (let i = 0; i < galleryCardEditorSpecialCostButtons.length; i++) {
+		const button = galleryCardEditorSpecialCostButtons[i];
+		if (parseInt(button.dataset.value!) <= customCardSpecialCost)
+			button.classList.add('active');
+		else
+			button.classList.remove('active');
+	}
+}
+
+galleryCardEditorImageSelectButton.addEventListener('click', () => galleryCardEditorImageFile.click());
+
+galleryCardEditorImageFile.addEventListener('change', async () => {
+	if (galleryCardEditorImageFile.files?.length != 1) return;
+	const originalImage = await createImageBitmap(galleryCardEditorImageFile.files[0]);
+	var blob = <Blob> galleryCardEditorImageFile.files[0];
+	if (originalImage.width > 635 || originalImage.height > 885) {
+		// The entire image will be stored in local storage as a data URI, so downscale larger images.
+		var width = originalImage.width, height = originalImage.height;
+		const ratio1 = 635 / width, ratio2 = 885 / height;
+		if (ratio1 < ratio2) {
+			width = 635;
+			height *= ratio1;
+		} else {
+			height = 885;
+			width *= ratio2;
+		}
+		const canvas = new OffscreenCanvas(width, height);
+		const ctx = canvas.getContext('2d')!;
+		ctx.drawImage(originalImage, 0, 0, width, height);
+		blob = await canvas.convertToBlob({ type: 'image/webp' });
+	}
+
+	// Load image data from the original file or rescaled blob and store it in a data URI.
+	const url = await new Promise<string>((resolve, _) => {
+		const reader = new FileReader();
+		reader.onloadend = () => resolve(<string> reader.result);
+		reader.readAsDataURL(blob);
+	});
+
+	const display = galleryCardDisplay!;
+	var image = (<SVGImageElement | undefined> display.element.getElementsByClassName('cardArt')[0]);
+	if (!image) {
+		const grid = display.svg.getElementsByClassName('cardGrid')[0];
+
+		image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+		image.setAttribute('class', 'cardArt');
+		image.setAttribute('width', '100%');
+		image.setAttribute('height', '100%');
+		display.svg.insertBefore(image, grid);
+	}
+	image.setAttribute('href', url);
+});
+
+galleryCardEditorImageClearButton.addEventListener('click', async () => {
+	const display = galleryCardDisplay!;
+	const image = <SVGImageElement | undefined> display.svg.getElementsByClassName('cardArt')[0];
+	if (image) display.svg.removeChild(image);
+});
+
+
+galleryCardEditorRarityBox.addEventListener('change', () => {
+	const display = galleryCardDisplay!;
+	display.element.classList.remove('common');
+	display.element.classList.remove('rare');
+	display.element.classList.remove('fresh');
+	display.element.classList.add(Rarity[parseInt(galleryCardEditorRarityBox.value)].toLowerCase());
+
+	const sizeImage = <SVGImageElement> display.svg.getElementsByClassName('cardSizeBackground')[0];
+	sizeImage.setAttribute('href', `assets/external/CardCost_0${galleryCardEditorRarityBox.value}.webp`);
+
+	const backgroundImage = <SVGImageElement> display.svg.getElementsByClassName('cardDisplayBackground')[0];
+	backgroundImage.setAttribute('href', `assets/external/CardBackground-custom-${galleryCardEditorRarityBox.value}-1.webp`);
+});
+
+galleryCardEditorColour1.addEventListener('change', galleryCardEditorColour_change);
+galleryCardEditorColour2.addEventListener('change', galleryCardEditorColour_change);
+
+function galleryCardEditorColour_change() {
+	const display = galleryCardDisplay!;
+	const filter = display.svg.getElementsByClassName('inkFilter')[0];
+	const selectedColours = [];
+
+	for (let i = 0; i < 2; i++) {
+		const value = [galleryCardEditorColour1, galleryCardEditorColour2][i].value;
+		const colour = { r: parseInt(value.substring(1, 3), 16), g: parseInt(value.substring(3, 5), 16), b: parseInt(value.substring(5, 7), 16) };
+		selectedColours.push(colour);
+	}
+
+	const r1 = selectedColours[0].r / 255;
+	const g1 = selectedColours[0].g / 255;
+	const b1 = selectedColours[0].b / 255;
+	const dr = (selectedColours[1].r - selectedColours[0].r) / 255;
+	const dg = (selectedColours[1].g - selectedColours[0].g) / 255;
+	const db = (selectedColours[1].b - selectedColours[0].b) / 255;
+	filter.getElementsByTagName('feColorMatrix')[0].setAttribute('values', `${dr} 0 0 0 ${r1} 0 ${dg} 0 0 ${g1} 0 0 ${db} 0 ${b1} 0 0 0 0.88 0`);
+
+	updateSelectedPreset(selectedColours);
+}
+
+galleryCardEditorColourPresetBox.addEventListener('change', () => {
+	const preset = colourPresets[galleryCardEditorColourPresetBox.value];
+	if (!preset) return;
+
+	galleryCardEditorColour1.value = `#${preset[0].r.toString(16).padStart(2, '0')}${preset[0].g.toString(16).padStart(2, '0')}${preset[0].b.toString(16).padStart(2, '0')}`;
+	galleryCardEditorColour2.value = `#${preset[1].r.toString(16).padStart(2, '0')}${preset[1].g.toString(16).padStart(2, '0')}${preset[1].b.toString(16).padStart(2, '0')}`;
+	galleryCardEditorColour_change();
+});
+
+galleryCardEditorSpecialCostDefaultBox.addEventListener('change', () => {
+	if (galleryCardEditorSpecialCostDefaultBox.checked)
+		updateCustomCardSize();
+});
+
+galleryCardEditorEditButton.addEventListener('click', () => startEditingCustomCard());
+
+galleryNewCustomCardButton.addEventListener('click', () => {
+	const card = new Card(UNSAVED_CUSTOM_CARD_INDEX, 'New card', 'New card', null, Card.DEFAULT_INK_COLOUR_1, Card.DEFAULT_INK_COLOUR_2, Rarity.Common, 1, Array.from({ length: 8 }, () => [ 0, 0, 0, 0, 0, 0, 0, 0]) );
+	openGalleryCardView(card);
+	startEditingCustomCard();
+});
+
+galleryCardEditorSubmitButton.addEventListener('click', () => {
+	function parseColour(value: string) { return { r: parseInt(value.substring(1, 3), 16), g: parseInt(value.substring(3, 5), 16), b: parseInt(value.substring(5, 7), 16) }; }
+
+	const isNew = galleryCardDisplay!.card.number == UNSAVED_CUSTOM_CARD_INDEX;
+	const number = isNew ? CUSTOM_CARD_START - cardDatabase.customCards.length : galleryCardDisplay!.card.number;
+	const lines = Card.wrapName(galleryCardEditorName.value);
+	const card = new Card(number, galleryCardEditorName.value.replaceAll('\n', ' '), lines[0], lines[1], parseColour(galleryCardEditorColour1.value), parseColour(galleryCardEditorColour2.value),
+		<Rarity> parseInt(galleryCardEditorRarityBox.value), customCardSpecialCost, Array.from(galleryCardEditorGridButtons, r => Array.from(r, b => parseInt(b.dataset.state!))));
+
+	const image = <SVGImageElement | undefined> galleryCardDisplay!.svg.getElementsByClassName('cardArt')[0];
+	if (image) card.imageUrl = image.href.baseVal;
+
+	if (isNew) {
+		cardDatabase.customCards.push(card);
+		addCardToGallery(card);
+	} else {
+		cardDatabase.customCards[CUSTOM_CARD_START - number] = card;
+		updateCardInGallery(card);
+	}
+	cardDatabase.customCardsModified = true;
+	saveCustomCards();
+});
+
+galleryCardEditorDeleteButton.addEventListener('click', () => {
+	const label = galleryCardDeleteDialog.firstElementChild as HTMLElement;
+	label.innerText = `Are you sure you want to delete the custom card ${galleryCardDisplay!.card.name}?\nThis cannot be undone!`;
+	galleryCardDeleteDialog.showModal();
+});
+
+galleryCardEditorDeleteYesButton.addEventListener('click', () => {
+	const card = galleryCardDisplay!.card;
+	galleryCardList.remove(card);
+	galleryCardDialog.close();
+
+	let i = cardDatabase.customCards.indexOf(card);
+	if (i < 0) return;
+
+	// Remove the card from decks and update other custom card numbers.
+	for (const deck of decks) {
+		for (let i = 0; i < deck.cards.length; i++) {
+			if (deck.cards[i] == card.number)
+				deck.cards[i] = 0;
+			else if (deck.cards[i] < card.number)
+				deck.cards[i]++;
+		}
+	}
+
+	// Update the custom cards list.
+	cardDatabase.customCards.splice(i, 1);
+	for (; i < cardDatabase.customCards.length; i++)
+		cardDatabase.customCards[i].number++;
+
+	saveCustomCards();
+	saveDecks();
+});
+
+galleryCardEditorSnapshotButton.addEventListener('click', async () => {
+	//const canvas = new OffscreenCanvas(635, 885);
+	const card = galleryCardDisplay!.card;
+	const canvas = document.createElement('canvas');
+	canvas.id = 'cardSnapshotCanvas';
+	canvas.width = 442; canvas.height = 616; //canvas.setAttribute('style', 'position: absolute; left: 0; top: 0; width: 100%;');
+	//galleryCardDisplay!.svg.parentElement!.appendChild(canvas);
+	const ctx = canvas.getContext('2d')!;
+
+	function toPx(length: SVGLength, referenceLength: number) {
+		switch (length.unitType) {
+			case SVGLength.SVG_LENGTHTYPE_NUMBER:
+			case SVGLength.SVG_LENGTHTYPE_PX:
+				return length.valueInSpecifiedUnits;
+			case SVGLength.SVG_LENGTHTYPE_PERCENTAGE:
+				return length.valueInSpecifiedUnits * referenceLength / 100;
+			default:
+				throw new Error(`Unknown unit type: ${length.unitType}`);
+		}
+	}
+
+	function drawElements(parent: SVGElement) {
+		for (const node of parent.childNodes) {
+			if (!(node instanceof SVGGraphicsElement)) continue;
+			const el = <SVGGraphicsElement> node;
+
+			if (el.transform.baseVal.length > 0) {
+				const transformAboutCentre = el.getAttribute('transform-origin') == 'center';
+				if (transformAboutCentre) ctx.translate(canvas.width / 2, canvas.height / 2);
+				for (const transformElement of el.transform.baseVal) {
+					const matrix = transformElement.matrix;
+					ctx.transform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f);
+				}
+				if (transformAboutCentre) ctx.translate(-canvas.width / 2, -canvas.height / 2);
+			}
+
+			if (el instanceof SVGGElement) {
+				drawElements(el);
+			} else if (el instanceof SVGImageElement) {
+				ctx.save();
+				ctx.filter = el.getAttribute('filter') ?? 'none';
+				if (el.hasAttribute('clip-path')) {
+					ctx.beginPath();
+					ctx.roundRect(canvas.width * 19 / 442, canvas.height * 20 / 616, canvas.width * 404 / 442, canvas.height * 576 / 616, canvas.width * 18 / 442);
+					ctx.clip();
+				}
+				ctx.drawImage(<SVGImageElement> el, el.x.baseVal.value, el.y.baseVal.value, toPx(el.width.baseVal, canvas.width), toPx(el.height.baseVal, canvas.height));
+				ctx.filter = 'none';
+				ctx.restore();
+			} else if (el instanceof SVGRectElement) {
+				if (el.classList[0] == 'empty') {
+					ctx.fillStyle = '#00000080';
+					ctx.strokeStyle = '#60606080';
+					ctx.lineWidth = 6;
+					ctx.strokeRect(toPx(el.x.baseVal, canvas.width), toPx(el.y.baseVal, canvas.height), toPx(el.width.baseVal, canvas.width), toPx(el.height.baseVal, canvas.height));
+				} else if (el.classList[0] == 'ink') {
+					ctx.fillStyle = document.body.style.getPropertyValue('--primary-colour-1');
+				} else {
+					ctx.fillStyle = document.body.style.getPropertyValue('--special-colour-1');
+				}
+				ctx.fillRect(toPx(el.x.baseVal, canvas.width), toPx(el.y.baseVal, canvas.height), toPx(el.width.baseVal, canvas.width), toPx(el.height.baseVal, canvas.height));
+			} else if (el instanceof SVGTextElement) {
+				const text = <SVGTextElement> el;
+				ctx.textAlign = 'center';
+
+				switch (text.classList.contains('cardDisplayName') ? card.rarity : Rarity.Common) {
+					case Rarity.Rare:
+						const rareGradient = ctx.createLinearGradient(canvas.width * 0.029, canvas.height * 0.273, canvas.width * 1.081, canvas.height * 0.041);
+						rareGradient.addColorStop(0, '#E0AE12');
+						rareGradient.addColorStop(0.25, '#FBFFCC');
+						rareGradient.addColorStop(0.5, '#E0AE12');
+						rareGradient.addColorStop(0.75, '#FBFFCC');
+						rareGradient.addColorStop(1, '#E0AE12');
+						ctx.fillStyle = rareGradient;
+						break;
+					case Rarity.Fresh:
+						const freshGradient = ctx.createLinearGradient(canvas.width * (0.5 - 0.325 / card.textScale), canvas.height * -0.025, canvas.width * (0.5 + 0.335 / card.textScale), canvas.height * 0.32);
+						freshGradient.addColorStop(0, '#FF93DD');
+						freshGradient.addColorStop(0.2, '#FEF499');
+						freshGradient.addColorStop(0.5, '#C9448A');
+						freshGradient.addColorStop(0.75, '#1EFBC3');
+						freshGradient.addColorStop(0.95, '#FD97DB');
+						freshGradient.addColorStop(1, '#FFBAC2');
+						ctx.fillStyle = freshGradient;
+						break;
+					default:
+						ctx.fillStyle = text.getAttribute('fill')!;
+						break;
+				}
+
+				ctx.strokeStyle = text.getAttribute('stroke')!;
+				ctx.lineWidth = parseFloat(text.getAttribute('stroke-width')!);
+				ctx.font = `bold ${text.getAttribute('font-size')!}px 'Splatoon 1'`;
+				(<any> ctx).wordSpacing = `${text.getAttribute('word-spacing') ?? '0'}px`;
+				for (const node2 of text.childNodes) {
+					const textContent = node2.textContent!;
+					if (node2 instanceof CharacterData) {
+						ctx.strokeText(textContent, toPx(text.x.baseVal[0], canvas.width), toPx(text.y.baseVal[0], canvas.height));
+						ctx.fillText(textContent, toPx(text.x.baseVal[0], canvas.width), toPx(text.y.baseVal[0], canvas.height));
+					} else if (node2 instanceof SVGTSpanElement) {
+						const tspan = <SVGTSpanElement> node2;
+						ctx.strokeText(textContent, toPx(text.x.baseVal[0], canvas.width), toPx(tspan.y.baseVal[0], canvas.height));
+						ctx.fillText(textContent, toPx(text.x.baseVal[0], canvas.width), toPx(tspan.y.baseVal[0], canvas.height));
+					}
+				}
+			}
+
+			if (el.transform.baseVal.length > 0) ctx.resetTransform();
+		}
+	}
+
+	drawElements(galleryCardDisplay!.svg);
+
+	canvas.toBlob(blob => {
+		if (blob == null) {
+			alert('Could not create the image.');
+			return;
+		}
+		const url = URL.createObjectURL(blob);
+		try {
+			const link = document.createElement('a');
+			link.href = url;
+			link.download = 'card.png';
+			link.click();
+		} finally {
+			URL.revokeObjectURL(url);
+		}
+	});
+});
--- a/TableturfBattleClient/src/Pages/GamePage.ts
+++ b/TableturfBattleClient/src/Pages/GamePage.ts
@ -47,7 +47,7 @@ playContainers.sort((a, b) => parseInt(a.dataset.index || '0') - parseInt(b.data

 const testControls = document.getElementById('testControls')!;
 const testDeckList = document.getElementById('testDeckList')!;
-const testAllCardsList = CardList.fromId('testAllCardsList', 'testAllCardsListSortBox', 'testAllCardsListFilterBox');
+const testAllCardsList = CardList.fromId<CardButton>('testAllCardsList', 'testAllCardsListSortBox', 'testAllCardsListFilterBox');
 const testPlacementList = document.getElementById('testPlacementList')!;
 const testDeckButton = CheckButton.fromId('testDeckButton');
 const testDeckContainer = document.getElementById('testDeckContainer')!;
@ -59,6 +59,7 @@ const testCardButtonGroup = new CheckButtonGroup<Card>();
 const testDeckCardButtons: CardButton[] = [ ];
 const testPlacements: { card: Card, placementResults: PlacementResults }[] = [ ];
 const testCardListBackdrop = document.getElementById('testCardListBackdrop')!;
+let testPlacementButtonClicked = false;

 let playHintHtml: string | null = null;

@ -123,6 +124,7 @@ function initSpectator() {
 	flipButton.hidden = false;
 	gameButtonsContainer.hidden = false;
 	board.autoHighlight = false;
+	board.flip = false;
 	showPage('game');
 }

@ -140,6 +142,7 @@ function initReplay() {
 	flipButton.hidden = false;
 	gameButtonsContainer.hidden = false;
 	gamePage.dataset.myPlayerIndex = '0';
+	board.flip = false;
 	updateColours();
 	gamePage.dataset.uiBaseColourIsSpecialColour = (userConfig.colourLock || (currentGame!.game.players[0].uiBaseColourIsSpecialColour ?? true)).toString();
 	canPlay = false;
@ -155,7 +158,8 @@ function initTest(stage: Stage) {
 	clear();
 	testMode = true;
 	gamePage.classList.add('deckTest');
-	currentGame = { id: 'test', game: { state: GameState.Ongoing, maxPlayers: 2, players: [ ], turnNumber: 1, turnTimeLimit: null, turnTimeLeft: null, goalWinCount: null }, me: { playerIndex: 0, move: null, deck: null, hand: null, cardsUsed: [ ], stageSelectionPrompt: null }, webSocket: null };
+	currentGame = { id: 'test', game: { state: GameState.Ongoing, maxPlayers: 2, players: [ ], turnNumber: 1, turnTimeLimit: null, turnTimeLeft: null, goalWinCount: null, allowUpcomingCards: true, allowCustomCards: true }, me: { playerIndex: 0, move: null, deck: null, hand: null, cardsUsed: [ ], stageSelectionPrompt: null }, isHost: false, webSocket: null };
+	board.flip = false;
 	board.resize(stage.copyGrid());
 	const startSpaces = stage.getStartSpaces(2);
 	board.startSpaces = startSpaces;
@ -170,8 +174,7 @@ function initTest(stage: Stage) {
 	testPlacements.splice(0);
 	testUndoButton.enabled = false;
 	clearChildren(testPlacementList);
-	gamePage.dataset.myPlayerIndex = '0';
-	gamePage.dataset.uiBaseColourIsSpecialColour = uiBaseColourIsSpecialColourOutOfGame.toString();
+
 	gameButtonsContainer.hidden = false;
 	testControls.hidden = false;
 	clearPlayContainers();
@ -187,6 +190,27 @@ function initTest(stage: Stage) {
 		button.enabled = true;
 }

+function swapColours() {
+	// Swap colours to preserve the player's ink colour.
+	const oldPlayerIndex = parseInt(gamePage.dataset.myPlayerIndex ?? '0');
+	if (oldPlayerIndex) {
+		swapColour('primary', oldPlayerIndex);
+		swapColour('special', oldPlayerIndex);
+		swapColour('special-accent', oldPlayerIndex);
+		const temp = uiBaseColourIsSpecialColourPerPlayer[0];
+		uiBaseColourIsSpecialColourPerPlayer[0] = uiBaseColourIsSpecialColourPerPlayer[oldPlayerIndex];
+		uiBaseColourIsSpecialColourPerPlayer[oldPlayerIndex] = temp;
+	}
+	gamePage.dataset.myPlayerIndex = '0';
+	uiBaseColourIsSpecialColourOutOfGame = uiBaseColourIsSpecialColourPerPlayer[0];
+	gamePage.dataset.uiBaseColourIsSpecialColour = uiBaseColourIsSpecialColourOutOfGame.toString();
+}
+function swapColour(prefix: string, oldPlayerIndex: number) {
+	const temp = document.body.style.getPropertyValue(`--${prefix}-colour-1`);
+	document.body.style.setProperty(`--${prefix}-colour-1`, document.body.style.getPropertyValue(`--${prefix}-colour-${oldPlayerIndex + 1}`));
+	document.body.style.setProperty(`--${prefix}-colour-${oldPlayerIndex + 1}`, temp);
+}
+
 replayNextButton.buttonElement.addEventListener('click', _ => {
 	if (currentGame == null || currentReplay == null || currentGame.game.state == GameState.GameEnded || currentGame.game.state == GameState.SetEnded)
 		return;
@ -237,7 +261,9 @@ replayNextButton.buttonElement.addEventListener('click', _ => {

 		replayAnimationAbortController = new AbortController();
 		(async () => {
-			await playInkAnimations({ game: { state: GameState.Ongoing, board: null, turnNumber: currentGame.game.turnNumber, players: currentGame.game.players }, moves, placements: result.placements, specialSpacesActivated: result.specialSpacesActivated }, replayAnimationAbortController.signal);
+			const abortSignal = replayAnimationAbortController.signal;
+			await playInkAnimations({ game: { state: GameState.Ongoing, board: null, turnNumber: currentGame.game.turnNumber, players: currentGame.game.players }, moves, placements: result.placements, specialSpacesActivated: result.specialSpacesActivated }, abortSignal);
+			if (abortSignal.aborted) return;
 			turnNumberLabel.turnNumber = currentGame.game.turnNumber;
 			clearPlayContainers();
 			if (currentGame.game.turnNumber > 12) {
@ -452,9 +478,35 @@ function testCardButton_click(button: CardButton) {
 	board.table.focus();
 }

+function testPlacementListItem_click(button: HTMLButtonElement, placement: Placement) {
+	testPlacementButtonClicked = true;
+	const highlight = button.classList.toggle('testHighlight');
+	for (const p of placement.spacesAffected)
+		board.setTestHighlight(p.space.x, p.space.y, highlight);
+}
+
+function testPlacementListItem_pointerenter(button: HTMLButtonElement, placement: Placement) {
+	testPlacementButtonClicked = false;
+	if (button.classList.contains('testHighlight')) return;
+	for (const p of placement.spacesAffected)
+		board.setTestHighlight(p.space.x, p.space.y, true);
+}
+
+function testPlacementListItem_pointerleave(button: HTMLButtonElement, placement: Placement) {
+	if (testPlacementButtonClicked) return;
+	if (button.classList.contains('testHighlight')) return;
+	for (const p of placement.spacesAffected)
+		board.setTestHighlight(p.space.x, p.space.y, false);
+}
+
 testUndoButton.buttonElement.addEventListener('click', () => {
 	const turn = testPlacements.pop();
 	if (turn) {
+		// Remove the highlight if needed.
+		for (const p of turn.placementResults.placements[0].spacesAffected)
+			board.setTestHighlight(p.space.x, p.space.y, false);
+
+		// Undo the placement.
 		undoTurn(turn.placementResults);
 		testPlacementList.removeChild(testPlacementList.firstChild!);

@ -469,6 +521,7 @@ testUndoButton.buttonElement.addEventListener('click', () => {

 testBackButton.addEventListener('click', _ => {
 	showPage(editingDeck ? 'deckEdit' : 'deckList');
+	board.clearTestHighlight();
 });

 testDeckButton.buttonElement.addEventListener('click', _ => {
@ -521,9 +574,10 @@ function updateColours() {
 				updateHSL(i, j);
 				updateRGB(i, j);
 			}
+			uiBaseColourIsSpecialColourPerPlayer[i] = currentGame.game.players[i].uiBaseColourIsSpecialColour;
 		}
 	}
-	uiBaseColourIsSpecialColourOutOfGame = currentGame.game.players[0].uiBaseColourIsSpecialColour ?? true;
+	uiBaseColourIsSpecialColourOutOfGame = uiBaseColourIsSpecialColourPerPlayer[currentGame?.me?.playerIndex ?? 0];
 }

 function updateStats(playerIndex: number, scores: number[]) {
@ -1045,12 +1099,12 @@ board.onsubmit = (x, y) => {
 		if (result.specialSpacesActivated.length > 0)
 			setTimeout(() => board.refresh(), 333);

-		var li = document.createElement('div');
+		var li = document.createElement('button');
 		li.innerText = board.cardPlaying.name;
-		if (testDeckCardButtons.find(b => b.card.number == board.cardPlaying!.number))
-			li.classList.add('deckCard');
-		else
-			li.classList.add('externalCard');
+		li.classList.add(testDeckCardButtons.find(b => b.card.number == board.cardPlaying!.number) ? 'deckCard' : 'externalCard');
+		li.addEventListener('click', () => testPlacementListItem_click(li, result.placements[0]));
+		li.addEventListener('pointerenter', () => testPlacementListItem_pointerenter(li, result.placements[0]));
+		li.addEventListener('pointerleave', () => testPlacementListItem_pointerleave(li, result.placements[0]));
 		testPlacementList.insertBefore(li, testPlacementList.firstChild);

 		for (const button of testDeckCardButtons.concat(testAllCardsList.cardButtons)) {
--- a/TableturfBattleClient/src/Pages/LobbyPage.ts
+++ b/TableturfBattleClient/src/Pages/LobbyPage.ts
@ -25,6 +25,8 @@ const lobbyDeckButtons = new CheckButtonGroup<SavedDeck>(lobbyDeckList);
 const lobbyDeckSubmitButton = document.getElementById('submitDeckButton') as HTMLButtonElement;

 const lobbyTimeLimitBox = document.getElementById('lobbyTimeLimitBox') as HTMLInputElement;
+const lobbyAllowUpcomingCardsBox = document.getElementById('lobbyAllowUpcomingCardsBox') as HTMLInputElement;
+const lobbyAllowCustomCardsBox = document.getElementById('lobbyAllowCustomCardsBox') as HTMLInputElement;
 const lobbyTimeLimitUnit = document.getElementById('lobbyTimeLimitUnit')!;

 const qrCodeDialog = document.getElementById('qrCodeDialog') as HTMLDialogElement;
@ -57,6 +59,7 @@ function initLobbyPage(url: string) {
 		lobbyShareData = null;
 		shareLinkButton.innerText = 'Copy link';
 	}
+	lobbyDeckSection.hidden = true;
 }

 function showStageSelectionForm(prompt: StageSelectionPrompt | null, isReady: boolean) {
@ -72,7 +75,7 @@ function showStageSelectionForm(prompt: StageSelectionPrompt | null, isReady: bo
 	let i = -1;
 	for (const button of stageButtons.buttons) {
 		const originalClass = i < 0 ? 'stageRandom' : 'stage';
-		if (prompt.bannedStages?.includes(i)) {
+		if (i >= 0 && (currentGame!.game.maxPlayers > stageDatabase.stages![i].maxPlayers || prompt.bannedStages?.includes(i))) {
 			button.buttonElement.className = `${originalClass} banned`;
 			button.enabled = false;
 		} else if (prompt.struckStages?.includes(i)) {
@ -174,11 +177,13 @@ function lobbyResetSlots() {
 		playerListSlots.push(el);
 	}

-	lobbyLockSettings(currentGame.me?.playerIndex != 0);
+	lobbyLockSettings(!currentGame.isHost);
 }

 function lobbyLockSettings(lock: boolean) {
 	lobbyTimeLimitBox.readOnly = lock;
+	lobbyAllowUpcomingCardsBox.disabled = lock;
+	lobbyAllowCustomCardsBox.disabled = lock;
 }

 function clearReady() {
@ -289,11 +294,15 @@ function initDeckSelection() {
 			lobbyDeckButtons.add(button, deck);

 			buttonElement.addEventListener('click', () => {
-				selectedDeck = deck;
-				lobbyDeckSubmitButton.disabled = false;
+				if (button.enabled) {
+					selectedDeck = deck;
+					lobbyDeckSubmitButton.disabled = false;
+				}
 			});

-			if (!deck.isValid) {
+			if (!deck.isValid
+			|| (!currentGame.game.allowUpcomingCards && deck.cards.find(n => cardDatabase.get(n).isUpcoming))
+			|| (!currentGame.game.allowCustomCards && deck.cards.find(n => n <= CUSTOM_CARD_START))) {
 				button.enabled = false;
 			} else if (deck.name == lastDeckName) {
 				selectedDeck = deck;
@ -311,17 +320,44 @@ function initDeckSelection() {

 lobbyTimeLimitBox.addEventListener('change', () => {
 	let req = new XMLHttpRequest();
-	req.open('POST', `${config.apiBaseUrl}/games/${currentGame!.id}/setTurnTimeLimit`);
+	req.open('POST', `${config.apiBaseUrl}/games/${currentGame!.id}/setGameSettings`);
 	let data = new URLSearchParams();
 	data.append('clientToken', clientToken);
 	data.append('turnTimeLimit', lobbyTimeLimitBox.value || '');
 	req.send(data.toString());
 });

+lobbyAllowUpcomingCardsBox.addEventListener('change', () => {
+	let req = new XMLHttpRequest();
+	req.open('POST', `${config.apiBaseUrl}/games/${currentGame!.id}/setGameSettings`);
+	let data = new URLSearchParams();
+	data.append('clientToken', clientToken);
+	data.append('allowUpcomingCards', lobbyAllowUpcomingCardsBox.checked.toString());
+	req.send(data.toString());
+});
+
+lobbyAllowCustomCardsBox.addEventListener('change', () => {
+	let req = new XMLHttpRequest();
+	req.open('POST', `${config.apiBaseUrl}/games/${currentGame!.id}/setGameSettings`);
+	let data = new URLSearchParams();
+	data.append('clientToken', clientToken);
+	data.append('allowCustomCards', lobbyAllowCustomCardsBox.checked.toString());
+	req.send(data.toString());
+});
+
 deckSelectionForm.addEventListener('submit', e => {
 	e.preventDefault();
 	if (selectedDeck == null) return;

+	const customCards: {[key: number]: Card} = { };
+	let anyCustomCards = false;
+	for (const number of selectedDeck.cards) {
+		if (number <= CUSTOM_CARD_START) {
+			customCards[number] = cardDatabase.get(number);
+			anyCustomCards = true;
+		}
+	}
+
 	let req = new XMLHttpRequest();
 	req.open('POST', `${config.apiBaseUrl}/games/${currentGame!.id}/chooseDeck`);
 	req.addEventListener('load', () => {
@ -337,6 +373,8 @@ deckSelectionForm.addEventListener('submit', e => {
 	data.append('deckName', selectedDeck.name);
 	data.append('deckCards', selectedDeck.cards.join('+'));
 	data.append('deckSleeves', selectedDeck.sleeves.toString());
+	if (anyCustomCards)
+		data.append('customCards', JSON.stringify(customCards, submitCustomCardsJsonReplacer));
 	req.send(data.toString());

 	localStorage.setItem('lastDeckName', selectedDeck.name);
@ -344,6 +382,10 @@ deckSelectionForm.addEventListener('submit', e => {
 	lobbyDeckSubmitButton.disabled = true;
 });

+function submitCustomCardsJsonReplacer(key: string, value: any) {
+	return key == 'imageUrl' ? undefined : deckExportJsonReplacer(key, value);
+}
+
 stageRandomButton.buttonElement.addEventListener('click', () => {
 	stageRandomButton.checked = true;
 	stageButtons.deselect();
--- a/TableturfBattleClient/src/Pages/PreGamePage.ts
+++ b/TableturfBattleClient/src/Pages/PreGamePage.ts
@ -5,6 +5,7 @@ const joinGameButton = document.getElementById('joinGameButton')!;
 const nameBox = document.getElementById('nameBox') as HTMLInputElement;
 const gameIDBox = document.getElementById('gameIDBox') as HTMLInputElement;
 const preGameDeckEditorButton = document.getElementById('preGameDeckEditorButton') as HTMLLinkElement;
+const preGameGalleryButton = document.getElementById('preGameGalleryButton') as HTMLLinkElement;
 const preGameLoadingSection = document.getElementById('preGameLoadingSection')!;
 const preGameLoadingLabel = document.getElementById('preGameLoadingLabel')!;
 const preGameReplayButton = document.getElementById('preGameReplayButton') as HTMLLinkElement;
@ -18,6 +19,8 @@ const gameSetupForm = document.getElementById('gameSetupForm') as HTMLFormElemen
 const maxPlayersBox = document.getElementById('maxPlayersBox') as HTMLSelectElement;
 const turnTimeLimitBox = document.getElementById('turnTimeLimitBox') as HTMLInputElement;
 const goalWinCountBox = document.getElementById('goalWinCountBox') as HTMLSelectElement;
+const gameSetupAllowUpcomingCardsBox = document.getElementById('gameSetupAllowUpcomingCardsBox') as HTMLInputElement;
+const gameSetupAllowCustomCardsBox = document.getElementById('gameSetupAllowCustomCardsBox') as HTMLInputElement;
 const stageSelectionRuleFirstBox = document.getElementById('stageSelectionRuleFirstBox') as HTMLSelectElement;
 const stageSelectionRuleAfterWinBox = document.getElementById('stageSelectionRuleAfterWinBox') as HTMLSelectElement;
 const stageSelectionRuleAfterDrawBox = document.getElementById('stageSelectionRuleAfterDrawBox') as HTMLSelectElement;
@ -28,9 +31,23 @@ const gameSetupSpectateBox = document.getElementById('gameSetupSpectateBox') as
 const gameSetupSubmitButton = document.getElementById('gameSetupSubmitButton') as HTMLButtonElement;

 const optionsColourLock = document.getElementById('optionsColourLock') as HTMLInputElement;
+const optionsColourGoodBox = document.getElementById('optionsColourGoodBox') as HTMLSelectElement;
+const optionsColourBadBox = document.getElementById('optionsColourBadBox') as HTMLSelectElement;
 const optionsTurnNumberStyle = document.getElementById('optionsTurnNumberStyle') as HTMLSelectElement;
 const optionsSpecialWeaponSorting = document.getElementById('optionsSpecialWeaponSorting') as HTMLSelectElement;

+const colours = {
+	red: { colour: { r: 0xf2, g: 0x20, b: 0x0d }, specialColour: { r: 0xff, g: 0x8c, b: 0x1a }, specialAccentColour: { r: 0xff, g: 0xd5, b: 0xcc }, uiBaseColourIsSpecialColour: false },
+	orange: { colour: { r: 0xf2, g: 0x74, b: 0x0d }, specialColour: { r: 0xff, g: 0x40, b: 0x00 }, specialAccentColour: { r: 0xff, g: 0xcc, b: 0x99 }, uiBaseColourIsSpecialColour: true },
+	yellow: { colour: { r: 0xec, g: 0xf9, b: 0x01 }, specialColour: { r: 0xfa, g: 0x9e, b: 0x00 }, specialAccentColour: { r: 0xf9, g: 0xf9, b: 0x1f }, uiBaseColourIsSpecialColour: true },
+	limegreen: { colour: { r: 0xc0, g: 0xf9, b: 0x15 }, specialColour: { r: 0x6a, g: 0xff, b: 0x00 }, specialAccentColour: { r: 0xe6, g: 0xff, b: 0x99 }, uiBaseColourIsSpecialColour: true },
+	green: { colour: { r: 0x06, g: 0xe0, b: 0x06 }, specialColour: { r: 0x33, g: 0xff, b: 0xcc }, specialAccentColour: { r: 0xb3, g: 0xff, b: 0xd9 }, uiBaseColourIsSpecialColour: false },
+	turquoise: { colour: { r: 0x00, g: 0xff, b: 0xea }, specialColour: { r: 0x00, g: 0xa8, b: 0xe0 }, specialAccentColour: { r: 0x99, g: 0xff, b: 0xff }, uiBaseColourIsSpecialColour: true },
+	blue: { colour: { r: 0x4a, g: 0x5c, b: 0xfc }, specialColour: { r: 0x01, g: 0xed, b: 0xfe }, specialAccentColour: { r: 0xd5, g: 0xe1, b: 0xe1 }, uiBaseColourIsSpecialColour: false },
+	purple: { colour: { r: 0xa1, g: 0x06, b: 0xef }, specialColour: { r: 0xff, g: 0x00, b: 0xff }, specialAccentColour: { r: 0xff, g: 0xb3, b: 0xff }, uiBaseColourIsSpecialColour: false },
+	magenta: { colour: { r: 0xf9, g: 0x06, b: 0xe0 }, specialColour: { r: 0x80, g: 0x06, b: 0xf9 }, specialAccentColour: { r: 0xeb, g: 0xb4, b: 0xfd }, uiBaseColourIsSpecialColour: true },
+};
+
 let shownMaxPlayersWarning = false;

 function setLoadingMessage(message: string | null) {
@ -46,7 +63,9 @@ function setLoadingMessage(message: string | null) {
 function preGameInitStageDatabase(stages: Stage[]) {
 	for (let i = 0; i < stages.length; i++) {
 		const stage = stages[i];
-		const status = userConfig.lastCustomRoomConfig ? userConfig.lastCustomRoomConfig.stageSwitch[i] : 0;
+		const status = userConfig.lastCustomRoomConfig && userConfig.lastCustomRoomConfig.stageSwitch.length > i
+			? userConfig.lastCustomRoomConfig.stageSwitch[i]
+			: (stages[i].name.startsWith('Upcoming') ? 2 : 0);

 		const button = document.createElement('button');

@ -74,7 +93,7 @@ function stageSwitchButton_click(e: Event) {
 	let status = button.dataset.status == '0' ? 1 : button.dataset.status == '1' ? 2 : 0;
 	button.dataset.status = status.toString();
 	(<HTMLElement>button.getElementsByClassName('stageStatus')[0]).innerText = [ 'Allowed', 'Counterpick only', 'Banned' ][status];
-	gameSetupSubmitButton.disabled = stageSwitchButtons.every(b => b.dataset.status != '0');
+	updateCreateRoomButton();
 }

 maxPlayersBox.addEventListener('change', () => {
@ -84,8 +103,18 @@ maxPlayersBox.addEventListener('change', () => {
 		else
 		maxPlayersBox.value = '2';
 	}
+	const maxPlayers = parseInt(maxPlayersBox.value);
+	for (let i = 0; i < stageDatabase.stages!.length; i++) {
+		stageSwitchButtons[i].disabled = maxPlayers > stageDatabase.stages![i].maxPlayers;
+	}
+	updateCreateRoomButton();
 });

+function updateCreateRoomButton() {
+	const maxPlayers = parseInt(maxPlayersBox.value);
+	gameSetupSubmitButton.disabled = stageSwitchButtons.every((b, i) => b.dataset.status != '0' || maxPlayers > stageDatabase.stages![i].maxPlayers);
+}
+
 newGameSetupButton.addEventListener('click', _ => {
 	gameSetupDialog.showModal();
 });
@ -153,10 +182,13 @@ function createRoom(useOptionsForm: boolean) {
 	data.append('name', name);
 	data.append('clientToken', clientToken);
 	if (useOptionsForm) {
-		const settings = {
-			maxPlayers: parseInt(maxPlayersBox.value),
+		const maxPlayers = parseInt(maxPlayersBox.value);
+		const settings = <CustomRoomConfig> {
+			maxPlayers,
 			turnTimeLimit: turnTimeLimitBox.value ? turnTimeLimitBox.valueAsNumber : null,
 			goalWinCount: goalWinCountBox.value ? parseInt(goalWinCountBox.value) : null,
+			allowUpcomingCards: gameSetupAllowUpcomingCardsBox.checked,
+			allowCustomCards: gameSetupAllowCustomCardsBox.checked,
 			stageSelectionMethodFirst: StageSelectionMethod[stageSelectionRuleFirstBox.value as keyof typeof StageSelectionMethod],
 			stageSelectionMethodAfterWin: stageSelectionRuleAfterWinBox.value == 'Inherit' ? null : StageSelectionMethod[stageSelectionRuleAfterWinBox.value as keyof typeof StageSelectionMethod],
 			stageSelectionMethodAfterDraw: stageSelectionRuleAfterDrawBox.value == 'Inherit' ? null : StageSelectionMethod[stageSelectionRuleAfterDrawBox.value as keyof typeof StageSelectionMethod],
@ -172,25 +204,27 @@ function createRoom(useOptionsForm: boolean) {
 			data.append('turnTimeLimit', turnTimeLimitBox.value);
 		if (goalWinCountBox.value)
 			data.append('goalWinCount', goalWinCountBox.value);
+		data.append('allowUpcomingCards', settings.allowUpcomingCards.toString());
+		data.append('allowCustomCards', settings.allowCustomCards.toString());

 		const stageSelectionRuleFirst = {
 			method: settings.stageSelectionMethodFirst,
-			bannedStages: settings.stageSwitch.map((_, i) => i).filter(i => i != 0)
+			bannedStages: settings.stageSwitch.map((_, i) => i).filter(i => settings.stageSwitch[i] != 0)
 		};
 		const stageSelectionRuleAfterWin = {
 			method: settings.stageSelectionMethodAfterWin ?? settings.stageSelectionMethodFirst,
-			bannedStages: settings.stageSwitch.map((_, i) => i).filter(i => i == 2)
+			bannedStages: settings.stageSwitch.map((_, i) => i).filter(i => settings.stageSwitch[i] == 2)
 		};
 		const stageSelectionRuleAfterDraw = {
 			method: settings.stageSelectionMethodAfterDraw ?? settings.stageSelectionMethodFirst,
-			bannedStages: settings.stageSwitch.map((_, i) => i).filter(i => i == 2)
+			bannedStages: settings.stageSwitch.map((_, i) => i).filter(i => settings.stageSwitch[i] == 2)
 		};

 		data.append('stageSelectionRuleFirst', JSON.stringify(stageSelectionRuleFirst));
 		data.append('stageSelectionRuleAfterWin', JSON.stringify(stageSelectionRuleAfterWin));
 		data.append('stageSelectionRuleAfterDraw', JSON.stringify(stageSelectionRuleAfterDraw));
 		data.append('forceSameDeckAfterDraw', settings.forceSameDecksAfterDraw.toString());
-		data.append('spectate', settings.forceSameDecksAfterDraw.toString());
+		data.append('spectate', settings.spectate.toString());
 	}
 	request.send(data.toString());
 	setLoadingMessage('Creating a room...');
@ -242,6 +276,7 @@ function joinGameError(message: string, fromInitialLoad: boolean) {
 		if (fromInitialLoad)
 			clearPreGameForm(true);
 		else {
+			showPage('preGame');
 			gameIDBox.focus();
 			gameIDBox.setSelectionRange(0, gameIDBox.value.length);
 		}
@ -284,8 +319,16 @@ preGameDeckEditorButton.addEventListener('click', e => {
 	setUrl('deckeditor');
 });

+preGameGalleryButton.addEventListener('click', e => {
+	e.preventDefault();
+	showCardList();
+	setUrl('cardlist');
+});
+
 preGameSettingsButton.addEventListener('click', e => {
 	e.preventDefault();
+	optionsColourGoodBox.value = userConfig.goodColour ?? 'yellow';
+	optionsColourBadBox.value = userConfig.badColour ?? 'blue';
 	optionsTurnNumberStyle.value = turnNumberLabel.absoluteMode ? 'absolute' : 'remaining';
 	optionsSpecialWeaponSorting.value = SpecialWeaponSorting[userConfig.specialWeaponSorting];
 	settingsDialog.showModal();
@ -323,19 +366,45 @@ preGameReplayButton.addEventListener('click', e => {
 	new ReplayLoader(m[1]).loadReplay();
 });

+function setPreferredColours() {
+	const colour1 = colours[(userConfig.goodColour ?? 'yellow') as keyof typeof colours];
+	document.body.style.setProperty('--primary-colour-1', `rgb(${colour1.colour.r}, ${colour1.colour.g}, ${colour1.colour.b})`);
+	document.body.style.setProperty('--special-colour-1', `rgb(${colour1.specialColour.r}, ${colour1.specialColour.g}, ${colour1.specialColour.b})`);
+	document.body.style.setProperty('--special-accent-colour-1', `rgb(${colour1.specialAccentColour.r}, ${colour1.specialAccentColour.g}, ${colour1.specialAccentColour.b})`);
+	uiBaseColourIsSpecialColourPerPlayer[0] = colour1.uiBaseColourIsSpecialColour;
+	uiBaseColourIsSpecialColourOutOfGame = colour1.uiBaseColourIsSpecialColour;
+	gamePage.dataset.uiBaseColourIsSpecialColour = uiBaseColourIsSpecialColourOutOfGame.toString();
+
+	const colour2 = colours[(userConfig.badColour ?? 'blue') as keyof typeof colours];
+	document.body.style.setProperty('--primary-colour-2', `rgb(${colour2.colour.r}, ${colour2.colour.g}, ${colour2.colour.b})`);
+	document.body.style.setProperty('--special-colour-2', `rgb(${colour2.specialColour.r}, ${colour2.specialColour.g}, ${colour2.specialColour.b})`);
+	document.body.style.setProperty('--special-accent-colour-2', `rgb(${colour2.specialAccentColour.r}, ${colour2.specialAccentColour.g}, ${colour2.specialAccentColour.b})`);
+	uiBaseColourIsSpecialColourPerPlayer[1] = colour2.uiBaseColourIsSpecialColour;
+
+	for (let i = 3; i <= 4; i++) {
+		document.body.style.removeProperty(`--primary-colour-${i}`);
+		document.body.style.removeProperty(`--special-colour-${i}`);
+		document.body.style.removeProperty(`--special-accent-colour-${i}`);
+		uiBaseColourIsSpecialColourPerPlayer[i] = true;
+	}
+}
+
 optionsColourLock.addEventListener('change', () => {
 	userConfig.colourLock = optionsColourLock.checked;
 	saveSettings();
-	if (userConfig.colourLock) {
-		for (let i = 1; i <= 4; i++) {
-			document.body.style.removeProperty(`--primary-colour-${i}`);
-			document.body.style.removeProperty(`--special-colour-${i}`);
-			document.body.style.removeProperty(`--special-accent-colour-${i}`);
-			uiBaseColourIsSpecialColourOutOfGame = true;
-			gamePage.dataset.uiBaseColourIsSpecialColour = 'true';
-		}
-	}
-})
+	setPreferredColours();
+});
+
+optionsColourGoodBox.addEventListener('change', () => {
+	userConfig.goodColour = optionsColourGoodBox.value;
+	saveSettings();
+	setPreferredColours();
+});
+optionsColourBadBox.addEventListener('change', () => {
+	userConfig.badColour = optionsColourBadBox.value;
+	saveSettings();
+	setPreferredColours();
+});

 optionsTurnNumberStyle.addEventListener('change', () => turnNumberLabel.absoluteMode = optionsTurnNumberStyle.value == 'absolute');
 optionsSpecialWeaponSorting.addEventListener('change', () => {
@ -355,6 +424,9 @@ window.addEventListener('popstate', () => {
 // Initialise the settings dialog.
 {
 	optionsColourLock.checked = userConfig.colourLock;
+	optionsColourGoodBox.value = userConfig.goodColour ?? 'yellow';
+	optionsColourBadBox.value = userConfig.badColour ?? 'blue';
+	setPreferredColours();
 }

 // Initialise the room settings dialog.
@ -363,6 +435,7 @@ window.addEventListener('popstate', () => {
 		maxPlayersBox.value = userConfig.lastCustomRoomConfig.maxPlayers.toString();
 		turnTimeLimitBox.value = userConfig.lastCustomRoomConfig.turnTimeLimit?.toString() ?? '';
 		goalWinCountBox.value = userConfig.lastCustomRoomConfig.goalWinCount?.toString() ?? '';
+		gameSetupAllowUpcomingCardsBox.checked = userConfig.lastCustomRoomConfig.allowUpcomingCards ?? true;
 		stageSelectionRuleFirstBox.value = StageSelectionMethod[userConfig.lastCustomRoomConfig.stageSelectionMethodFirst]
 		stageSelectionRuleAfterWinBox.value = userConfig.lastCustomRoomConfig.stageSelectionMethodAfterWin != null ? StageSelectionMethod[userConfig.lastCustomRoomConfig.stageSelectionMethodAfterWin] : 'Inherit';
 		stageSelectionRuleAfterDrawBox.value = userConfig.lastCustomRoomConfig.stageSelectionMethodAfterDraw != null ? StageSelectionMethod[userConfig.lastCustomRoomConfig.stageSelectionMethodAfterDraw] : 'Inherit';
@ -370,6 +443,8 @@ window.addEventListener('popstate', () => {
 	}
 }

-if (!canPushState)
+if (!canPushState) {
 	preGameDeckEditorButton.href = '#deckeditor';
+	preGameGalleryButton.href = '#cardlist';
+}
 setLoadingMessage('Loading game data...');
--- a/TableturfBattleClient/src/Player.ts
+++ b/TableturfBattleClient/src/Player.ts
@ -6,7 +6,7 @@ interface Player {
 	colour: Colour;
 	specialColour: Colour;
 	specialAccentColour: Colour;
-	uiBaseColourIsSpecialColour?: boolean;
+	uiBaseColourIsSpecialColour: boolean;
 	sleeves: number;
 	totalSpecialPoints: number;
 	passes: number;
--- a/TableturfBattleClient/src/ReplayLoader.ts
+++ b/TableturfBattleClient/src/ReplayLoader.ts
@ -16,6 +16,7 @@ class ReplayLoader {

 		const version = this.readUint8();
 		const players: Player[] = [ ];
+		const customCards: Card[] = [ ];
 		let goalWinCount = null;
 		switch (version) {
 			case 1: {
@ -35,7 +36,7 @@ class ReplayLoader {
 					const initialDrawOrder = [ ];
 					const drawOrder = [ ];
 					for (let j = 0; j < 15; j++) {
-						cards.push(this.readCard());
+						cards.push(this.readCard(version, customCards));
 					}
 					for (let j = 0; j < 2; j++) {
 						const n = this.readUint8();
@ -69,7 +70,7 @@ class ReplayLoader {
 					playerData.push({ deck: new Deck("Deck", 0, cards, new Array(15).fill(1)), initialDrawOrder, drawOrder, won: false });
 				}

-				const turns = this.readTurns(numPlayers);
+				const turns = this.readTurns(numPlayers, version, customCards);
 				currentReplay.games.push({ stage, playerData, turns });
 				break;
 			}
@ -91,7 +92,7 @@ class ReplayLoader {
 						const drawOrder = [ ];
 						let won = false;
 						for (let j = 0; j < 15; j++) {
-							cards.push(this.readCard());
+							cards.push(this.readCard(version, customCards));
 						}
 						for (let j = 0; j < 2; j++) {
 							const n = this.readUint8();
@ -108,12 +109,12 @@ class ReplayLoader {
 						}
 						playerData.push({ deck: new Deck("Deck", 0, cards, new Array(15).fill(1)), initialDrawOrder, drawOrder, won });
 					}
-					const turns = this.readTurns(numPlayers);
+					const turns = this.readTurns(numPlayers, version, customCards);
 					currentReplay.games.push({ stage, playerData, turns });
 				}
 				break;
 			}
-			case 3: {
+			case 3: case 4: case 5: {
 				const n = this.readUint8();
 				const numPlayers = n & 0x0F;
 				goalWinCount = n >> 4;
@ -122,6 +123,35 @@ class ReplayLoader {
 				currentReplay = { gameNumber: 0, decks: [ ], games: [ ], turns: [ ], placements: [ ], watchingPlayer: 0 };
 				this.readPlayers(numPlayers, players);

+				// Custom cards
+				if (version >= 4) {
+					const numCustomCards = this.read7BitEncodedInt();
+					for (let i = 0; i < numCustomCards; i++) {
+						const line1 = this.readString();
+						const line2 = this.readString();
+						const name = line2 != '' ? `${line1} ${line2}` : line1;
+						const b = this.readUint8();
+						const rarity = <Rarity> b;
+						const specialCost = this.readUint8();
+						const inkColour1 = this.readColour();
+						const inkColour2 = this.readColour();
+						const grid = [ ];
+						for (let x = 0; x < 8; x++) {
+							const row = [ ];
+							for (let y = 0; y < 8; y += 4) {
+								const b = this.readUint8();
+								row.push(<Space> ((b & 0x03) << 2));
+								row.push(<Space> (b & 0x0c));
+								row.push(<Space> ((b & 0x30) >> 2));
+								row.push(<Space> ((b & 0xc0) >> 4));
+							}
+							grid.push(row);
+						}
+						const card = new Card(RECEIVED_CUSTOM_CARD_START - i, name, line1, line2 == '' ? null : line2, inkColour1, inkColour2, rarity, specialCost, grid);
+						customCards.push(card);
+					}
+				}
+
 				// Decks
 				const decks = [ ];
 				const numDecks = this.read7BitEncodedInt();
@ -129,7 +159,7 @@ class ReplayLoader {
 					const name = this.readString();
 					const sleeves = this.readUint8();
 					const cards = [ ];
-					for (let i = 0; i < 15; i++) cards.push(this.readCard());
+					for (let i = 0; i < 15; i++) cards.push(this.readCard(version, customCards));
 					const upgrades = [ ];
 					for (let i = 0; i < 4; i++) {
 						const b = this.readUint8();
@ -165,7 +195,7 @@ class ReplayLoader {
 						}
 						playerData.push({ deck, initialDrawOrder, drawOrder, won });
 					}
-					const turns = this.readTurns(numPlayers);
+					const turns = this.readTurns(numPlayers, version, customCards);
 					currentReplay.games.push({ stage, playerData, turns });
 				}
 				break;
@ -183,9 +213,12 @@ class ReplayLoader {
 				turnNumber: 0,
 				turnTimeLimit: null,
 				turnTimeLeft: null,
-				goalWinCount: goalWinCount
+				goalWinCount: goalWinCount,
+				allowUpcomingCards: true,
+				allowCustomCards: true
 			},
 			me: null,
+			isHost: false,
 			webSocket: null
 		};

@ -196,6 +229,11 @@ class ReplayLoader {

 	private readUint8() { return this.dataView.getUint8(this.pos++); }
 	private readInt8() { return this.dataView.getInt8(this.pos++); }
+	private readInt16() {
+		const v = this.dataView.getInt16(this.pos, true);
+		this.pos += 2;
+		return v;
+	}
 	private readColour(): Colour { return { r: this.readUint8(), g: this.readUint8(), b: this.readUint8() }; }
 	private readString(length?: number) {
 		length ??= this.read7BitEncodedInt();
@ -241,12 +279,12 @@ class ReplayLoader {
 		}
 	}

-	private readTurns(numPlayers: number) {
+	private readTurns(numPlayers: number, version: number, customCards: Card[]) {
 		const turns = [ ];
 		for (let i = 0; i < 12; i++) {
 			const turn = [ ];
 			for (let j = 0; j < numPlayers; j++) {
-				const card = this.readCard();
+				const card = this.readCard(version, customCards);
 				const b = this.readUint8();
 				const x = this.readInt8();
 				const y = this.readInt8();
@ -254,6 +292,15 @@ class ReplayLoader {
 					turn.push({ card, isPass: true, isTimeout: (b & 0x20) != 0 });
 				else {
 					const move: PlayMove = { card, isPass: false, isTimeout: (b & 0x20) != 0, x, y, rotation: b & 0x03, isSpecialAttack: (b & 0x40) != 0 };
+					if (version < 5 && card.number == 217) {
+						// Heavy Edit Splatling: originally had the ink pattern transposed down one space
+						switch (move.rotation) {
+							case 0: move.y++; break;
+							case 1: move.x--; break;
+							case 2: move.y--; break;
+							default: move.x++; break;
+						}
+					}
 					turn.push(move);
 				}
 			}
@ -262,8 +309,13 @@ class ReplayLoader {
 		return turns;
 	}

-	private readCard() {
-		const num = this.readUint8();
-		return cardDatabase.get(num > cardDatabase.lastOfficialCardNumber ? num - 256 : num);
+	private readCard(version: number, customCards: Card[]) {
+		if (version >= 4) {
+			const num = this.readInt16();
+			return num <= RECEIVED_CUSTOM_CARD_START ? customCards[RECEIVED_CUSTOM_CARD_START - num] : cardDatabase.get(num);
+		} else {
+			const num = this.readUint8();
+			return cardDatabase.get(num > cardDatabase.lastOfficialCardNumber ? num - 256 : num);
+		}
 	}
 }
--- a/TableturfBattleClient/src/Stage.ts
+++ b/TableturfBattleClient/src/Stage.ts
@ -13,6 +13,8 @@ class Stage {
 		return new Stage(obj.name, obj.grid, obj.startSpaces);
 	}

+	get maxPlayers() { return Math.max(...this.startSpaces.map(a => a.length)); }
+
 	getStartSpaces(numPlayers: number) {
 		let list = null as Point[] | null;
 		for (const list2 of this.startSpaces) {
--- a/TableturfBattleClient/src/StageButton.ts
+++ b/TableturfBattleClient/src/StageButton.ts
@ -23,17 +23,36 @@ class StageButton extends CheckButton {
 		for (var x = 0; x < stage.grid.length; x++) {
 			let col = [ ];
 			for (var y = 0; y < stage.grid[x].length; y++) {
-				if (stage.grid[x][y] == Space.Empty) {
+				if (stage.grid[x][y] == Space.OutOfBounds)
+					col.push(null);
+				else {
 					const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-					rect.classList.add('empty');
+					rect.classList.add(Space[stage.grid[x][y]].toString());
 					rect.setAttribute('x', (100 * x).toString());
 					rect.setAttribute('y', (100 * y + offset).toString());
 					rect.setAttribute('width', '100');
 					rect.setAttribute('height', '100');
 					gridSvg.appendChild(rect);
 					col.push(rect);
-				} else
-					col.push(null);
+
+					if (stage.grid[x][y] & Space.SpecialInactive1) {
+						const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+						image.setAttribute('href', 'assets/SpecialOverlay.webp');
+						image.setAttribute('x', rect.getAttribute('x')!);
+						image.setAttribute('y', rect.getAttribute('y')!);
+						image.setAttribute('width', rect.getAttribute('width')!);
+						image.setAttribute('height', rect.getAttribute('height')!);
+						gridSvg.appendChild(image);
+					} else if (stage.grid[x][y] & Space.Ink1) {
+						const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+						image.setAttribute('href', 'assets/InkOverlay.webp');
+						image.setAttribute('x', rect.getAttribute('x')!);
+						image.setAttribute('y', rect.getAttribute('y')!);
+						image.setAttribute('width', rect.getAttribute('width')!);
+						image.setAttribute('height', rect.getAttribute('height')!);
+						gridSvg.appendChild(image);
+					}
+				}
 			}
 			cols.push(col);
 		}
@ -50,19 +69,20 @@ class StageButton extends CheckButton {

 	setStartSpaces(numPlayers: number) {
 		for (const el of this.startCells) {
-			el[0].setAttribute('class', 'empty');
+			el[0].setAttribute('class', 'Empty');
 			el[1].parentElement!.removeChild(el[1]);
 		}
 		this.startCells.splice(0);

 		const startSpaces = this.stage.getStartSpaces(numPlayers);
+		if (startSpaces == null) return;
 		for (let i = 0; i < numPlayers; i++) {
 			const space = startSpaces[i];
 			const cell = this.cells[space.x][space.y]!;
-			cell.classList.add(`start${i + 1}`);
+			cell.setAttribute('class', `SpecialInactive${i + 1}`);

 			const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
-			image.setAttribute('href', 'assets/SpecialOverlay.png');
+			image.setAttribute('href', 'assets/SpecialOverlay.webp');
 			image.setAttribute('x', cell.getAttribute('x')!);
 			image.setAttribute('y', cell.getAttribute('y')!);
 			image.setAttribute('width', cell.getAttribute('width')!);
--- a/TableturfBattleClient/src/app.ts
+++ b/TableturfBattleClient/src/app.ts
@ -1,5 +1,8 @@
 declare var baseUrl: string;

+const CUSTOM_CARD_START = -10000;  // TODO: Card numbers in replays shall be expanded to 2 bytes.
+const RECEIVED_CUSTOM_CARD_START = -20000;
+const UNSAVED_CUSTOM_CARD_INDEX = CUSTOM_CARD_START + 1;
 const defaultColours = [
 	[ { r: 236, g: 249, b: 1 }, { r: 250, g: 158, b: 0 }, { r: 249, g: 249, b: 31 } ],
 	[ { r: 74, g: 92, b: 252 }, { r: 1, g: 237, b: 254 }, { r: 213, g: 225, b: 225 } ],
@ -7,6 +10,7 @@ const defaultColours = [
 	[ { r: 6, g: 249, b: 148 }, { r: 6, g: 249, b: 6 }, { r: 180, g: 253, b: 199 } ]
 ];
 let uiBaseColourIsSpecialColourOutOfGame = true;
+let uiBaseColourIsSpecialColourPerPlayer = [ true, false, true, true ];

 const errorDialog = document.getElementById('errorDialog') as HTMLDialogElement;
 const errorMessage = document.getElementById('errorMessage')!;
@ -49,6 +53,11 @@ function onInitialise(callback: () => void) {

 function initCardDatabase(cards: Card[]) {
 	deckEditInitCardDatabase(cards);
+	galleryInitCardDatabase(cards);
+	if (!cards.find(c => c.number < 0)) {
+		gameSetupAllowUpcomingCardsBox.parentElement!.hidden = true;
+		lobbyAllowUpcomingCardsBox.parentElement!.hidden = true;
+	}
 }
 function initStageDatabase(stages: Stage[]) {
 	preGameInitStageDatabase(stages);
@ -58,7 +67,7 @@ function initStageDatabase(stages: Stage[]) {

 // Pages
 const pages = new Map<string, HTMLDivElement>();
-for (var id of [ 'noJS', 'preGame', 'lobby', 'game', 'deckList', 'deckEdit' ]) {
+for (var id of [ 'noJS', 'preGame', 'lobby', 'game', 'deckList', 'deckEdit', 'gallery' ]) {
 	let el = document.getElementById(`${id}Page`) as HTMLDivElement;
 	if (!el) throw new EvalError(`Element not found: ${id}Page`);
 	pages.set(id, el);
@ -106,8 +115,10 @@ function clearUrlFromGame() {

 function onGameSettingsChange() {
 	if (currentGame == null) return;
-	if (lobbyTimeLimitBox.value != currentGame.game.turnTimeLimit?.toString() ?? '')
+	if (lobbyTimeLimitBox.value != (currentGame.game.turnTimeLimit?.toString() ?? ''))
 		lobbyTimeLimitBox.value = currentGame.game.turnTimeLimit?.toString() ?? '';
+	lobbyAllowUpcomingCardsBox.checked = currentGame.game.allowUpcomingCards;
+	lobbyAllowCustomCardsBox.checked = currentGame.game.allowCustomCards;
 }

 function onGameStateChange(game: any, playerData: PlayerData | null) {
@ -123,7 +134,7 @@ function onGameStateChange(game: any, playerData: PlayerData | null) {
 		board.flip = playerData != null && playerData.playerIndex % 2 != 0;
 		if (board.flip) gamePage.classList.add('boardFlipped');
 		else gamePage.classList.remove('boardFlipped');
-		board.resize(game.board);
+		if (!isSameTurnReconnect) board.resize(game.board);
 		board.startSpaces = game.startSpaces;
 		if (!isSameTurnReconnect) board.refresh();
 	}
@ -144,12 +155,14 @@ function onGameStateChange(game: any, playerData: PlayerData | null) {
 		case GameState.ChoosingStage:
 			initLobbyPage(window.location.toString());
 			showPage('lobby');
+			clearShowDeck();
 			clearConfirmLeavingGame();
 			showStageSelectionForm(playerData?.stageSelectionPrompt ?? null, playerData && game.players[playerData.playerIndex]?.isReady);
 			lobbySelectedStageSection.hidden = true;
 			break;
 		case GameState.ChoosingDeck:
 			showPage('lobby');
+			clearShowDeck();
 			if (currentGame.me) setConfirmLeavingGame();
 			if (selectedStageIndicator)
 				lobbySelectedStageSection.removeChild(selectedStageIndicator.buttonElement);
@ -241,7 +254,7 @@ function setupWebSocket(gameID: string) {
 	const webSocket = new WebSocket(`${config.apiBaseUrl.replace(/(http)(s)?\:\/\//, 'ws$2://')}/websocket?gameID=${gameID}&clientToken=${clientToken}`);
 	webSocket.addEventListener('open', _ => {
 		enterGameTimeout = setTimeout(() => {
-			webSocket.close(1002, 'Timeout waiting for a sync message');
+			webSocket.close(1000, 'Timeout waiting for a sync message');
 			enterGameTimeout = null;
 			communicationError();
 		}, 30000);
@ -257,9 +270,11 @@ function setupWebSocket(gameID: string) {
 					enterGameTimeout = null;
 				}
 				setLoadingMessage(null);
-				if (!e.data) {
+				if (!payload.data) {
+					joinGameError('The game was not found.', false);
+					currentGame = null;
+					webSocket.removeEventListener('close', webSocket_close);
 					webSocket.close();
-					alert('The game was not found.');
 				} else {
 					currentGame = {
 						id: gameID,
@ -271,8 +286,11 @@ function setupWebSocket(gameID: string) {
 							turnTimeLimit: payload.data.turnTimeLimit,
 							turnTimeLeft: payload.data.turnTimeLeft,
 							goalWinCount: payload.data.goalWinCount,
+							allowUpcomingCards: payload.data.allowUpcomingCards,
+							allowCustomCards: payload.data.allowCustomCards
 						},
 						me: payload.playerData,
+						isHost: payload.isHost,
 						webSocket: webSocket,
 						reconnecting: false
 					};
@ -330,6 +348,8 @@ function setupWebSocket(gameID: string) {
 				switch (payload.event) {
 					case 'settingsChange':
 						currentGame.game.turnTimeLimit = payload.data.turnTimeLimit;
+						currentGame.game.allowUpcomingCards = payload.data.allowUpcomingCards;
+						currentGame.game.allowCustomCards  = payload.data.allowCustomCards;
 						onGameSettingsChange();
 						break;
 					case 'join':
@ -469,11 +489,14 @@ function processUrl() {
 			return false;
 		}
 	}
+	swapColours();
 	stopEditingDeck();
 	errorDialog.close();
 	clearGame();
 	if (location.pathname.endsWith('/deckeditor') || location.hash == '#deckeditor')
 		onInitialise(showDeckList);
+	else if (location.pathname.endsWith('/cardlist') || location.hash == '#cardlist')
+		onInitialise(showCardList);
 	else {
 		showPage('preGame');
 		if (location.pathname.endsWith('/help') || location.hash == '#help')
--- a/TableturfBattleClient/tableturf.css
+++ b/TableturfBattleClient/tableturf.css
@ -33,7 +33,7 @@ body {
 	--player-special-accent-colour: var(--special-accent-colour-1);
 	--theme-colour: #0c92f2;
 	color: white;
-	background: url('assets/external/BannerBackground.png') black;
+	background: url('assets/external/BannerBackground.webp') black;
 	background-position: 50% -72px;
 	color-scheme: dark;
 }
@ -123,11 +123,22 @@ footer {
 #stageSwitch button .stageName { width: 12em; text-align: start; }
 #stageSwitch button .stageStatus { width: 8em; text-align: end; }

+option[value='red'] { color: #f2200d; }
+option[value='orange'] { color: #f2740d; }
+option[value='yellow'] { color: #ecf901; }
+option[value='limegreen'] { color: #c0f915; }
+option[value='green'] { color: #06e006; }
+option[value='turquoise'] { color: #00ffea; }
+option[value='blue'] { color: #4a5cfc; }
+option[value='purple'] { color: #a106ef; }
+option[value='magenta'] { color: #f906e0; }
+
 /* Lobby page */

 #lobbyPage:not([hidden]) {
 	display: grid;
 	grid-template-columns: 27em 1fr;
+	grid-template-rows: auto 1fr;
 }

 .submitButtonContainer {
@ -139,12 +150,21 @@ footer {
 #lobbyPlayerListSection {
 	overflow-y: auto;
 	box-sizing: border-box;
+	grid-row: 1;
+	grid-column: 1;
+}
+
+#lobbySelectedStageSection {
+	grid-row: 2;
+	grid-column: 1;
 }

 #lobbyStageSection, #lobbyDeckSection {
-	overflow-y: scroll;
+	overflow-y: auto;
 	height: calc(100vh - 16px);
 	box-sizing: border-box;
+	grid-row: 1 / -1;
+	grid-column: 2;
 }

 #playerList {
@ -239,6 +259,10 @@ footer {
 	margin-right: 1.5em;
 }

+#lobbyPage label:not([hidden]) {
+	display: block;
+}
+
 #lobbyTimeLimitBox {
 	width: 8ch;
 	text-align: right;
@ -310,6 +334,12 @@ dialog::backdrop {
 .deckButton[data-sleeves="22"] { background-position: 85.7% 63%; }
 .deckButton[data-sleeves="23"] { background-position: 100% 63%; }
 .deckButton[data-sleeves="24"] { background-position: 0 89%; }
+.deckButton[data-sleeves="25"] { background-position: 14.3% 89%; }
+.deckButton[data-sleeves="26"] { background-position: 28.6% 89%; }
+.deckButton[data-sleeves="27"] { background-position: 42.9% 89%; }
+.deckButton[data-sleeves="28"] { background-position: 57.1% 89%; }
+.deckButton[data-sleeves="29"] { background-position: 71.4% 89%; }
+.deckButton[data-sleeves="30"] { background-position: 85.7% 89%; }

 .deckButton:is(:active, .checked) {
 	outline-color: lightgrey;
@ -365,10 +395,14 @@ dialog::backdrop {
 	box-sizing: border-box;
 }

-.stageGrid rect.start1 { fill: var(--special-colour-1); }
-.stageGrid rect.start2 { fill: var(--special-colour-2); }
-.stageGrid rect.start3 { fill: var(--special-colour-3); }
-.stageGrid rect.start4 { fill: var(--special-colour-4); }
+.stageGrid rect.Ink1 { fill: var(--primary-colour-1); }
+.stageGrid rect.Ink2 { fill: var(--primary-colour-2); }
+.stageGrid rect.Ink3 { fill: var(--primary-colour-3); }
+.stageGrid rect.Ink4 { fill: var(--primary-colour-4); }
+.stageGrid rect.SpecialInactive1 { fill: var(--special-colour-1); }
+.stageGrid rect.SpecialInactive2 { fill: var(--special-colour-2); }
+.stageGrid rect.SpecialInactive3 { fill: var(--special-colour-3); }
+.stageGrid rect.SpecialInactive4 { fill: var(--special-colour-4); }

 :is(.stage, .stageRandom):is(:hover, :focus-within):not(.checked, .disabled)::before {
 	content: '';
@ -422,7 +456,13 @@ dialog::backdrop {
 .cardBack[data-sleeves="21"] { background-position: 71.4% 66.7% }
 .cardBack[data-sleeves="22"] { background-position: 85.7% 66.7% }
 .cardBack[data-sleeves="23"] { background-position: 100% 66.7% }
-.cardBack[data-sleeves="24"] { background-position: 0% 100%; }
+.cardBack[data-sleeves="24"] { background-position: 0% 66.7% }
+.cardBack[data-sleeves="25"] { background-position: 14.3% 100% }
+.cardBack[data-sleeves="26"] { background-position: 28.6% 100% }
+.cardBack[data-sleeves="27"] { background-position: 42.9% 100% }
+.cardBack[data-sleeves="28"] { background-position: 57.1% 100% }
+.cardBack[data-sleeves="29"] { background-position: 71.4% 100% }
+.cardBack[data-sleeves="30"] { background-position: 85.7% 100% }

@keyframes cardBackFadeIn {
 	from {
@ -477,10 +517,6 @@ dialog::backdrop {

 .cardNumber {
 	display: none;
-}
-
-.cardListGrid .cardButton:hover .cardNumber {
-	display: block;
 	position: absolute;
 	background: grey;
 	border: 1px solid black;
@ -491,13 +527,17 @@ dialog::backdrop {
 	z-index: 1;
 }

+.cardListGrid .cardButton:hover .cardNumber {
+	display: block;
+}
+
 .cardName {
 	text-align: center;
 	line-height: 1.25em;
 	flex-grow: 1;
 }
 .cardButton:is([data-card-number="163"], [data-card-number="166"], [data-card-number="196"], [data-card-number="197"], [data-card-number="199"],
-	[data-card-number="202"], [data-card-number="216"]) .cardName {
+	[data-card-number="202"], [data-card-number="216"], [data-card-number="-20"]) .cardName {
 	position: absolute;
 	left: -1em;
 	right: -1em;
@ -553,7 +593,7 @@ dialog::backdrop {
 .cardSpecialPoint, .playHintSpecial {
 	display: inline-block;
 	color: transparent;
-	background: url('assets/SpecialOverlay.png') center/cover, var(--player-special-colour);
+	background: url('assets/SpecialOverlay.webp') center/cover, var(--player-special-colour);
 	width: 1ch;
 	height: 1ch;
 	vertical-align: middle;
@ -565,10 +605,10 @@ dialog::backdrop {
 	width: 1.5ch;
 	height: 1.5ch;
 }
-.playHintSpecial:nth-of-type(1):not(:last-of-type) { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-1); }
-.playHintSpecial:nth-of-type(2) { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-2); }
-.playHintSpecial:nth-of-type(3) { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-3); }
-.playHintSpecial:nth-of-type(4) { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-4); }
+.playHintSpecial:nth-of-type(1):not(:last-of-type) { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-1); }
+.playHintSpecial:nth-of-type(2) { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-2); }
+.playHintSpecial:nth-of-type(3) { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-3); }
+.playHintSpecial:nth-of-type(4) { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-4); }

 .card {
 	position: relative;
@ -581,6 +621,7 @@ dialog::backdrop {
 }
 .playContainer .card {
 	animation: 0.1s ease-out forwards flipCardIn;
+	height: 100%;
 }
 .playContainer .card.preview {
 	animation: none;
@ -607,15 +648,22 @@ svg.card text.cardDisplayName {
 	transform: scaleX(var(--scale));
 }

-rect.empty {
+#cardDisplayAssets {
+	position: absolute;
+	width: 0;
+	height: 0;
+}
+
+rect.Empty, rect.empty {
 	fill: #00000080;
 	stroke: #60606080;
 	stroke-width: 6;
 }
-.stageGrid rect.empty {
+.stageGrid rect.Empty {
 	stroke: grey;
 	stroke-width: 12;
 }
+rect.Wall { fill: grey; }

 rect.ink {
 	fill: var(--player-primary-colour);
@ -664,19 +712,19 @@ rect.special, g.specialCost rect {
 }

 #gameBoard td.Empty { background: #000000C0; outline: 1px solid #80808080; outline-offset: -1px; }
-#gameBoard td.Wall { background: url('assets/Wall.png') center/cover, grey; }
-#gameBoard td.Ink1 { background: url('assets/InkOverlay.png') center/cover, var(--primary-colour-1); }
-#gameBoard td.Ink2 { background: url('assets/InkOverlay.png') center/cover, var(--primary-colour-2); }
-#gameBoard td.Ink3 { background: url('assets/InkOverlay.png') center/cover, var(--primary-colour-3); }
-#gameBoard td.Ink4 { background: url('assets/InkOverlay.png') center/cover, var(--primary-colour-4); }
-#gameBoard td.SpecialInactive1 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-1); }
-#gameBoard td.SpecialInactive2 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-2); }
-#gameBoard td.SpecialInactive3 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-3); }
-#gameBoard td.SpecialInactive4 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-4); }
-#gameBoard td.SpecialActive1 { background: url('assets/SpecialOverlay.png') center/cover, radial-gradient(circle, var(--special-accent-colour-1) 25%, var(--special-colour-1) 75%); }
-#gameBoard td.SpecialActive2 { background: url('assets/SpecialOverlay.png') center/cover, radial-gradient(circle, var(--special-accent-colour-2) 25%, var(--special-colour-2) 75%); }
-#gameBoard td.SpecialActive3 { background: url('assets/SpecialOverlay.png') center/cover, radial-gradient(circle, var(--special-accent-colour-3) 25%, var(--special-colour-3) 75%); }
-#gameBoard td.SpecialActive4 { background: url('assets/SpecialOverlay.png') center/cover, radial-gradient(circle, var(--special-accent-colour-4) 25%, var(--special-colour-4) 75%); }
+#gameBoard td.Wall { background: url('assets/Wall.webp') center/cover, grey; }
+#gameBoard td.Ink1 { background: url('assets/InkOverlay.webp') center/cover, var(--primary-colour-1); }
+#gameBoard td.Ink2 { background: url('assets/InkOverlay.webp') center/cover, var(--primary-colour-2); }
+#gameBoard td.Ink3 { background: url('assets/InkOverlay.webp') center/cover, var(--primary-colour-3); }
+#gameBoard td.Ink4 { background: url('assets/InkOverlay.webp') center/cover, var(--primary-colour-4); }
+#gameBoard td.SpecialInactive1 { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-1); }
+#gameBoard td.SpecialInactive2 { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-2); }
+#gameBoard td.SpecialInactive3 { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-3); }
+#gameBoard td.SpecialInactive4 { background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-4); }
+#gameBoard td.SpecialActive1 { background: url('assets/SpecialOverlay.webp') center/cover, radial-gradient(circle, var(--special-accent-colour-1) 25%, var(--special-colour-1) 75%); }
+#gameBoard td.SpecialActive2 { background: url('assets/SpecialOverlay.webp') center/cover, radial-gradient(circle, var(--special-accent-colour-2) 25%, var(--special-colour-2) 75%); }
+#gameBoard td.SpecialActive3 { background: url('assets/SpecialOverlay.webp') center/cover, radial-gradient(circle, var(--special-accent-colour-3) 25%, var(--special-colour-3) 75%); }
+#gameBoard td.SpecialActive4 { background: url('assets/SpecialOverlay.webp') center/cover, radial-gradient(circle, var(--special-accent-colour-4) 25%, var(--special-colour-4) 75%); }

 #gameBoard.specialAttackVisual td:is(.Ink1, .Ink2, .Ink3, .Ink4) {
 	opacity: 0.5;
@ -729,6 +777,16 @@ rect.special, g.specialCost rect {
 	position: relative;
 }

+#gameBoard td.testHighlight::after {
+	content: '';
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	background: radial-gradient(#ffffff40, #ffffffc0 75%);
+}
+
 #gameBoard td.hover::after {
 	content: '';
 	position: absolute;
@ -751,14 +809,14 @@ rect.special, g.specialCost rect {
 	transform: rotate(-20deg);
 }

-#gameBoard td.hover1:not(.hoverillegal)::after { --hover-colour: var(--primary-colour-1); }
-#gameBoard td.hover2:not(.hoverillegal)::after { --hover-colour: var(--primary-colour-2); }
-#gameBoard td.hover3:not(.hoverillegal)::after { --hover-colour: var(--primary-colour-3); }
-#gameBoard td.hover4:not(.hoverillegal)::after { --hover-colour: var(--primary-colour-4); }
-#gameBoard td.hoverspecial.hover1:not(.hoverillegal)::after { --hover-colour: var(--special-colour-1); }
-#gameBoard td.hoverspecial.hover2:not(.hoverillegal)::after { --hover-colour: var(--special-colour-2); }
-#gameBoard td.hoverspecial.hover3:not(.hoverillegal)::after { --hover-colour: var(--special-colour-3); }
-#gameBoard td.hoverspecial.hover4:not(.hoverillegal)::after { --hover-colour: var(--special-colour-4); }
+#gamePage[data-my-player-index="0"] #gameBoard td.hover:not(.hoverillegal)::after { --hover-colour: var(--primary-colour-1); }
+#gamePage[data-my-player-index="1"] #gameBoard td.hover:not(.hoverillegal)::after { --hover-colour: var(--primary-colour-2); }
+#gamePage[data-my-player-index="2"] #gameBoard td.hover:not(.hoverillegal)::after { --hover-colour: var(--primary-colour-3); }
+#gamePage[data-my-player-index="3"] #gameBoard td.hover:not(.hoverillegal)::after { --hover-colour: var(--primary-colour-4); }
+#gamePage[data-my-player-index="0"] #gameBoard td.hoverspecial:not(.hoverillegal)::after { --hover-colour: var(--special-colour-1); }
+#gamePage[data-my-player-index="1"] #gameBoard td.hoverspecial:not(.hoverillegal)::after { --hover-colour: var(--special-colour-2); }
+#gamePage[data-my-player-index="2"] #gameBoard td.hoverspecial:not(.hoverillegal)::after { --hover-colour: var(--special-colour-3); }
+#gamePage[data-my-player-index="3"] #gameBoard td.hoverspecial:not(.hoverillegal)::after { --hover-colour: var(--special-colour-4); }
 #gameBoard td.hoverillegal::after { --hover-colour: grey; }

 /* Card list */
@ -766,6 +824,7 @@ rect.special, g.specialCost rect {
 #cardList {
 	grid-row: 2;
 	grid-column: 1 / -1;
+	padding-bottom: 4rem;
 }
 .cardListControl {
 	display: grid;
@ -779,6 +838,14 @@ rect.special, g.specialCost rect {
 	grid-auto-rows: max-content;
 }

+#deckEditorRemoveButton {
+	position: absolute;
+	right: 1em;
+	bottom: 1em;
+	font-size: 100%;
+	padding: 0.5em;
+}
+
 /* Game page */

 #gamePage:not([hidden]) {
@ -1143,13 +1210,28 @@ rect.special, g.specialCost rect {
 	margin: 1em;
 	gap: 1em;
 }
-#testPlacementList div {
+#testPlacementList button {
 	background: #222;
 	padding: 0.5em;
+	border: none;
+	font: inherit;
+	text-align: initial;
 }
-#testPlacementList div.deckCard {
+#testPlacementList button:hover {
+	background: #444;
+}
+#testPlacementList button.testHighlight {
+	background: #555;
+}
+#testPlacementList button.deckCard {
 	background: #246;
 }
+#testPlacementList button.deckCard:hover {
+	background: #468;
+}
+#testPlacementList button.deckCard.testHighlight {
+	background: #579;
+}

 #gameButtonsContainer {
 	grid-column: score-column;
@ -1218,10 +1300,10 @@ rect.special, g.specialCost rect {
 .playerBar .specialPoint {
 	position: relative;
 	color: transparent;
-  background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour);
+  background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour);
 }
 .playerBar .specialPoint.specialAnimation {
-	background: url('assets/SpecialOverlay.png') center/cover, radial-gradient(circle, var(--special-accent-colour) 25%, var(--special-colour) 75%);
+	background: url('assets/SpecialOverlay.webp') center/cover, radial-gradient(circle, var(--special-accent-colour) 25%, var(--special-colour) 75%);
 }
 .playerBar .specialPoint.specialAnimation > div {
 	background: color-mix(in srgb, var(--special-colour), var(--special-accent-colour) 75%);
@ -1692,7 +1774,7 @@ button.dragging {
 }

 #testStageSelectionList {
-	max-width: 52em;
+	max-width: 72em;
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: center;
@ -1711,7 +1793,7 @@ button.dragging {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: center;
-	max-width: 80em;
+	max-width: 88em;
 	gap: 1em;
 }

@ -1760,6 +1842,193 @@ button.dragging {
 #deckSleevesList label:nth-of-type(23) { background-position: -600% -200%; }
 #deckSleevesList label:nth-of-type(24) { background-position: -700% -200%; }
 #deckSleevesList label:nth-of-type(25) { background-position: 0% -300%; }
+#deckSleevesList label:nth-of-type(26) { background-position: -100% -300%; }
+#deckSleevesList label:nth-of-type(27) { background-position: -200% -300%; }
+#deckSleevesList label:nth-of-type(28) { background-position: -300% -300%; }
+#deckSleevesList label:nth-of-type(29) { background-position: -400% -300%; }
+#deckSleevesList label:nth-of-type(30) { background-position: -500% -300%; }
+#deckSleevesList label:nth-of-type(31) { background-position: -600% -300%; }
+
+/* Card list */
+
+#galleryPage:not([hidden]) {
+	height: 100vh;
+	display: flex;
+	flex-flow: column;
+}
+
+#galleryPage > header {
+	padding: 0.5em;
+}
+
+#galleryCardList {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, 10em);
+	grid-auto-rows: auto;
+	gap: 0.5em;
+	justify-content: space-evenly;
+	overflow-y: scroll;
+	padding-top: 0.5em;
+}
+
+#galleryCardList .card {
+	height: 14rem;
+	border: none;
+	background: none;
+	padding: 0;
+	transition: transform 0.25s ease;
+}
+
+#galleryCardList .card.unowned svg {
+	opacity: 0.333;
+}
+
+#galleryCardList .card:hover {
+	transform: scale(1.1);
+}
+
+#galleryCardList .card:hover .cardNumber {
+	display: block;
+	font-size: 1rem;
+	top: -0.5em;
+}
+
+#galleryCardDialog > .card {
+	height: min(75vh, 100vw);
+}
+
+#galleryCardEditor {
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	font-size: calc(min(75vh, 100vw) * 0.08);
+}
+
+#galleryCardEditorProperties {
+	position: absolute;
+	left: 5%;
+	top: 3%;
+	font: 33% 'Splatoon 2', sans-serif;
+	background: grey;
+	padding: 0 1em;
+}
+
+#galleryCardEditorName {
+	position: absolute;
+	left: 5%;
+	top: 8%;
+	width: 90%;
+	height: 20%;
+	color: black;
+	background: none;
+	border: none;
+	font: inherit;
+	line-height: 1.25em;
+	text-align: center;
+}
+
+.card.common #galleryCardEditorName { color: rgb(89, 49, 255); }
+.card.rare #galleryCardEditorName { color: rgb(231, 180, 39); }
+.card.fresh #galleryCardEditorName { color: white; }
+
+.card.editing :is(.cardDisplayName, .cardGrid) {
+	display: none;
+}
+
+#galleryCardEditorGrid {
+	position: absolute;
+	left: 20%;
+	right: 20%;
+	top: 25%;
+	aspect-ratio: 1;
+	display: grid;
+	grid-template-columns: repeat(8, 1fr);
+	grid-template-rows: repeat(8, 1fr);
+}
+
+#galleryCardEditorGrid button {
+	position: relative;
+	border: none;
+}
+:is(#galleryCardEditorGrid, #galleryCardEditorSpecialCost) button:is(:hover, :focus)::before  {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background: #ffffff80;
+	content: '';
+}
+
+#galleryCardEditorGrid button[data-state="0"] {
+	border: 1px solid grey;
+	background: #00000080;
+}
+#galleryCardEditorGrid button[data-state="4"] {
+	border: 1px solid grey;
+	background: url('assets/InkOverlay.webp') center/cover, var(--primary-colour-1);
+}
+#galleryCardEditorGrid button[data-state="8"] {
+	border: 1px solid grey;
+	background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-1);
+}
+
+.galleryCardEditorToolbar {
+	position: absolute;
+	right: 5%;
+	font: 33% 'Splatoon 2', sans-serif;
+	background: grey;
+	padding: 0 0.25em;
+}
+
+.galleryCardEditorToolbar footer {
+	font-size: 60%;
+}
+
+#galleryCardEditorImageToolbar { bottom: 18%; }
+#galleryCardEditorColoursToolbar { bottom: 12%; }
+#galleryCardEditorRarityToolbar { bottom: 6%; }
+
+#galleryCardEditorImageFile { display: none; }
+
+#galleryCardEditorColoursToolbar input {
+	width: 3em;
+}
+
+#galleryCardEditorColourPresetBox {
+	width: 1.8em;
+}
+
+#galleryCardEditorSpecialCost {
+	display: grid;
+	position: absolute;
+	grid-template-columns: repeat(5, 1fr);
+	left: 26.8%;
+	top: 86.2%;
+	gap: 0.15em 0.075em;
+}
+
+#galleryCardEditorSpecialCost button {
+	width: 2.5vh;
+	aspect-ratio: 1;
+	border: none;
+	background: #00000080;
+	position: relative;
+}
+#galleryCardEditorSpecialCost button.active {
+	background: url('assets/SpecialOverlay.webp') center/cover, var(--special-colour-1);
+}
+
+#galleryCardEditorSpecialCost label {
+	position: absolute;
+	left: 0;
+	top: 105%;
+	font: 33% 'Splatoon 2', sans-serif;
+	background: grey;
+	padding: 0 1em;
+}

 /* Help */

@ -1840,6 +2109,13 @@ button.dragging {
 	#lobbyStageSection, #lobbyDeckSection {
 		height: initial;
 		grid-column: 1 / -1;
+		grid-row: 2;
+	}
+
+	#lobbySelectedStageSection {
+		grid-row: 1;
+		grid-column: 2;
+		align-self: center;
 	}

 	#lobbySelectedStageSection .stage {
--- a/TableturfBattleServer/.vscode/launch.json
+++ b/TableturfBattleServer/.vscode/launch.json
@ -10,7 +10,7 @@
 			"request": "launch",
 			"preLaunchTask": "build",
 			// If you have changed target frameworks, make sure to update the program path.
-			"program": "${workspaceFolder}/bin/Debug/net6.0/TableturfBattleServer.dll",
+			"program": "${workspaceFolder}/bin/Debug/net8.0/TableturfBattleServer.dll",
 			"args": [],
 			"cwd": "${workspaceFolder}",
 			// For more information about the 'console' field, see https://aka.ms/VSCode-CS-LaunchJson-Console
--- a/TableturfBattleServer/ApiEndpointAttribute.cs
+++ b/TableturfBattleServer/ApiEndpointAttribute.cs
@ -0,0 +1,14 @@
+namespace TableturfBattleServer;
+[AttributeUsage(AttributeTargets.Method, AllowMultiple = true)]
+internal class ApiEndpointAttribute(ApiEndpointNamespace endpointNamespace, string path, string allowedMethod) : Attribute {
+	public ApiEndpointNamespace Namespace { get; } = endpointNamespace;
+	public string Path { get; } = path;
+	public string AllowedMethod { get; } = allowedMethod;
+
+	public ApiEndpointAttribute(string path, string allowedMethod) : this(ApiEndpointNamespace.ApiRoot, path, allowedMethod) { }
+}
+
+internal enum ApiEndpointNamespace {
+	ApiRoot,
+	Game
+}
--- a/TableturfBattleServer/ApiEndpoints.cs
+++ b/TableturfBattleServer/ApiEndpoints.cs
@ -0,0 +1,529 @@
+#pragma warning disable IDE0060 // Remove unused parameter
+
+using System.Net;
+using TableturfBattleServer.DTO;
+using HttpListenerRequest = WebSocketSharp.Net.HttpListenerRequest;
+using HttpListenerResponse = WebSocketSharp.Net.HttpListenerResponse;
+
+namespace TableturfBattleServer;
+internal static class ApiEndpoints {
+	internal static readonly char[] DELIMITERS = [',', ' '];
+	internal const int CUSTOM_CARD_START = -10000;
+	internal const int RECEIVED_CUSTOM_CARD_START = -20000;
+
+	[ApiEndpoint("/games/new", "POST")]
+	public static void ApiGamesNew(HttpListenerRequest request, HttpListenerResponse response) {
+		if (request.HttpMethod != "POST") {
+			response.AddHeader("Allow", "POST");
+			response.SetErrorResponse(new(HttpStatusCode.MethodNotAllowed, "MethodNotAllowed", "Invalid request method for this endpoint."));
+		} else if (Server.Instance.Lockdown) {
+			response.SetErrorResponse(new(HttpStatusCode.ServiceUnavailable, "ServerLocked", "The server is temporarily locked for an update. Please try again soon."));
+		} else if (request.ContentLength64 >= 65536) {
+			response.StatusCode = (int) HttpStatusCode.RequestEntityTooLarge;
+		} else {
+			try {
+				var d = HttpRequestHelper.DecodeFormData(request.InputStream);
+				Guid clientToken;
+				if (!d.TryGetValue("name", out var name)) {
+					response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidName", "Missing name."));
+					return;
+				}
+				if (name.Length > 32) {
+					response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidName", "Name is too long."));
+					return;
+				}
+				var maxPlayers = 2;
+				if (d.TryGetValue("maxPlayers", out var maxPlayersString)) {
+					if (!int.TryParse(maxPlayersString, out maxPlayers) || maxPlayers < 2 || maxPlayers > 4) {
+						response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidMaxPlayers", "Invalid player limit."));
+						return;
+					}
+				}
+				int? turnTimeLimit = null;
+				if (d.TryGetValue("turnTimeLimit", out var turnTimeLimitString) && turnTimeLimitString != "") {
+					if (!int.TryParse(turnTimeLimitString, out var turnTimeLimit2) || turnTimeLimit2 < 10) {
+						response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidTurnTimeLimit", "Invalid turn time limit."));
+						return;
+					}
+					turnTimeLimit = turnTimeLimit2;
+				}
+				int? goalWinCount = null;
+				if (d.TryGetValue("goalWinCount", out var goalWinCountString) && goalWinCountString != "") {
+					if (!int.TryParse(goalWinCountString, out var goalWinCount2) || goalWinCount2 < 1) {
+						response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidGoalWinCount", "Invalid goal win count."));
+						return;
+					}
+					goalWinCount = goalWinCount2;
+				}
+				if (d.TryGetValue("clientToken", out var tokenString) && tokenString != "") {
+					if (!Guid.TryParse(tokenString, out clientToken)) {
+						response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidClientToken", "Invalid client token."));
+						return;
+					}
+				} else
+					clientToken = Guid.NewGuid();
+
+				bool allowUpcomingCards;
+				if (d.TryGetValue("allowUpcomingCards", out var allowUpcomingCardsString)) {
+					if (!bool.TryParse(allowUpcomingCardsString, out allowUpcomingCards))
+						response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidGameSettings", "allowUpcomingCards was invalid."));
+				} else
+					allowUpcomingCards = true;
+
+				bool allowCustomCards;
+				if (d.TryGetValue("allowCustomCards", out var allowCustomCardsString)) {
+					if (!bool.TryParse(allowCustomCardsString, out allowCustomCards))
+						response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidGameSettings", "allowCustomCards was invalid."));
+				} else
+					allowCustomCards = false;
+
+				StageSelectionRules? stageSelectionRuleFirst = null, stageSelectionRuleAfterWin = null, stageSelectionRuleAfterDraw = null;
+				if (d.TryGetValue("stageSelectionRuleFirst", out var json1)) {
+					if (!HttpRequestHelper.TryParseStageSelectionRule(json1, maxPlayers, out stageSelectionRuleFirst) || stageSelectionRuleFirst.Method is StageSelectionMethod.Same or StageSelectionMethod.Counterpick) {
+						response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidGameSettings", "stageSelectionRuleFirst was invalid."));
+						return;
+					}
+				} else
+					stageSelectionRuleFirst = StageSelectionRules.Default;
+				if (d.TryGetValue("stageSelectionRuleAfterWin", out var json2)) {
+					if (!HttpRequestHelper.TryParseStageSelectionRule(json2, maxPlayers, out stageSelectionRuleAfterWin)) {
+						response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidGameSettings", "stageSelectionRuleAfterWin was invalid."));
+						return;
+					}
+				} else
+					stageSelectionRuleAfterWin = stageSelectionRuleFirst;
+				if (d.TryGetValue("stageSelectionRuleAfterDraw", out var json3)) {
+					if (!HttpRequestHelper.TryParseStageSelectionRule(json3, maxPlayers, out stageSelectionRuleAfterDraw) || stageSelectionRuleAfterDraw.Method == StageSelectionMethod.Counterpick) {
+						response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidGameSettings", "stageSelectionRuleAfterDraw was invalid."));
+						return;
+					}
+				} else
+					stageSelectionRuleAfterDraw = stageSelectionRuleFirst;
+
+				var forceSameDeckAfterDraw = false;
+				if (d.TryGetValue("forceSameDeckAfterDraw", out var forceSameDeckAfterDrawString)) {
+					if (!bool.TryParse(forceSameDeckAfterDrawString, out forceSameDeckAfterDraw))
+						response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidGameSettings", "forceSameDeckAfterDraw was invalid."));
+				} else
+					forceSameDeckAfterDraw = false;
+
+				var spectate = false;
+				if (d.TryGetValue("spectate", out var spectateString)) {
+					if (!bool.TryParse(spectateString, out spectate))
+						response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidGameSettings", "spectate was invalid."));
+				} else
+					spectate = false;
+
+				var game = new Game(maxPlayers) { HostClientToken = clientToken, GoalWinCount = goalWinCount, TurnTimeLimit = turnTimeLimit, AllowUpcomingCards = allowUpcomingCards, AllowCustomCards = allowCustomCards, StageSelectionRuleFirst = stageSelectionRuleFirst, StageSelectionRuleAfterWin = stageSelectionRuleAfterWin, StageSelectionRuleAfterDraw = stageSelectionRuleAfterDraw, ForceSameDeckAfterDraw = forceSameDeckAfterDraw };
+				if (!spectate)
+					game.TryAddPlayer(new(game, name, clientToken), out _, out _);
+				Server.Instance.games.Add(game.ID, game);
+				Server.Instance.timer.Start();
+
+				response.SetResponse(HttpStatusCode.OK, "application/json", JsonUtils.Serialise(new { gameID = game.ID, clientToken, maxPlayers }));
+				Console.WriteLine($"New game started: {game.ID}; {Server.Instance.games.Count} games active; {Server.Instance.inactiveGames.Count} inactive");
+			} catch (ArgumentException) {
+				response.SetErrorResponse(new(HttpStatusCode.BadRequest, "InvalidRequestData", "Invalid form data"));
+			}
+		}
+	}
+
+	[ApiEndpoint("/cards", "GET")]
+	public static void ApiCards(HttpListenerRequest request, HttpListenerResponse response)
+		=> HttpRequestHelper.SetStaticResponse(request, response, CardDatabase.JSON, CardDatabase.Version.ToString(), CardDatabase.LastModified);
+
+	[ApiEndpoint("/stages", "GET")]
+	public static void ApiStages(HttpListenerRequest request, HttpListenerResponse response)
+		=> HttpRequestHelper.SetStaticResponse(request, response, StageDatabase.JSON, StageDatabase.Version.ToString(), StageDatabase.LastModified);
+
+	[ApiEndpoint(ApiEndpointNamespace.Game, "/", "GET")]
+	public static void ApiGameRoot(Game game, HttpListenerRequest request, HttpListenerResponse response)
+		=> response.SetResponse(HttpStatusCode.OK, "application/json", JsonUtils.Serialise(game));
+
+	[ApiEndpoint(ApiEndpointNamespace.Game, "/playerData", "GET")]
+	public static void ApiGamePlayerData(Game game, HttpListenerRequest request, HttpListenerResponse response) {
+		if (request.QueryString["clientToken"] is not string s || !Guid.TryParse(s, out var clientToken))
+			clientToken = Guid.Empty;
+
+		response.SetResponse(HttpStatusCode.OK, "application/json", JsonUtils.Serialise(new {
+			game,
+			playerData = game.GetPlayer(clientToken, out var playerIndex, out var player)
+				? new PlayerData(playerIndex, player)
+				: null
+		}));
+	}
+
+	[ApiEndpoint(ApiEndpointNamespace.Game, "/join", "POST")]
+	public static void ApiGameJoin(Game game, HttpListenerRequest request, HttpListenerResponse response) {
+		try {
+			var d = HttpRequestHelper.DecodeFormData(request.InputStream);
+			Guid clientToken;
+			if (!d.TryGetValue("name", out var name)) {
+				response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidName", "Missing name."));
+				return;
+			}
+			if (name.Length > 32) {
+				response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidName", "Name is too long."));
+				return;
+			}
+			if (d.TryGetValue("clientToken", out var tokenString) && tokenString != "") {
+				if (!Guid.TryParse(tokenString, out clientToken)) {
+					response.SetErrorResponse(new(HttpStatusCode.BadRequest, "InvalidClientToken", "Invalid client token."));
+					return;
+				}
+			} else
+				clientToken = Guid.NewGuid();
+
+			if (!game.GetPlayer(clientToken, out var playerIndex, out var player)) {
+				if (game.State != GameState.WaitingForPlayers) {
+					response.SetErrorResponse(new(HttpStatusCode.Gone, "GameAlreadyStarted", "The game has already started."));
+					return;
+				}
+
+				player = new Player(game, name, clientToken);
+				if (!game.TryAddPlayer(player, out playerIndex, out var error)) {
+					response.SetErrorResponse(error);
+					return;
+				}
+
+				game.SendEvent("join", new { playerIndex, player }, false);
+			}
+			// If they're already in the game, resend the original join response instead of an error.
+			response.SetResponse(HttpStatusCode.OK, "application/json", JsonUtils.Serialise(new { playerIndex, clientToken }));
+			Server.Instance.timer.Start();
+		} catch (ArgumentException) {
+			response.SetErrorResponse(new(HttpStatusCode.BadRequest, "InvalidRequestData", "Invalid form data"));
+		}
+	}
+
+	[ApiEndpoint(ApiEndpointNamespace.Game, "/setGameSettings", "POST")]
+	public static void ApiGameSetGameSettings(Game game, HttpListenerRequest request, HttpListenerResponse response) {
+		var d = HttpRequestHelper.DecodeFormData(request.InputStream);
+		if (!d.TryGetValue("clientToken", out var tokenString) || !Guid.TryParse(tokenString, out var clientToken)) {
+			response.SetErrorResponse(new(HttpStatusCode.BadRequest, "InvalidClientToken", "Invalid client token."));
+			return;
+		}
+		if (clientToken != game.HostClientToken) {
+			response.SetErrorResponse(new(HttpStatusCode.Forbidden, "AccessDenied", "Only the host can do that."));
+			return;
+		}
+		if (game.State != GameState.WaitingForPlayers) {
+			response.SetErrorResponse(new(HttpStatusCode.Gone, "GameAlreadyStarted", "The game has already started."));
+			return;
+		}
+
+		if (d.TryGetValue("turnTimeLimit", out var turnTimeLimitString)) {
+			if (turnTimeLimitString == "")
+				game.TurnTimeLimit = null;
+			else if (!int.TryParse(turnTimeLimitString, out var turnTimeLimit2) || turnTimeLimit2 < 10) {
+				response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidGameSettings", "Invalid turn time limit."));
+				return;
+			} else
+				game.TurnTimeLimit = turnTimeLimit2;
+		}
+
+		if (d.TryGetValue("allowUpcomingCards", out var allowUpcomingCardsString)) {
+			if (!bool.TryParse(allowUpcomingCardsString, out var allowUpcomingCards)) {
+				response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidGameSettings", "Invalid allowUpcomingCards."));
+				return;
+			} else
+				game.AllowUpcomingCards = allowUpcomingCards;
+		}
+
+		if (d.TryGetValue("allowCustomCards", out var allowCustomCardsString)) {
+			if (!bool.TryParse(allowCustomCardsString, out var allowCustomCards)) {
+				response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidGameSettings", "Invalid allowCustomCards."));
+				return;
+			} else
+				game.AllowCustomCards = allowCustomCards;
+		}
+
+		game.SendEvent("settingsChange", game, false);
+	}
+
+	[ApiEndpoint(ApiEndpointNamespace.Game, "/chooseStage", "POST")]
+	public static void ApiGameChooseStage(Game game, HttpListenerRequest request, HttpListenerResponse response) {
+		var d = HttpRequestHelper.DecodeFormData(request.InputStream);
+		if (!d.TryGetValue("clientToken", out var tokenString) || !Guid.TryParse(tokenString, out var clientToken)) {
+			response.SetErrorResponse(new(HttpStatusCode.BadRequest, "InvalidClientToken", "Invalid client token."));
+			return;
+		}
+		if (!game.GetPlayer(clientToken, out var playerIndex, out var player)) {
+			response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "NotInGame", "You're not in the game."));
+			return;
+		}
+		if (!d.TryGetValue("stages", out var stagesString)) {
+			response.SetErrorResponse(new(HttpStatusCode.BadRequest, "InvalidStage", "Missing stages."));
+			return;
+		}
+
+		var stages = new HashSet<int>();
+		foreach (var field in stagesString.Split(DELIMITERS, StringSplitOptions.RemoveEmptyEntries)) {
+			if (!int.TryParse(field, out var i)) {
+				response.SetErrorResponse(new(HttpStatusCode.BadRequest, "InvalidStage", "Invalid stages."));
+				return;
+			}
+			stages.Add(i);
+		}
+
+		if (!game.TryChooseStages(player, stages, out var error)) {
+			response.SetErrorResponse(error);
+			return;
+		}
+
+		response.StatusCode = (int) HttpStatusCode.NoContent;
+		game.SendPlayerReadyEvent(playerIndex, false);
+		Server.Instance.timer.Start();
+	}
+
+	[ApiEndpoint(ApiEndpointNamespace.Game, "/chooseDeck", "POST")]
+	public static void ApiGameChooseDeck(Game game, HttpListenerRequest request, HttpListenerResponse response) {
+		try {
+			var d = HttpRequestHelper.DecodeFormData(request.InputStream);
+			if (!d.TryGetValue("clientToken", out var tokenString) || !Guid.TryParse(tokenString, out var clientToken)) {
+				response.SetErrorResponse(new(HttpStatusCode.BadRequest, "InvalidClientToken", "Invalid client token."));
+				return;
+			}
+			if (!game.GetPlayer(clientToken, out var playerIndex, out var player)) {
+				response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "NotInGame", "You're not in the game."));
+				return;
+			}
+			if (player.CurrentGameData.Deck != null) {
+				response.SetErrorResponse(new(HttpStatusCode.Conflict, "DeckAlreadyChosen", "You've already chosen a deck."));
+				return;
+			}
+
+			if (!d.TryGetValue("deckName", out var deckName)) {
+				response.SetErrorResponse(new(HttpStatusCode.BadRequest, "InvalidDeckName", "Missing deck name."));
+				return;
+			}
+			var deckSleeves = 0;
+			if (d.TryGetValue("deckSleeves", out var deckSleevesString) && !int.TryParse(deckSleevesString, out deckSleeves)) {
+				response.SetErrorResponse(new(HttpStatusCode.BadRequest, "InvalidDeckSleeves", "Invalid deck sleeves."));
+				return;
+			}
+			if (!d.TryGetValue("deckCards", out var deckString)) {
+				response.SetErrorResponse(new(HttpStatusCode.BadRequest, "InvalidDeckCards", "Missing deck cards."));
+				return;
+			}
+
+			Dictionary<int, UserCustomCard>? userCustomCards = null;
+			List<KeyValuePair<int, Card>>? customCardsToAdd = null;
+			if (d.TryGetValue("customCards", out var customCardsString)) {
+				if (!game.AllowCustomCards) {
+					response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "CustomCardsNotAllowed", "Custom cards cannot be used in this game."));
+					return;
+				}
+				userCustomCards = JsonUtils.Deserialise<Dictionary<int, UserCustomCard>>(customCardsString);
+
+				// Validate custom cards.
+				if (userCustomCards is null || userCustomCards.Count > 15 || userCustomCards.Keys.Any(k => k is not (<= -10000 and >= short.MinValue))) {
+					response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidCustomCards", "Invalid custom cards."));
+					return;
+				}
+
+				customCardsToAdd = new(userCustomCards.Count);
+				foreach (var (k, v) in userCustomCards) {
+					if (!v.CheckGrid(out var hasSpecialSpace, out var size)) {
+						response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidCustomCards", $"Custom card {k} is invalid."));
+						return;
+					}
+					// Allow resending the same custom card, but not a different custom card with the same key.
+					if (player.customCardMap.TryGetValue(k, out var existingCustomCardNumber)) {
+						if (!v.Equals(game.customCards[RECEIVED_CUSTOM_CARD_START - existingCustomCardNumber])) {
+							response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidCustomCards", $"Cannot reuse custom card number {k}."));
+							return;
+						}
+					} else {
+						// TODO: Consolidate identical custom cards brought by different players.
+						var card = v.ToCard(RECEIVED_CUSTOM_CARD_START - (game.customCards.Count + customCardsToAdd.Count), k, !hasSpecialSpace && size >= 8 ? 3 : null);
+						customCardsToAdd.Add(new(k, card));
+					}
+				}
+			}
+
+			var array = deckString.Split([',', '+', ' '], 15);
+			if (array.Length != 15) {
+				response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidDeckCards", "Invalid deck list."));
+				return;
+			}
+			int[]? upgrades = null;
+			if (d.TryGetValue("deckUpgrades", out var deckUpgradesString)) {
+				upgrades = new int[15];
+				var array2 = deckUpgradesString.Split([',', '+', ' '], 15);
+				for (var i = 0; i < 15; i++) {
+					if (int.TryParse(array2[i], out var j) && i is >= 0 and <= 2)
+						upgrades[i] = j;
+					else {
+						response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidDeckUpgrades", "Invalid deck upgrade list."));
+						return;
+					}
+				}
+			}
+			var cards = new int[15];
+			for (var i = 0; i < 15; i++) {
+				if (!int.TryParse(array[i], out var cardNumber) || (!CardDatabase.IsValidCardNumber(cardNumber) && (userCustomCards == null || !userCustomCards.ContainsKey(cardNumber)))) {
+					response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidDeckCards", "Invalid deck list."));
+					return;
+				}
+				if (Array.IndexOf(cards, cardNumber, 0, i) >= 0) {
+					response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "InvalidDeckCards", "Deck cannot have duplicates."));
+					return;
+				}
+				if (!game.AllowUpcomingCards && cardNumber is < 0 and > CUSTOM_CARD_START && CardDatabase.GetCard(cardNumber).Number < 0) {
+					response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "ForbiddenDeck", "Upcoming cards cannot be used in this game."));
+					return;
+				}
+				// Translate custom card numbers from the player to game-scoped card numbers.
+				cards[i] = player.customCardMap.TryGetValue(cardNumber, out var n) ? n : cardNumber <= CUSTOM_CARD_START && customCardsToAdd?.FirstOrDefault(e => e.Key == cardNumber).Value is Card customCard ? customCard.Number : cardNumber;
+			}
+
+			if (customCardsToAdd != null) {
+				foreach (var (userKey, card) in customCardsToAdd) {
+					player.customCardMap.Add(userKey, card.Number);
+					game.customCards.Add(card);
+				}
+			}
+			player.CurrentGameData.Deck = game.GetDeck(deckName, deckSleeves, cards, upgrades ?? Enumerable.Repeat(0, 15));
+			response.StatusCode = (int) HttpStatusCode.NoContent;
+			game.SendPlayerReadyEvent(playerIndex, false);
+			Server.Instance.timer.Start();
+		} catch (ArgumentException) {
+			response.SetErrorResponse(new(HttpStatusCode.BadRequest, "InvalidRequestData", "Invalid form data"));
+		}
+	}
+
+	[ApiEndpoint(ApiEndpointNamespace.Game, "/play", "POST")]
+	public static void ApiGamePlay(Game game, HttpListenerRequest request, HttpListenerResponse response) {
+		try {
+			var d = HttpRequestHelper.DecodeFormData(request.InputStream);
+			if (!d.TryGetValue("clientToken", out var tokenString) || !Guid.TryParse(tokenString, out var clientToken)) {
+				response.SetErrorResponse(new(HttpStatusCode.BadRequest, "InvalidClientToken", "Invalid client token."));
+				return;
+			}
+			if (game.State != GameState.Ongoing) {
+				response.SetErrorResponse(new(HttpStatusCode.Conflict, "GameNotSetUp", "You can't do that in this game state."));
+				return;
+			}
+			if (!game.GetPlayer(clientToken, out var playerIndex, out var player)) {
+				response.SetErrorResponse(new(HttpStatusCode.Forbidden, "NotInGame", "You're not in the game."));
+				return;
+			}
+
+			if (player.Move != null) {
+				response.SetErrorResponse(new(HttpStatusCode.Conflict, "MoveAlreadyChosen", "You've already chosen a move."));
+				return;
+			}
+
+			if (!d.TryGetValue("cardNumber", out var cardNumberStr) || !int.TryParse(cardNumberStr, out var cardNumber)) {
+				response.SetErrorResponse(new(HttpStatusCode.BadRequest, "InvalidCard", "Missing or invalid card number."));
+				return;
+			}
+
+			var handIndex = player.GetHandIndex(cardNumber);
+			if (handIndex < 0) {
+				response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "MissingCard", "You don't have that card."));
+				return;
+			}
+
+			var isTimeout = d.TryGetValue("isTimeout", out var isTimeoutStr) && isTimeoutStr.ToLower() is not ("false" or "0");
+
+			var card = player.Hand![handIndex];
+			if (d.TryGetValue("isPass", out var isPassStr) && isPassStr.ToLower() is not ("false" or "0")) {
+				player.Move = new(card, true, 0, 0, 0, false, isTimeout);
+			} else {
+				var isSpecialAttack = d.TryGetValue("isSpecialAttack", out var isSpecialAttackStr) && isSpecialAttackStr.ToLower() is not ("false" or "0");
+				if (!d.TryGetValue("x", out var xs) || !int.TryParse(xs, out var x)
+					|| !d.TryGetValue("y", out var ys) || !int.TryParse(ys, out var y)
+					|| !d.TryGetValue("r", out var rs) || !int.TryParse(rs, out var r)) {
+					response.SetErrorResponse(new(HttpStatusCode.BadRequest, "InvalidPosition", "Missing or invalid position."));
+					return;
+				}
+				r &= 3;
+				if (!game.CanPlay(playerIndex, card, x, y, r, isSpecialAttack)) {
+					response.SetErrorResponse(new(HttpStatusCode.UnprocessableEntity, "IllegalMove", "Illegal move"));
+					return;
+				}
+				player.Move = new(card, false, x, y, r, isSpecialAttack, isTimeout);
+			}
+			response.StatusCode = (int) HttpStatusCode.NoContent;
+			game.SendPlayerReadyEvent(playerIndex, isTimeout);
+			Server.Instance.timer.Start();
+		} catch (ArgumentException) {
+			response.StatusCode = (int) HttpStatusCode.BadRequest;
+		}
+	}
+
+	[ApiEndpoint(ApiEndpointNamespace.Game, "/redraw", "POST")]
+	public static void ApiGameRedraw(Game game, HttpListenerRequest request, HttpListenerResponse response) {
+		try {
+			if (game.State != GameState.Redraw) {
+				response.SetErrorResponse(new(HttpStatusCode.Conflict, "GameNotSetUp", "You can't do that in this game state."));
+				return;
+			}
+
+			var d = HttpRequestHelper.DecodeFormData(request.InputStream);
+			if (!d.TryGetValue("clientToken", out var tokenString) || !Guid.TryParse(tokenString, out var clientToken)) {
+				response.SetErrorResponse(new(HttpStatusCode.BadRequest, "InvalidClientToken", "Invalid client token."));
+				return;
+			}
+			if (!game.GetPlayer(clientToken, out var playerIndex, out var player)) {
+				response.SetErrorResponse(new(HttpStatusCode.Forbidden, "NotInGame", "You're not in the game."));
+				return;
+			}
+
+			if (player.Move != null) {
+				response.SetErrorResponse(new(HttpStatusCode.Conflict, "MoveAlreadyChosen", "You've already chosen a move."));
+				return;
+			}
+
+			var redraw = d.TryGetValue("redraw", out var redrawStr) && redrawStr.ToLower() is not ("false" or "0");
+			player.Move = new(player.Hand![0], false, 0, 0, 0, redraw, false);
+			response.StatusCode = (int) HttpStatusCode.NoContent;
+			game.SendPlayerReadyEvent(playerIndex, false);
+			Server.Instance.timer.Start();
+		} catch (ArgumentException) {
+			response.StatusCode = (int) HttpStatusCode.BadRequest;
+		}
+	}
+
+	[ApiEndpoint(ApiEndpointNamespace.Game, "/nextGame", "POST")]
+	public static void ApiGameNextGame(Game game, HttpListenerRequest request, HttpListenerResponse response) {
+		try {
+			if (game.State is not (GameState.GameEnded or GameState.SetEnded)) {
+				response.SetErrorResponse(new(HttpStatusCode.Conflict, "GameNotSetUp", "You can't do that in this game state."));
+				return;
+			}
+
+			var d = HttpRequestHelper.DecodeFormData(request.InputStream);
+			if (!d.TryGetValue("clientToken", out var tokenString) || !Guid.TryParse(tokenString, out var clientToken)) {
+				response.SetErrorResponse(new(HttpStatusCode.BadRequest, "InvalidClientToken", "Invalid client token."));
+				return;
+			}
+			if (!game.GetPlayer(clientToken, out var playerIndex, out var player)) {
+				response.SetErrorResponse(new(HttpStatusCode.Forbidden, "NotInGame", "You're not in the game."));
+				return;
+			}
+
+			if (player.Move == null) {
+				player.Move = new(player.Hand![0], false, 0, 0, 0, false, false);  // Dummy move to indicate that the player is ready.
+				game.SendPlayerReadyEvent(playerIndex, false);
+			}
+			response.StatusCode = (int) HttpStatusCode.NoContent;
+			Server.Instance.timer.Start();
+		} catch (ArgumentException) {
+			response.StatusCode = (int) HttpStatusCode.BadRequest;
+		}
+	}
+
+	[ApiEndpoint(ApiEndpointNamespace.Game, "/replay", "GET")]
+	public static void ApiGameReplay(Game game, HttpListenerRequest request, HttpListenerResponse response) {
+		if (game.State != GameState.SetEnded) {
+			response.SetErrorResponse(new(HttpStatusCode.Conflict, "GameInProgress", "You can't see the replay until the set has ended."));
+			return;
+		}
+		var ms = new MemoryStream();
+		game.WriteReplayData(ms);
+		response.SetResponse(HttpStatusCode.OK, "application/octet-stream", ms.ToArray());
+	}
+}
--- a/TableturfBattleServer/Card.cs
+++ b/TableturfBattleServer/Card.cs
@ -9,35 +9,35 @@ public class Card {
 	public int SpecialCost { get; }
 	[JsonIgnore]
 	public int Size { get; }
+	public int? IsVariantOf { get; init; }

-	public string? Line1 { get; init; }
+	public string Line1 { get; init; }
 	public string? Line2 { get; init; }
 	public string? ArtFileName { get; init; }
-	public float TextScale { get; init; }
 	public Colour? InkColour1 { get; init; }
 	public Colour? InkColour2 { get; init; }

 	[JsonProperty]
 	private readonly Space[,] grid;

-	internal Card(int number, string name, Rarity rarity, float textScale, string? artFileName, Space[,] grid) : this(number, null, name, rarity, null, textScale, artFileName, grid) { }
-	internal Card(int number, int? altNumber, string name, Rarity rarity, float textScale, string? artFileName, Space[,] grid) : this(number, altNumber, name, rarity, null, textScale, artFileName, grid) { }
-	internal Card(int number, string name, Rarity rarity, int? specialCost, float textScale, string? artFileName, Space[,] grid) : this(number, null, name, rarity, specialCost, textScale, artFileName, grid) { }
-	internal Card(int number, int? altNumber, string name, Rarity rarity, int? specialCost, float textScale, string? artFileName, Space[,] grid) {
+	internal Card(int number, string name, Rarity rarity, string? artFileName, Space[,] grid) : this(number, null, name, rarity, null, artFileName, grid) { }
+	internal Card(int number, int? altNumber, string name, Rarity rarity, string? artFileName, Space[,] grid) : this(number, altNumber, name, rarity, null, artFileName, grid) { }
+	internal Card(int number, string name, Rarity rarity, int? specialCost, string? artFileName, Space[,] grid) : this(number, null, name, rarity, specialCost, artFileName, grid) { }
+	internal Card(int number, int? altNumber, string name, Rarity rarity, int? specialCost, string? artFileName, Space[,] grid) {
 		this.Number = number;
 		this.AltNumber = altNumber;
 		this.Rarity = rarity;
-		this.TextScale = textScale;
 		this.ArtFileName = artFileName;
 		this.grid = grid ?? throw new ArgumentNullException(nameof(grid));

 		var pos = (name ?? throw new ArgumentNullException(nameof(name))).IndexOf('\n');
-		if (pos < 0)
+		if (pos < 0) {
 			this.Name = name;
-		else {
+			this.Line1 = name;
+		} else {
 			this.Name = name[pos - 1] == '-' ? name.Remove(pos, 1) : name.Replace('\n', ' ');
 			this.Line1 = name[0..pos];
-			this.Line2 = name[(pos + 1)..];
+			this.Line2 = name[(pos + 1)..];
 		}

 		var size = 0;
@ -58,7 +58,6 @@ public class Card {
 			}
 		}
 		this.Size = size;
-
 		this.SpecialCost = specialCost ?? size switch { <= 3 => 1, <= 5 => 2, <= 8 => 3, <= 11 => 4, <= 15 => 5, _ => 6 };
 	}

--- a/TableturfBattleServer/CardDatabase.cs
+++ b/TableturfBattleServer/CardDatabase.cs
--- a/TableturfBattleServer/DataStructures.cs
+++ b/TableturfBattleServer/DataStructures.cs
@ -8,8 +8,9 @@ internal class WebSocketPayload<T>(string eventName, T payload) {
 	[JsonProperty("data")]
 	public T Payload = payload;
 }
-internal class WebSocketPayloadWithPlayerData<T>(string eventName, T payload, PlayerData? playerData) : WebSocketPayload<T>(eventName, payload) {
+internal class WebSocketPayloadWithPlayerData<T>(string eventName, T payload, PlayerData? playerData, bool isHost) : WebSocketPayload<T>(eventName, payload) {
 	public PlayerData? PlayerData = playerData;
+	public bool IsHost = isHost;
 }

 public class PlayerData(int playerIndex, Card[]? hand, Deck? deck, Move? move, List<int>? cardsUsed, StageSelectionPrompt? stageSelectionPrompt) {
@ -22,3 +23,43 @@ public class PlayerData(int playerIndex, Card[]? hand, Deck? deck, Move? move, L

 	public PlayerData(int playerIndex, Player player) : this(playerIndex, player.Hand, player.CurrentGameData.Deck, player.Move, player.CardsUsed, player.StageSelectionPrompt) { }
 }
+
+public record UserCustomCard(string Name, string? Line1, string? Line2, int? SpecialCost, Colour InkColour1, Colour InkColour2, Rarity Rarity, Space[,] Grid) {
+	public bool CheckGrid(out bool hasSpecialSpace, out int size) {
+		size = 0;
+		hasSpecialSpace = false;
+		if (this.Grid is null || this.Grid.GetLength(0) != 8 || this.Grid.GetLength(1) != 8) return false;
+		for (var x = 0; x < 8; x++) {
+			for (var y = 0; y < 8; y++) {
+				switch (this.Grid[x, y]) {
+					case Space.Empty:
+						break;
+					case Space.Ink1:
+						size++;
+						break;
+					case Space.SpecialInactive1:
+						if (hasSpecialSpace) return false;
+						size++;
+						hasSpecialSpace = true;
+						break;
+					default:
+						return false;
+				}
+			}
+		}
+		// TODO: Maybe also check that the ink pattern is fully connected.
+		return size > 0;
+	}
+
+	public bool Equals(Card? card) {
+		if (card is null || card.Name != this.Name || card.Rarity != this.Rarity || card.SpecialCost != this.SpecialCost) return false;
+		for (var x = 0; x < 8; x++) {
+			for (var y = 0; y < 8; y++) {
+				if (this.Grid[x, y] != card.GetSpace(x, y, 0)) return false;
+			}
+		}
+		return true;
+	}
+
+	public Card ToCard(int number, int altNumber, int? defaultSpecialCost) => new(number, altNumber, this.Line2 != null ? $"{this.Line1}\n{this.Line2}" : this.Name, this.Rarity, this.SpecialCost ?? defaultSpecialCost, null, this.Grid) { InkColour1 = this.InkColour1, InkColour2 = this.InkColour2 };
+}
--- a/TableturfBattleServer/Game.cs
+++ b/TableturfBattleServer/Game.cs
@ -11,6 +11,8 @@ public class Game(int maxPlayers) {
 	public GameState State { get; set; }
 	public int TurnNumber { get; set; }
 	public List<Player> Players { get; } = new(4);
+	[JsonIgnore]
+	internal Guid HostClientToken { get; set; }
 	public int MaxPlayers { get; set; } = maxPlayers;
 	[JsonProperty("stage")]
 	public int? StageIndex { get; private set; }
@ -24,6 +26,9 @@ public class Game(int maxPlayers) {
 	[JsonIgnore]
 	internal DateTime abandonedSince = DateTime.UtcNow;

+	public bool AllowUpcomingCards { get; set; } = true;
+	public bool AllowCustomCards { get; set; }
+
 	public required StageSelectionRules StageSelectionRuleFirst { get; set; }
 	public required StageSelectionRules StageSelectionRuleAfterWin { get; set; }
 	public required StageSelectionRules StageSelectionRuleAfterDraw { get; set; }
@ -34,6 +39,8 @@ public class Game(int maxPlayers) {
 	[JsonIgnore]
 	internal List<Deck> deckCache = [];
 	[JsonIgnore]
+	internal List<Card> customCards = [];
+	[JsonIgnore]
 	internal List<int> setStages = [];

 	private static readonly PlayerColours[] Colours = [
@ -108,6 +115,10 @@ public class Game(int maxPlayers) {
 				return false;
 			}
 		} else {
+			if (stages.Any(i => i >= StageDatabase.Stages.Count)) {
+				error = new(HttpStatusCode.UnprocessableEntity, "InvalidStage", "Invalid stage selection.");
+				return false;
+			}
 			var rule = this.GetCurrentStageSelectionRule();
 			if (stages.Intersect(rule.BannedStages).Any()) {
 				error = new(HttpStatusCode.UnprocessableEntity, "IllegalStage", "A selected stage is banned.");
@ -118,10 +129,6 @@ public class Game(int maxPlayers) {
 				return false;
 			}
 		}
-		if (stages.Any(i => i >= StageDatabase.Stages.Count)) {
-			error = new(HttpStatusCode.UnprocessableEntity, "StageNotFound", "No such stage is known.");
-			return false;
-		}
 		player.selectedStages = stages;
 		error = default;
 		return true;
@ -130,7 +137,7 @@ public class Game(int maxPlayers) {
 	public Deck GetDeck(string name, int sleeves, IEnumerable<int> cardNumbers, IEnumerable<int> cardUpgrades) {
 		var deck = this.deckCache.FirstOrDefault(d => d.Name == name && d.Sleeves == sleeves && cardNumbers.SequenceEqual(from c in d.Cards select c.Number) && cardUpgrades.SequenceEqual(d.Upgrades));
 		if (deck == null) {
-			deck = new(name, sleeves, (from i in cardNumbers select CardDatabase.GetCard(i)).ToArray(), cardUpgrades.ToArray());
+			deck = new(name, sleeves, (from i in cardNumbers select i <= ApiEndpoints.RECEIVED_CUSTOM_CARD_START ? customCards[ApiEndpoints.RECEIVED_CUSTOM_CARD_START - i] : CardDatabase.GetCard(i)).ToArray(), cardUpgrades.ToArray());
 			this.deckCache.Add(deck);
 		}
 		return deck;
@ -488,10 +495,10 @@ public class Game(int maxPlayers) {
 		var stage = StageDatabase.Stages[stageIndex];
 		this.StageIndex = stageIndex;
 		this.setStages.Add(stageIndex);
-		this.Board = (Space[,]) stage.grid.Clone();
+		this.Board = (Space[,]) stage.Grid.Clone();

 		// Place starting positions.
-		var list = stage.startSpaces.Where(s => s.Length >= this.Players.Count).MinBy(s => s.Length) ?? throw new InvalidOperationException("Couldn't find start spaces");
+		var list = stage.StartSpaces.Where(s => s.Length >= this.Players.Count).MinBy(s => s.Length) ?? throw new InvalidOperationException("Couldn't find start spaces");
 		this.StartSpaces = list;
 		for (int i = 0; i < this.Players.Count; i++)
 			this.Board[list[i].X, list[i].Y] = Space.SpecialInactive1 | (Space) i;
@ -627,7 +634,7 @@ public class Game(int maxPlayers) {
 							break;
 						}
 					}
-					behaviour.SendInternal(JsonUtils.Serialise(new DTO.WebSocketPayloadWithPlayerData<T>(eventType, data, playerData)));
+					behaviour.SendInternal(JsonUtils.Serialise(new DTO.WebSocketPayloadWithPlayerData<T>(eventType, data, playerData, behaviour.ClientToken == this.HostClientToken)));
 				} else {
 					behaviour.SendInternal(JsonUtils.Serialise(new DTO.WebSocketPayload<T>(eventType, data)));
 				}
@ -636,7 +643,7 @@ public class Game(int maxPlayers) {
 	}

 	public void WriteReplayData(Stream stream) {
-		const int VERSION = 3;
+		const int VERSION = 5;

 		if (this.State < GameState.SetEnded)
 			throw new InvalidOperationException("Can't save a replay until the set has ended.");
@ -662,13 +669,32 @@ public class Game(int maxPlayers) {
 			writer.Write(nameBytes);
 		}

+		// Custom cards
+		writer.Write7BitEncodedInt(this.customCards.Count);
+		foreach (var card in this.customCards) {
+			writer.Write(card.Line1 ?? card.Name);
+			writer.Write(card.Line2 ?? "");
+			writer.Write((byte) card.Rarity);
+			writer.Write((byte) card.SpecialCost);
+			writer.Write((byte) card.InkColour1.GetValueOrDefault().R);
+			writer.Write((byte) card.InkColour1.GetValueOrDefault().G);
+			writer.Write((byte) card.InkColour1.GetValueOrDefault().B);
+			writer.Write((byte) card.InkColour2.GetValueOrDefault().R);
+			writer.Write((byte) card.InkColour2.GetValueOrDefault().G);
+			writer.Write((byte) card.InkColour2.GetValueOrDefault().B);
+			for (var x = 0; x < 8; x++) {
+				for (var y = 0; y < 8; y += 4)
+					writer.Write((byte) ((int) card.GetSpace(x, y, 0) >> 2 | (int) card.GetSpace(x, y + 1, 0) | (int) card.GetSpace(x, y + 2, 0) << 2 | (int) card.GetSpace(x, y + 3, 0) << 4));
+			}
+		}
+
 		// Deck cache
 		writer.Write7BitEncodedInt(this.deckCache.Count);
 		foreach (var deck in this.deckCache) {
 			writer.Write(deck.Name);
 			writer.Write((byte) deck.Sleeves);
 			foreach (var card in deck.Cards)
-				writer.Write((byte) card.Number);
+				writer.Write((short) card.Number);

 			int upgradesPacked = 0;
 			for (var i = 0; i < 15; i++)
@ -692,7 +718,7 @@ public class Game(int maxPlayers) {
 			for (int j = 0; j < 12; j++) {
 				foreach (var player in this.Players) {
 					var move = player.Games[i].turns[j];
-					writer.Write((byte) move.CardNumber);
+					writer.Write((short) move.CardNumber);
 					writer.Write((byte) ((move.Rotation & 3) | (move.IsPass ? 0x80 : 0) | (move.IsSpecialAttack ? 0x40 : 0) | (move.IsTimeout ? 0x20 : 0)));
 					writer.Write((sbyte) move.X);
 					writer.Write((sbyte) move.Y);
--- a/TableturfBattleServer/HttpRequestHelper.cs
+++ b/TableturfBattleServer/HttpRequestHelper.cs
@ -0,0 +1,81 @@
+using System.Diagnostics.CodeAnalysis;
+using System.Globalization;
+using System.Net;
+using System.Text;
+using System.Web;
+using Newtonsoft.Json;
+using HttpListenerRequest = WebSocketSharp.Net.HttpListenerRequest;
+using HttpListenerResponse = WebSocketSharp.Net.HttpListenerResponse;
+
+namespace TableturfBattleServer;
+internal static class HttpRequestHelper {
+   	internal static readonly char[] DELIMITERS = [',', ' '];
+	internal const int CUSTOM_CARD_START = -10000;
+	internal const int RECEIVED_CUSTOM_CARD_START = -20000;
+
+	internal static void SetErrorResponse(this HttpListenerResponse response, Error error) {
+		var bytes = Encoding.UTF8.GetBytes(JsonUtils.Serialise(error));
+		SetResponse(response, error.HttpStatusCode, "application/json", bytes);
+	}
+	internal static void SetResponse(this HttpListenerResponse response, HttpStatusCode statusCode, string contentType, string content) {
+		var bytes = Encoding.UTF8.GetBytes(content);
+		SetResponse(response, statusCode, contentType, bytes);
+	}
+	internal static void SetResponse(this HttpListenerResponse response, HttpStatusCode statusCode, string contentType, byte[] content) {
+		response.StatusCode = (int) statusCode;
+		response.ContentType = contentType;
+		response.ContentLength64 = content.Length;
+		response.Close(content, true);
+	}
+
+	internal static Dictionary<string, string> DecodeFormData(Stream stream) => DecodeFormData(new StreamReader(stream).ReadToEnd());
+	internal static Dictionary<string, string> DecodeFormData(TextReader reader) => DecodeFormData(reader.ReadToEnd());
+	internal static Dictionary<string, string> DecodeFormData(string s) {
+		if (s.StartsWith('?')) s = s[1..];
+		return s != ""
+			? s.Split(['&']).Select(s => s.Split('=')).Select(a => a.Length == 2 ? a : throw new ArgumentException("Invalid form data"))
+				.ToDictionary(a => HttpUtility.UrlDecode(a[0]), a => HttpUtility.UrlDecode(a[1]))
+			: [];
+	}
+
+	internal static void SetStaticResponse(HttpListenerRequest request, HttpListenerResponse response, string jsonContent, string eTag, DateTime lastModified) {
+		if (request.HttpMethod is not ("GET" or "HEAD")) {
+			response.AddHeader("Allow", "GET, HEAD");
+			SetErrorResponse(response, new(HttpStatusCode.MethodNotAllowed, "MethodNotAllowed", "Invalid request method for this endpoint."));
+			return;
+		}
+		response.AppendHeader("Cache-Control", "max-age=86400");
+		response.AppendHeader("ETag", eTag);
+		response.AppendHeader("Last-Modified", lastModified.ToString("ddd, dd MMM yyyy HH:mm:ss \"GMT\""));
+
+		var ifNoneMatch = request.Headers["If-None-Match"];
+		if (ifNoneMatch != null) {
+			if (request.Headers["If-None-Match"] == eTag)
+				response.StatusCode = (int) HttpStatusCode.NotModified;
+			else
+				SetResponse(response, HttpStatusCode.OK, "application/json", jsonContent);
+		} else {
+			if (DateTime.TryParseExact(request.Headers["If-Modified-Since"], "ddd, dd MMM yyyy HH:mm:ss \"GMT\"", CultureInfo.InvariantCulture, DateTimeStyles.AssumeUniversal | DateTimeStyles.AdjustToUniversal, out var dateTime)
+				&& dateTime >= lastModified.ToUniversalTime())
+				response.StatusCode = (int) HttpStatusCode.NotModified;
+			else
+				SetResponse(response, HttpStatusCode.OK, "application/json", jsonContent);
+		}
+	}
+
+	internal static bool TryParseStageSelectionRule(string json, int maxPlayers, [MaybeNullWhen(false)] out StageSelectionRules stageSelectionRule) {
+		try {
+			stageSelectionRule = JsonUtils.Deserialise<StageSelectionRules>(json);
+			if (stageSelectionRule == null) return false;
+			stageSelectionRule.AddUnavailableStages(maxPlayers);
+			// Check that at least one stage is allowed.
+			for (var i = 0; i < StageDatabase.Stages.Count; i++) {
+				if (!stageSelectionRule.BannedStages.Contains(i)) return true;
+			}
+			return false;
+		} catch (JsonSerializationException) {
+			stageSelectionRule = null;
+			return false;
+		}
+	}
+}
--- a/TableturfBattleServer/Player.cs
+++ b/TableturfBattleServer/Player.cs
@ -28,6 +28,8 @@ public class Player(Game game, string name, Guid token) {
 	internal Move? Move;
 	[JsonIgnore]
 	internal Move? ProvisionalMove;
+	[JsonIgnore]
+	internal readonly Dictionary<int, int> customCardMap = new();

 	public int GamesWon { get; set; }

--- a/TableturfBattleServer/Program.cs
+++ b/TableturfBattleServer/Program.cs
@ -1,30 +1,21 @@
-using System.Diagnostics.CodeAnalysis;
-using System.Globalization;
-using System.Net;
+using System.Net;
 using System.Reflection;
-using System.Text;
-using System.Text.RegularExpressions;
-using System.Timers;
 using System.Web;
-using Newtonsoft.Json;
-using TableturfBattleServer.DTO;
 using WebSocketSharp.Server;
 using HttpListenerRequest = WebSocketSharp.Net.HttpListenerRequest;
 using HttpListenerResponse = WebSocketSharp.Net.HttpListenerResponse;
-using Timer = System.Timers.Timer;

 namespace TableturfBattleServer;

-internal class Program {
+internal delegate void ApiEndpointGlobalHandler(HttpListenerRequest request, HttpListenerResponse response);
+internal delegate void ApiEndpointGameHandler(Game game, HttpListenerRequest request, HttpListenerResponse response);
+
+internal partial class Program {
 	internal static HttpServer? httpServer;

-	internal static Dictionary<Guid, Game> games = [];
-	internal static Dictionary<Guid, Game> inactiveGames = [];
-	internal static readonly Timer timer = new(1000);
-	private static bool lockdown;
-
-	private const int InactiveGameLimit = 1000;
-	private static readonly TimeSpan InactiveGameTimeout = TimeSpan.FromMinutes(5);
+	private static readonly Dictionary<string, (ApiEndpointAttribute attribute, ApiEndpointGlobalHandler handler)> apiGlobalHandlers = [];
+	private static readonly Dictionary<string, (ApiEndpointAttribute attribute, ApiEndpointGameHandler handler)> apiGameHandlers = [];
+	private static readonly HashSet<string> spaPaths = [ "/",  "/deckeditor", "/cardlist", "/game" , "/replay" ];

 	private static string? GetClientRootPath() {
 		var directory = Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location);
@ -37,9 +28,16 @@ internal class Program {
 	}

 	internal static void Main(string[] args) {
-		httpServer = new(args.Contains("--open") ? IPAddress.Any : IPAddress.Loopback, 3333) { DocumentRootPath = GetClientRootPath() };
+		foreach (var method in typeof(ApiEndpoints).GetMethods(BindingFlags.Public | BindingFlags.NonPublic | BindingFlags.Static)) {
+			var attribute = method.GetCustomAttribute<ApiEndpointAttribute>();
+			if (attribute == null) continue;
+			if (attribute.Namespace == ApiEndpointNamespace.ApiRoot)
+				apiGlobalHandlers[attribute.Path] = (attribute, method.CreateDelegate<ApiEndpointGlobalHandler>());
+			else
+				apiGameHandlers[attribute.Path] = (attribute, method.CreateDelegate<ApiEndpointGameHandler>());
+		}

-		timer.Elapsed += Timer_Elapsed;
+		httpServer = new(args.Contains("--open") ? IPAddress.Any : IPAddress.Loopback, 3333) { DocumentRootPath = GetClientRootPath() };

 		httpServer.AddWebSocketService<TableturfWebSocketBehaviour>("/api/websocket");
 		httpServer.OnGet += HttpServer_OnRequest;
@ -58,643 +56,95 @@ internal class Program {
 			else {
 				s = s.Trim().ToLower();
 				if (s == "update") {
-					if (games.Count == 0)
+					if (Server.Instance.games.Count == 0)
 						Environment.Exit(2);
-					lockdown = true;
+					Server.Instance.Lockdown = true;
 					Console.WriteLine("Locking server for update.");
 				}
 			}
 		}
 	}

-	private static void Timer_Elapsed(object? sender, ElapsedEventArgs e) {
-		lock (games) {
-			foreach (var (id, game) in games) {
-				lock (game.Players) {
-					game.Tick();
-					if (DateTime.UtcNow - game.abandonedSince >= InactiveGameTimeout) {
-						games.Remove(id);
-						inactiveGames.Add(id, game);
-						Console.WriteLine($"{games.Count} games active; {inactiveGames.Count} inactive");
-						if (lockdown && games.Count == 0)
-							Environment.Exit(2);
-					}
-				}
-			}
-			if (inactiveGames.Count >= InactiveGameLimit) {
-				foreach (var (k, _) in inactiveGames.Select(e => (e.Key, e.Value.abandonedSince)).OrderBy(e => e.abandonedSince).Take(InactiveGameLimit / 2))
-					inactiveGames.Remove(k);
-				Console.WriteLine($"{games.Count} games active; {inactiveGames.Count} inactive");
-			}
-		}
-	}
-
 	private static void HttpServer_OnRequest(object? sender, HttpRequestEventArgs e) {
 		e.Response.AppendHeader("Access-Control-Allow-Origin", "*");
-		if (!e.Request.RawUrl.StartsWith("/api/")) {
-			var path = e.Request.RawUrl == "/" || e.Request.RawUrl.StartsWith("/deckeditor") || e.Request.RawUrl.StartsWith("/game/") || e.Request.RawUrl.StartsWith("/replay/")
-				? "index.html"
-				: HttpUtility.UrlDecode(e.Request.RawUrl[1..]);
-			if (e.TryReadFile(path, out var bytes))
-				SetResponse(e.Response, HttpStatusCode.OK,
-					Path.GetExtension(path) switch {
-						".html" or ".htm" => "text/html",
-						".css" => "text/css",
-						".js" => "text/javascript",
-						".png" => "image/png",
-						".webp" => "image/webp",
-						".woff" or ".woff2" => "font/woff",
-						_ => "application/octet-stream"
-					}, bytes);
-			else
-				SetErrorResponse(e.Response, new(HttpStatusCode.NotFound, "NotFound", "File not found."));
+		if (!e.Request.RawUrl.StartsWith('/')) {
+			e.Response.SetErrorResponse(new(HttpStatusCode.BadRequest, "InvalidRequestUrl", "Invalid request URL."));
 			return;
-		} else if (e.Request.RawUrl == "/api/games/new") {
-			if (e.Request.HttpMethod != "POST") {
-				e.Response.AddHeader("Allow", "POST");
-				SetErrorResponse(e.Response, new(HttpStatusCode.MethodNotAllowed, "MethodNotAllowed", "Invalid request method for this endpoint."));
-			} else if (lockdown) {
-				SetErrorResponse(e.Response, new(HttpStatusCode.ServiceUnavailable, "ServerLocked", "The server is temporarily locked for an update. Please try again soon."));
-			} else if (e.Request.ContentLength64 >= 65536) {
-				e.Response.StatusCode = (int) HttpStatusCode.RequestEntityTooLarge;
-			} else {
-				try {
-					var d = DecodeFormData(e.Request.InputStream);
-					Guid clientToken;
-					if (!d.TryGetValue("name", out var name)) {
-						SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "InvalidName", "Missing name."));
-						return;
-					}
-					if (name.Length > 32) {
-						SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "InvalidName", "Name is too long."));
-						return;
-					}
-					var maxPlayers = 2;
-					if (d.TryGetValue("maxPlayers", out var maxPlayersString)) {
-						if (!int.TryParse(maxPlayersString, out maxPlayers) || maxPlayers < 2 || maxPlayers > 4) {
-							SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "InvalidMaxPlayers", "Invalid player limit."));
-							return;
-						}
-					}
-					int? turnTimeLimit = null;
-					if (d.TryGetValue("turnTimeLimit", out var turnTimeLimitString) && turnTimeLimitString != "") {
-						if (!int.TryParse(turnTimeLimitString, out var turnTimeLimit2) || turnTimeLimit2 < 10) {
-							SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "InvalidTurnTimeLimit", "Invalid turn time limit."));
-							return;
-						}
-						turnTimeLimit = turnTimeLimit2;
-					}
-					int? goalWinCount = null;
-					if (d.TryGetValue("goalWinCount", out var goalWinCountString) && goalWinCountString != "") {
-						if (!int.TryParse(goalWinCountString, out var goalWinCount2) || goalWinCount2 < 1) {
-							SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "InvalidGoalWinCount", "Invalid goal win count."));
-							return;
-						}
-						goalWinCount = goalWinCount2;
-					}
-					if (d.TryGetValue("clientToken", out var tokenString) && tokenString != "") {
-						if (!Guid.TryParse(tokenString, out clientToken)) {
-							SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "InvalidClientToken", "Invalid client token."));
-							return;
-						}
-					} else
-						clientToken = Guid.NewGuid();
+		}

-					StageSelectionRules? stageSelectionRuleFirst = null, stageSelectionRuleAfterWin = null, stageSelectionRuleAfterDraw = null;
-					if (d.TryGetValue("stageSelectionRuleFirst", out var json1)) {
-						if (!TryParseStageSelectionRule(json1, out stageSelectionRuleFirst) || stageSelectionRuleFirst.Method is StageSelectionMethod.Same or StageSelectionMethod.Counterpick) {
-							SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "InvalidGameSettings", "stageSelectionRuleFirst was invalid."));
-							return;
-						}
-					} else
-						stageSelectionRuleFirst = StageSelectionRules.Default;
-					if (d.TryGetValue("stageSelectionRuleAfterWin", out var json2)) {
-						if (!TryParseStageSelectionRule(json2, out stageSelectionRuleAfterWin)) {
-							SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "InvalidGameSettings", "stageSelectionRuleAfterWin was invalid."));
-							return;
-						}
-					} else
-						stageSelectionRuleAfterWin = stageSelectionRuleFirst;
-					if (d.TryGetValue("stageSelectionRuleAfterDraw", out var json3)) {
-						if (!TryParseStageSelectionRule(json3, out stageSelectionRuleAfterDraw) || stageSelectionRuleAfterDraw.Method == StageSelectionMethod.Counterpick) {
-							SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "InvalidGameSettings", "stageSelectionRuleAfterDraw was invalid."));
-							return;
-						}
-					} else
-						stageSelectionRuleAfterDraw = stageSelectionRuleFirst;
-
-					var forceSameDeckAfterDraw = false;
-					if (d.TryGetValue("forceSameDeckAfterDraw", out var forceSameDeckAfterDrawString)) {
-						if (!bool.TryParse(forceSameDeckAfterDrawString, out forceSameDeckAfterDraw))
-							SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "InvalidGameSettings", "forceSameDeckAfterDraw was invalid."));
-					} else
-						forceSameDeckAfterDraw = false;
-
-					var spectate = false;
-					if (d.TryGetValue("spectate", out var spectateString)) {
-						if (!bool.TryParse(spectateString, out spectate))
-							SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "InvalidGameSettings", "spectate was invalid."));
-					} else
-						spectate = false;
-
-					var game = new Game(maxPlayers) { GoalWinCount = goalWinCount, TurnTimeLimit = turnTimeLimit, StageSelectionRuleFirst = stageSelectionRuleFirst, StageSelectionRuleAfterWin = stageSelectionRuleAfterWin, StageSelectionRuleAfterDraw = stageSelectionRuleAfterDraw, ForceSameDeckAfterDraw = forceSameDeckAfterDraw };
-					if (!spectate)
-						game.TryAddPlayer(new(game, name, clientToken), out _, out _);
-					games.Add(game.ID, game);
-					timer.Start();
-
-					SetResponse(e.Response, HttpStatusCode.OK, "application/json", JsonUtils.Serialise(new { gameID = game.ID, clientToken, maxPlayers }));
-					Console.WriteLine($"New game started: {game.ID}; {games.Count} games active; {inactiveGames.Count} inactive");
-				} catch (ArgumentException) {
-					SetErrorResponse(e.Response, new(HttpStatusCode.BadRequest, "InvalidRequestData", "Invalid form data"));
-				}
+		if (!e.Request.RawUrl.StartsWith("/api/")) {
+			// Static files
+			if (e.Request.HttpMethod is not ("GET" or "HEAD")) {
+				e.Response.AddHeader("Allow", "GET, HEAD");
+				e.Response.SetErrorResponse(new(HttpStatusCode.MethodNotAllowed, "MethodNotAllowed", "Invalid request method for this endpoint."));
+				return;
 			}
-		} else if (e.Request.RawUrl == "/api/cards") {
-			SetStaticResponse(e.Request, e.Response, CardDatabase.JSON, CardDatabase.Version.ToString(), CardDatabase.LastModified);
-		} else if (e.Request.RawUrl == "/api/stages") {
-			SetStaticResponse(e.Request, e.Response, StageDatabase.JSON, StageDatabase.Version.ToString(), StageDatabase.LastModified);
+			var pos = e.Request.RawUrl.IndexOf('/', 1);
+			var topLevelFileName = pos < 0 ? e.Request.RawUrl : e.Request.RawUrl[..pos];
+			var path = spaPaths.Contains(topLevelFileName) ? "index.html" : HttpUtility.UrlDecode(e.Request.RawUrl[1..]);
+			if (e.TryReadFile(path, out var bytes))
+				e.Response.SetResponse(HttpStatusCode.OK, Path.GetExtension(path) switch {
+					".html" or ".htm" => "text/html",
+					".css" => "text/css",
+					".js" => "text/javascript",
+					".png" => "image/png",
+					".tar" => "application/x-tar",
+					".webp" => "image/webp",
+					".woff" or ".woff2" => "font/woff",
+					_ => "application/octet-stream"
+				}, bytes);
+			else
+				e.Response.SetErrorResponse(new(HttpStatusCode.NotFound, "NotFound", "File not found."));
 		} else {
-			var m = Regex.Match(e.Request.RawUrl, @"^/api/games/([\w-]+)(?:/(\w+)(?:\?clientToken=([\w-]+))?)?$", RegexOptions.Compiled);
-			if (m.Success) {
-				if (!Guid.TryParse(m.Groups[1].Value, out var gameID)) {
-					SetErrorResponse(e.Response, new(HttpStatusCode.BadRequest, "InvalidGameID", "Invalid game ID."));
+			var pos = e.Request.RawUrl.IndexOf('?', 5);
+			var path = pos < 0 ? e.Request.RawUrl[4..] : e.Request.RawUrl[4..pos];
+			if (apiGlobalHandlers.TryGetValue(path, out var entry)) {
+				if ((e.Request.HttpMethod == "HEAD" ? "GET" : e.Request.HttpMethod) != entry.attribute.AllowedMethod) {
+					e.Response.AddHeader("Allow", entry.attribute.AllowedMethod == "GET" ? "GET, HEAD" : entry.attribute.AllowedMethod);
+					e.Response.SetErrorResponse(new(HttpStatusCode.MethodNotAllowed, "MethodNotAllowed", "Invalid request method for this endpoint."));
 					return;
 				}
-				lock (games) {
-					if (!TryGetGame(gameID, out var game)) {
-						SetErrorResponse(e.Response, new(HttpStatusCode.NotFound, "GameNotFound", "Game not found."));
+				if (e.Request.ContentLength64 >= 65536) {
+					e.Response.SetErrorResponse(new(HttpStatusCode.RequestEntityTooLarge, "ContentTooLarge", "Request content is too large."));
+					return;
+				}
+				entry.handler(e.Request, e.Response);
+			} else {
+				if (!path.StartsWith("/games/")) {
+					e.Response.SetErrorResponse(new(HttpStatusCode.NotFound, "NotFound", "Endpoint not found."));
+					return;
+				}
+				pos = path.IndexOf('/', 7);
+				var gameIdString = path[7..(pos < 0 ? ^0 : pos)];
+				path = pos < 0 ? "/" : path[pos..];
+				if (!Guid.TryParse(gameIdString, out var gameID)) {
+					e.Response.SetErrorResponse(new(HttpStatusCode.BadRequest, "InvalidGameID", "Invalid game ID."));
+					return;
+				}
+
+				lock (Server.Instance.games) {
+					if (!Server.Instance.TryGetGame(gameID, out var game)) {
+						e.Response.SetErrorResponse(new(HttpStatusCode.NotFound, "GameNotFound", "Game not found."));
 						return;
 					}
 					lock (game.Players) {
-						switch (m.Groups[2].Value) {
-							case "": {
-								if (e.Request.HttpMethod is not ("GET" or "HEAD")) {
-									e.Response.AddHeader("Allow", "GET, HEAD");
-									SetErrorResponse(e.Response, new(HttpStatusCode.MethodNotAllowed, "MethodNotAllowed", "Invalid request method for this endpoint."));
-									return;
-								}
-								SetResponse(e.Response, HttpStatusCode.OK, "application/json", JsonUtils.Serialise(game));
-								break;
-							}
-							case "playerData": {
-								if (e.Request.HttpMethod is not ("GET" or "HEAD")) {
-									e.Response.AddHeader("Allow", "GET, HEAD");
-									SetErrorResponse(e.Response, new(HttpStatusCode.MethodNotAllowed, "MethodNotAllowed", "Invalid request method for this endpoint."));
-									return;
-								}
-
-								if (!Guid.TryParse(m.Groups[3].Value, out var clientToken))
-									clientToken = Guid.Empty;
-
-								SetResponse(e.Response, HttpStatusCode.OK, "application/json", JsonUtils.Serialise(new {
-									game,
-									playerData = game.GetPlayer(clientToken, out var playerIndex, out var player)
-										? new PlayerData(playerIndex, player)
-										: null
-								}));
-								break;
-							}
-
-							case "join": {
-								if (e.Request.HttpMethod != "POST") {
-									e.Response.AddHeader("Allow", "POST");
-									SetErrorResponse(e.Response, new(HttpStatusCode.MethodNotAllowed, "MethodNotAllowed", "Invalid request method for this endpoint."));
-								} else if (e.Request.ContentLength64 >= 65536) {
-									e.Response.StatusCode = (int) HttpStatusCode.RequestEntityTooLarge;
-								} else {
-									try {
-										var d = DecodeFormData(e.Request.InputStream);
-										Guid clientToken;
-										if (!d.TryGetValue("name", out var name)) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "InvalidName", "Missing name."));
-											return;
-										}
-										if (name.Length > 32) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "InvalidName", "Name is too long."));
-											return;
-										}
-										if (d.TryGetValue("clientToken", out var tokenString) && tokenString != "") {
-											if (!Guid.TryParse(tokenString, out clientToken)) {
-												SetErrorResponse(e.Response, new(HttpStatusCode.BadRequest, "InvalidClientToken", "Invalid client token."));
-												return;
-											}
-										} else
-											clientToken = Guid.NewGuid();
-
-										if (!game.GetPlayer(clientToken, out var playerIndex, out var player)) {
-											if (game.State != GameState.WaitingForPlayers) {
-												SetErrorResponse(e.Response, new(HttpStatusCode.Gone, "GameAlreadyStarted", "The game has already started."));
-												return;
-											}
-
-											player = new Player(game, name, clientToken);
-											if (!game.TryAddPlayer(player, out playerIndex, out var error)) {
-												SetErrorResponse(e.Response, error);
-												return;
-											}
-
-											game.SendEvent("join", new { playerIndex, player }, false);
-										}
-										// If they're already in the game, resend the original join response instead of an error.
-										SetResponse(e.Response, HttpStatusCode.OK, "application/json", JsonUtils.Serialise(new { playerIndex, clientToken }));
-										timer.Start();
-									} catch (ArgumentException) {
-										SetErrorResponse(e.Response, new(HttpStatusCode.BadRequest, "InvalidRequestData", "Invalid form data"));
-									}
-								}
-								break;
-							}
-							case "setTurnTimeLimit": {
-								if (e.Request.HttpMethod != "POST") {
-									e.Response.AddHeader("Allow", "POST");
-									SetErrorResponse(e.Response, new(HttpStatusCode.MethodNotAllowed, "MethodNotAllowed", "Invalid request method for this endpoint."));
-								} else if (e.Request.ContentLength64 >= 65536) {
-									e.Response.StatusCode = (int) HttpStatusCode.RequestEntityTooLarge;
-								} else {
-									var d = DecodeFormData(e.Request.InputStream);
-									if (!d.TryGetValue("clientToken", out var tokenString) || !Guid.TryParse(tokenString, out var clientToken)) {
-										SetErrorResponse(e.Response, new(HttpStatusCode.BadRequest, "InvalidClientToken", "Invalid client token."));
-										return;
-									}
-									if (game.State != GameState.WaitingForPlayers) {
-										SetErrorResponse(e.Response, new(HttpStatusCode.Gone, "GameAlreadyStarted", "The game has already started."));
-										return;
-									}
-									if (!game.GetPlayer(clientToken, out var playerIndex, out var player) || playerIndex != 0) {
-										SetErrorResponse(e.Response, new(HttpStatusCode.Forbidden, "AccessDenied", "Only the host can do that."));
-										return;
-									}
-									if (d.TryGetValue("turnTimeLimit", out var turnTimeLimitString)) {
-										if (turnTimeLimitString == "")
-											game.TurnTimeLimit = null;
-										else if (!int.TryParse(turnTimeLimitString, out var turnTimeLimit2) || turnTimeLimit2 < 10) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "InvalidTurnTimeLimit", "Invalid turn time limit."));
-											return;
-										} else
-											game.TurnTimeLimit = turnTimeLimit2;
-									} else {
-										SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "InvalidTurnTimeLimit", "Invalid turn time limit."));
-										return;
-									}
-
-									game.SendEvent("settingsChange", game, false);
-								}
-								break;
-							}
-							case "chooseStage": {
-								if (e.Request.HttpMethod != "POST") {
-									e.Response.AddHeader("Allow", "POST");
-									SetErrorResponse(e.Response, new(HttpStatusCode.MethodNotAllowed, "MethodNotAllowed", "Invalid request method for this endpoint."));
-								} else if (e.Request.ContentLength64 >= 65536) {
-									e.Response.StatusCode = (int) HttpStatusCode.RequestEntityTooLarge;
-								} else {
-									var d = DecodeFormData(e.Request.InputStream);
-									if (!d.TryGetValue("clientToken", out var tokenString) || !Guid.TryParse(tokenString, out var clientToken)) {
-										SetErrorResponse(e.Response, new(HttpStatusCode.BadRequest, "InvalidClientToken", "Invalid client token."));
-										return;
-									}
-									if (!game.GetPlayer(clientToken, out var playerIndex, out var player)) {
-										SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "NotInGame", "You're not in the game."));
-										return;
-									}
-									if (!d.TryGetValue("stages", out var stagesString)) {
-										SetErrorResponse(e.Response, new(HttpStatusCode.BadRequest, "InvalidStage", "Missing stages."));
-										return;
-									}
-
-									var stages = new HashSet<int>();
-									foreach (var field in stagesString.Split(new[] { ',', ' ' }, StringSplitOptions.RemoveEmptyEntries)) {
-										if (!int.TryParse(field, out var i)) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.BadRequest, "InvalidStage", "Invalid stages."));
-											return;
-										}
-										stages.Add(i);
-									}
-
-									if (!game.TryChooseStages(player, stages, out var error)) {
-										SetErrorResponse(e.Response, error);
-										return;
-									}
-
-									e.Response.StatusCode = (int) HttpStatusCode.NoContent;
-									game.SendPlayerReadyEvent(playerIndex, false);
-									timer.Start();
-								}
-								break;
-							}
-							case "chooseDeck": {
-								if (e.Request.HttpMethod != "POST") {
-									e.Response.AddHeader("Allow", "POST");
-									SetErrorResponse(e.Response, new(HttpStatusCode.MethodNotAllowed, "MethodNotAllowed", "Invalid request method for this endpoint."));
-								} else if (e.Request.ContentLength64 >= 65536) {
-									e.Response.StatusCode = (int) HttpStatusCode.RequestEntityTooLarge;
-								} else {
-									try {
-										var d = DecodeFormData(e.Request.InputStream);
-										if (!d.TryGetValue("clientToken", out var tokenString) || !Guid.TryParse(tokenString, out var clientToken)) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.BadRequest, "InvalidClientToken", "Invalid client token."));
-											return;
-										}
-										if (!game.GetPlayer(clientToken, out var playerIndex, out var player)) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "NotInGame", "You're not in the game."));
-											return;
-										}
-										if (player.CurrentGameData.Deck != null) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.Conflict, "DeckAlreadyChosen", "You've already chosen a deck."));
-											return;
-										}
-
-										if (!d.TryGetValue("deckName", out var deckName)) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.BadRequest, "InvalidDeckName", "Missing deck name."));
-											return;
-										}
-										var deckSleeves = 0;
-										if (d.TryGetValue("deckSleeves", out var deckSleevesString) && (!int.TryParse(deckSleevesString, out deckSleeves) || deckSleeves is < 0 or >= 25)) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.BadRequest, "InvalidDeckSleeves", "Invalid deck sleeves."));
-											return;
-										}
-										if (!d.TryGetValue("deckCards", out var deckString)) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.BadRequest, "InvalidDeckCards", "Missing deck cards."));
-											return;
-										}
-										var array = deckString.Split([',', '+', ' '], 15);
-										if (array.Length != 15) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "InvalidDeckCards", "Invalid deck list."));
-											return;
-										}
-										int[]? upgrades = null;
-										if (d.TryGetValue("deckUpgrades", out var deckUpgradesString)) {
-											upgrades = new int[15];
-											var array2 = deckUpgradesString.Split([',', '+', ' '], 15);
-											for (var i = 0; i < 15; i++) {
-												if (int.TryParse(array2[i], out var j) && i is >= 0 and <= 2)
-													upgrades[i] = j;
-												else {
-													SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "InvalidDeckUpgrades", "Invalid deck upgrade list."));
-													return;
-												}
-											}
-										}
-										var cards = new int[15];
-										for (var i = 0; i < 15; i++) {
-											if (!int.TryParse(array[i], out var cardNumber) || !CardDatabase.IsValidCardNumber(cardNumber)) {
-												SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "InvalidDeckCards", "Invalid deck list."));
-												return;
-											}
-											if (Array.IndexOf(cards, cardNumber, 0, i) >= 0) {
-												SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "InvalidDeckCards", "Deck cannot have duplicates."));
-												return;
-											}
-											cards[i] = cardNumber;
-										}
-
-										player.CurrentGameData.Deck = game.GetDeck(deckName, deckSleeves, cards, upgrades ?? Enumerable.Repeat(0, 15));
-										e.Response.StatusCode = (int) HttpStatusCode.NoContent;
-										game.SendPlayerReadyEvent(playerIndex, false);
-										timer.Start();
-									} catch (ArgumentException) {
-										SetErrorResponse(e.Response, new(HttpStatusCode.BadRequest, "InvalidRequestData", "Invalid form data"));
-									}
-								}
-								break;
-							}
-							case "play": {
-								if (e.Request.HttpMethod != "POST") {
-									e.Response.AddHeader("Allow", "POST");
-									SetErrorResponse(e.Response, new(HttpStatusCode.MethodNotAllowed, "MethodNotAllowed", "Invalid request method for this endpoint."));
-								} else if (e.Request.ContentLength64 >= 65536) {
-									e.Response.StatusCode = (int) HttpStatusCode.RequestEntityTooLarge;
-								} else {
-									try {
-										var d = DecodeFormData(e.Request.InputStream);
-										if (!d.TryGetValue("clientToken", out var tokenString) || !Guid.TryParse(tokenString, out var clientToken)) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.BadRequest, "InvalidClientToken", "Invalid client token."));
-											return;
-										}
-										if (game.State != GameState.Ongoing) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.Conflict, "GameNotSetUp", "You can't do that in this game state."));
-											return;
-										}
-										if (!game.GetPlayer(clientToken, out var playerIndex, out var player)) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.Forbidden, "NotInGame", "You're not in the game."));
-											return;
-										}
-
-										if (player.Move != null) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.Conflict, "MoveAlreadyChosen", "You've already chosen a move."));
-											return;
-										}
-
-										if (!d.TryGetValue("cardNumber", out var cardNumberStr) || !int.TryParse(cardNumberStr, out var cardNumber)) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.BadRequest, "InvalidCard", "Missing or invalid card number."));
-											return;
-										}
-
-										var handIndex = player.GetHandIndex(cardNumber);
-										if (handIndex < 0) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "MissingCard", "You don't have that card."));
-											return;
-										}
-
-										var isTimeout = d.TryGetValue("isTimeout", out var isTimeoutStr) && isTimeoutStr.ToLower() is not ("false" or "0");
-
-										var card = player.Hand![handIndex];
-										if (d.TryGetValue("isPass", out var isPassStr) && isPassStr.ToLower() is not ("false" or "0")) {
-											player.Move = new(card, true, 0, 0, 0, false, isTimeout);
-										} else {
-											var isSpecialAttack = d.TryGetValue("isSpecialAttack", out var isSpecialAttackStr) && isSpecialAttackStr.ToLower() is not ("false" or "0");
-											if (!d.TryGetValue("x", out var xs) || !int.TryParse(xs, out var x)
-												|| !d.TryGetValue("y", out var ys) || !int.TryParse(ys, out var y)
-												|| !d.TryGetValue("r", out var rs) || !int.TryParse(rs, out var r)) {
-												SetErrorResponse(e.Response, new(HttpStatusCode.BadRequest, "InvalidPosition", "Missing or invalid position."));
-												return;
-											}
-											r &= 3;
-											if (!game.CanPlay(playerIndex, card, x, y, r, isSpecialAttack)) {
-												SetErrorResponse(e.Response, new(HttpStatusCode.UnprocessableEntity, "IllegalMove", "Illegal move"));
-												return;
-											}
-											player.Move = new(card, false, x, y, r, isSpecialAttack, isTimeout);
-										}
-										e.Response.StatusCode = (int) HttpStatusCode.NoContent;
-										game.SendPlayerReadyEvent(playerIndex, isTimeout);
-										timer.Start();
-									} catch (ArgumentException) {
-										e.Response.StatusCode = (int) HttpStatusCode.BadRequest;
-									}
-								}
-								break;
-							}
-							case "redraw": {
-								if (e.Request.HttpMethod != "POST") {
-									e.Response.AddHeader("Allow", "POST");
-									SetErrorResponse(e.Response, new(HttpStatusCode.MethodNotAllowed, "MethodNotAllowed", "Invalid request method for this endpoint."));
-								} else if (e.Request.ContentLength64 >= 65536) {
-									e.Response.StatusCode = (int) HttpStatusCode.RequestEntityTooLarge;
-								} else {
-									try {
-										if (game.State != GameState.Redraw) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.Conflict, "GameNotSetUp", "You can't do that in this game state."));
-											return;
-										}
-
-										var d = DecodeFormData(e.Request.InputStream);
-										if (!d.TryGetValue("clientToken", out var tokenString) || !Guid.TryParse(tokenString, out var clientToken)) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.BadRequest, "InvalidClientToken", "Invalid client token."));
-											return;
-										}
-										if (!game.GetPlayer(clientToken, out var playerIndex, out var player)) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.Forbidden, "NotInGame", "You're not in the game."));
-											return;
-										}
-
-										if (player.Move != null) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.Conflict, "MoveAlreadyChosen", "You've already chosen a move."));
-											return;
-										}
-
-										var redraw = d.TryGetValue("redraw", out var redrawStr) && redrawStr.ToLower() is not ("false" or "0");
-										player.Move = new(player.Hand![0], false, 0, 0, 0, redraw, false);
-										e.Response.StatusCode = (int) HttpStatusCode.NoContent;
-										game.SendPlayerReadyEvent(playerIndex, false);
-										timer.Start();
-									} catch (ArgumentException) {
-										e.Response.StatusCode = (int) HttpStatusCode.BadRequest;
-									}
-								}
-								break;
-							}
-							case "nextGame": {
-								if (e.Request.HttpMethod != "POST") {
-									e.Response.AddHeader("Allow", "POST");
-									SetErrorResponse(e.Response, new(HttpStatusCode.MethodNotAllowed, "MethodNotAllowed", "Invalid request method for this endpoint."));
-								} else if (e.Request.ContentLength64 >= 65536) {
-									e.Response.StatusCode = (int) HttpStatusCode.RequestEntityTooLarge;
-								} else {
-									try {
-										if (game.State is not (GameState.GameEnded or GameState.SetEnded)) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.Conflict, "GameNotSetUp", "You can't do that in this game state."));
-											return;
-										}
-
-										var d = DecodeFormData(e.Request.InputStream);
-										if (!d.TryGetValue("clientToken", out var tokenString) || !Guid.TryParse(tokenString, out var clientToken)) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.BadRequest, "InvalidClientToken", "Invalid client token."));
-											return;
-										}
-										if (!game.GetPlayer(clientToken, out var playerIndex, out var player)) {
-											SetErrorResponse(e.Response, new(HttpStatusCode.Forbidden, "NotInGame", "You're not in the game."));
-											return;
-										}
-
-										if (player.Move == null) {
-											player.Move = new(player.Hand![0], false, 0, 0, 0, false, false);  // Dummy move to indicate that the player is ready.
-											game.SendPlayerReadyEvent(playerIndex, false);
-										}
-										e.Response.StatusCode = (int) HttpStatusCode.NoContent;
-										timer.Start();
-									} catch (ArgumentException) {
-										e.Response.StatusCode = (int) HttpStatusCode.BadRequest;
-									}
-								}
-								break;
-							}
-							case "replay": {
-								if (e.Request.HttpMethod != "GET") {
-									e.Response.AddHeader("Allow", "GET");
-									SetErrorResponse(e.Response, new(HttpStatusCode.MethodNotAllowed, "MethodNotAllowed", "Invalid request method for this endpoint."));
-								} else {
-									if (game.State != GameState.SetEnded) {
-										SetErrorResponse(e.Response, new(HttpStatusCode.Conflict, "GameInProgress", "You can't see the replay until the set has ended."));
-										return;
-									}
-									var ms = new MemoryStream();
-									game.WriteReplayData(ms);
-									SetResponse(e.Response, HttpStatusCode.OK, "application/octet-stream", ms.ToArray());
-								}
-								break;
-							}
-							default:
-								SetErrorResponse(e.Response, new(HttpStatusCode.NotFound, "NotFound", "Endpoint not found."));
-								break;
+						if (!apiGameHandlers.TryGetValue(path, out var entry2)) {
+							e.Response.SetErrorResponse(new(HttpStatusCode.NotFound, "NotFound", "Endpoint not found."));
+							return;
 						}
+						if ((e.Request.HttpMethod == "HEAD" ? "GET" : e.Request.HttpMethod) != entry2.attribute.AllowedMethod) {
+							e.Response.AddHeader("Allow", entry2.attribute.AllowedMethod == "GET" ? "GET, HEAD" : entry2.attribute.AllowedMethod);
+							e.Response.SetErrorResponse(new(HttpStatusCode.MethodNotAllowed, "MethodNotAllowed", "Invalid request method for this endpoint."));
+							return;
+						}
+						if (e.Request.ContentLength64 >= 65536) {
+							e.Response.SetErrorResponse(new(HttpStatusCode.RequestEntityTooLarge, "ContentTooLarge", "Request content is too large."));
+							return;
+						}
+						entry2.handler(game, e.Request, e.Response);
 					}
 				}
-			} else
-				SetErrorResponse(e.Response, new(HttpStatusCode.NotFound, "NotFound", "Endpoint not found."));
-		}
-	}
-
-	private static void SetErrorResponse(HttpListenerResponse response, Error error) {
-		var bytes = Encoding.UTF8.GetBytes(JsonUtils.Serialise(error));
-		SetResponse(response, error.HttpStatusCode, "application/json", bytes);
-	}
-	private static void SetResponse(HttpListenerResponse response, HttpStatusCode statusCode, string contentType, string content) {
-		var bytes = Encoding.UTF8.GetBytes(content);
-		SetResponse(response, statusCode, contentType, bytes);
-	}
-	private static void SetResponse(HttpListenerResponse response, HttpStatusCode statusCode, string contentType, byte[] content) {
-		response.StatusCode = (int) statusCode;
-		response.ContentType = contentType;
-		response.ContentLength64 = content.Length;
-		response.Close(content, true);
-	}
-
-	private static Dictionary<string, string> DecodeFormData(Stream stream) {
-		using var reader = new StreamReader(stream);
-		var s = reader.ReadToEnd();
-		return s != ""
-			? s.Split(['&']).Select(s => s.Split('=')).Select(a => a.Length == 2 ? a : throw new ArgumentException("Invalid form data"))
-				.ToDictionary(a => HttpUtility.UrlDecode(a[0]), a => HttpUtility.UrlDecode(a[1]))
-			: [];
-	}
-
-	private static void SetStaticResponse(HttpListenerRequest request, HttpListenerResponse response, string jsonContent, string eTag, DateTime lastModified) {
-		if (request.HttpMethod is not ("GET" or "HEAD")) {
-			response.AddHeader("Allow", "GET, HEAD");
-			SetErrorResponse(response, new(HttpStatusCode.MethodNotAllowed, "MethodNotAllowed", "Invalid request method for this endpoint."));
-			return;
-		}
-		response.AppendHeader("Cache-Control", "max-age=86400");
-		response.AppendHeader("ETag", eTag);
-		response.AppendHeader("Last-Modified", lastModified.ToString("ddd, dd MMM yyyy HH:mm:ss \"GMT\""));
-
-		var ifNoneMatch = request.Headers["If-None-Match"];
-		if (ifNoneMatch != null) {
-			if (request.Headers["If-None-Match"] == eTag)
-				response.StatusCode = (int) HttpStatusCode.NotModified;
-			else
-				SetResponse(response, HttpStatusCode.OK, "application/json", jsonContent);
-		} else {
-			if (DateTime.TryParseExact(request.Headers["If-Modified-Since"], "ddd, dd MMM yyyy HH:mm:ss \"GMT\"", CultureInfo.InvariantCulture, DateTimeStyles.AssumeUniversal | DateTimeStyles.AdjustToUniversal, out var dateTime)
-				&& dateTime >= lastModified.ToUniversalTime())
-				response.StatusCode = (int) HttpStatusCode.NotModified;
-			else
-				SetResponse(response, HttpStatusCode.OK, "application/json", jsonContent);
-		}
-	}
-
-	internal static bool TryGetGame(Guid gameID, [MaybeNullWhen(false)] out Game game) {
-		if (games.TryGetValue(gameID, out game)) {
-			game.abandonedSince = DateTime.UtcNow;
-			return true;
-		} else if (inactiveGames.TryGetValue(gameID, out game)) {
-			inactiveGames.Remove(gameID);
-			games[gameID] = game;
-			game.abandonedSince = DateTime.UtcNow;
-			Console.WriteLine($"{games.Count} games active; {inactiveGames.Count} inactive");
-			return true;
-		}
-		return false;
-	}
-
-	private static bool TryParseStageSelectionRule(string json, [MaybeNullWhen(false)] out StageSelectionRules stageSelectionRule) {
-		try {
-			stageSelectionRule = JsonUtils.Deserialise<StageSelectionRules>(json);
-			return stageSelectionRule != null;
-		} catch (JsonSerializationException) {
-			stageSelectionRule = null;
-			return false;
+			}
 		}
 	}
 }
--- a/TableturfBattleServer/Server.cs
+++ b/TableturfBattleServer/Server.cs
@ -0,0 +1,55 @@
+using System.Diagnostics.CodeAnalysis;
+using System.Timers;
+using Timer = System.Timers.Timer;
+
+namespace TableturfBattleServer;
+internal class Server {
+	public static Server Instance { get; } = new();
+
+	internal Dictionary<Guid, Game> games = [];
+	internal Dictionary<Guid, Game> inactiveGames = [];
+	public bool Lockdown { get; set; }
+	internal readonly Timer timer = new(1000);
+
+	private const int InactiveGameLimit = 1000;
+	private static readonly TimeSpan InactiveGameTimeout = TimeSpan.FromMinutes(5);
+
+	private Server() => this.timer.Elapsed += this.Timer_Elapsed;
+
+	internal bool TryGetGame(Guid gameID, [MaybeNullWhen(false)] out Game game) {
+		if (games.TryGetValue(gameID, out game)) {
+			game.abandonedSince = DateTime.UtcNow;
+			return true;
+		} else if (inactiveGames.TryGetValue(gameID, out game)) {
+			inactiveGames.Remove(gameID);
+			games[gameID] = game;
+			game.abandonedSince = DateTime.UtcNow;
+			Console.WriteLine($"{games.Count} games active; {inactiveGames.Count} inactive");
+			return true;
+		}
+		return false;
+	}
+
+	private void Timer_Elapsed(object? sender, ElapsedEventArgs e) {
+		lock (games) {
+			foreach (var (id, game) in games) {
+				lock (game.Players) {
+					game.Tick();
+					if (DateTime.UtcNow - game.abandonedSince >= InactiveGameTimeout) {
+						games.Remove(id);
+						inactiveGames.Add(id, game);
+						Console.WriteLine($"{games.Count} games active; {inactiveGames.Count} inactive");
+						if (Lockdown && games.Count == 0)
+							Environment.Exit(2);
+					}
+				}
+			}
+			if (inactiveGames.Count >= InactiveGameLimit) {
+				foreach (var (k, _) in inactiveGames.Select(e => (e.Key, e.Value.abandonedSince)).OrderBy(e => e.abandonedSince).Take(InactiveGameLimit / 2))
+					inactiveGames.Remove(k);
+				Console.WriteLine($"{games.Count} games active; {inactiveGames.Count} inactive");
+			}
+		}
+	}
+
+}
--- a/TableturfBattleServer/Stage.cs
+++ b/TableturfBattleServer/Stage.cs
@ -4,7 +4,7 @@ namespace TableturfBattleServer;
 public class Stage(string name, Space[,] grid, Point[][] startSpaces) {
 	public string Name { get; } = name ?? throw new ArgumentNullException(nameof(name));
 	[JsonProperty]
-	internal readonly Space[,] grid = grid ?? throw new ArgumentNullException(nameof(grid));
+	internal Space[,] Grid = grid ?? throw new ArgumentNullException(nameof(grid));
 	/// <summary>
 	///		The lists of starting spaces on this stage.
 	/// </summary>
@ -13,5 +13,8 @@ public class Stage(string name, Space[,] grid, Point[][] startSpaces) {
 	///		For example, if there is a list of 3 and a list of 4, the list of 3 will be used for 2 or 3 players, and the list of 4 will be used for 4 players.
 	/// </remarks>
 	[JsonProperty]
-	internal readonly Point[][] startSpaces = startSpaces ?? throw new ArgumentNullException(nameof(startSpaces));
+	internal Point[][] StartSpaces = startSpaces ?? throw new ArgumentNullException(nameof(startSpaces));
+
+	[JsonIgnore]
+	public int MaxPlayers => this.StartSpaces.Max(a => a.Length);
 }
--- a/TableturfBattleServer/StageDatabase.cs
+++ b/TableturfBattleServer/StageDatabase.cs
@ -3,7 +3,12 @@
 namespace TableturfBattleServer;
 internal class StageDatabase {
 	private const Space E = Space.Empty;
+	private const Space W = Space.Wall;
 	private const Space o = Space.OutOfBounds;
+	private const Space a = Space.Ink1;
+	private const Space b = Space.Ink2;
+	private const Space A = Space.SpecialInactive1;
+	private const Space B = Space.SpecialInactive2;

 	private static readonly Stage[] stages = [
 		new("Main Street", new Space[9, 26], [
@ -116,10 +121,136 @@ internal class StageDatabase {
 			[new(3, 21), new(13, 3), new(8, 16), new(8, 8)]
 		]),
 		new("Box Seats", new Space[10, 10], [[new(2, 7), new(7, 2), new(7, 7), new(2, 2)]]),
+		new("Girder for Battle", new Space[,] {
+			{ E, E, E, E, E, E, o, o, o, o, o, o, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, o, o, o, o, o, o, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, o, o, o, o, o, o, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, o, o, o, o, o, o, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, o, o, o, o, o, o, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, o, o, o, o, o, o, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, o, o, o, o, o, o, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, o, o, o, o, o, o, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, o, o, o, o, o, o, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, o, o, o, o, o, o, E, E, E, E, E, E },
+		}, [
+			[new(8, 17), new(8, 0), new(8, 9)],
+			[new(2, 17), new(14, 0), new(14, 17), new(2, 0)]
+		]),
+		new("Mask Mansion", new Space[,] {
+			{ o, o, o, E, E, E, E, E, E, E, E, E, E, E, o, o, o },
+			{ o, o, o, E, E, E, E, E, E, E, E, E, E, E, o, o, o },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, W, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, W, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, W, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, W, E, E, E, E, E, E, E, W, E, E, E, E },
+			{ E, E, E, E, W, E, E, E, E, E, E, E, W, E, E, E, E },
+			{ E, E, E, E, W, E, E, E, E, E, E, E, W, E, E, E, E },
+			{ E, E, E, E, W, E, E, E, E, E, E, E, W, E, E, E, E },
+			{ E, E, E, E, W, E, E, E, E, E, E, E, W, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, W, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, W, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, W, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ o, o, o, E, E, E, E, E, E, E, E, E, E, E, o, o, o },
+			{ o, o, o, E, E, E, E, E, E, E, E, E, E, E, o, o, o },
+		}, [
+			[new(8, 15), new(8, 1), new(8, 8)],
+			[new(3, 15), new(13, 1), new(13, 15), new(3, 1)]
+		]),
+		new("Sticky Thicket", new Space[,] {
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, W, E, E, E, W, E, E, E, W, E, E, E, W, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, B, E, E, E, W, E, E, E, W, E, E, E, W, E, E, E, A, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, W, E, E, E, W, E, E, E, W, E, E, E, W, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, B, E, E, E, W, E, E, E, W, E, E, E, W, E, E, E, A, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, W, E, E, E, W, E, E, E, W, E, E, E, W, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+		}, [
+			[new(3, 20), new(3, 4)]
+		]),
+		new("Cracker Snap", new Space[,] {
+			{ o, o, o, o, o, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ o, o, o, o, o, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, o, o, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, o, o, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, o, o, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, o, o, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, o, o, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, o, o, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, o, o, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, o, o, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, o, o, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, o, o, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, o, o, o, o, o },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, o, o, o, o, o },
+		}, [
+			[new(2, 17), new(11, 2), new(7, 11)],
+			[new(9, 17), new(4, 2), new(11, 10), new(2, 9)]
+		]),
+		new("Two-Lane Splattop", new Space[,] {
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, B, E, E, E, E, E, E, E, E, E, E, E, E, A, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, B, E, E, E, E, E, E, E, E, E, E, E, E, A, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+		}, [
+			[new(11, 15), new(11, 2)]
+		]),
+		new("Pedal to the Metal", new Space[,] {
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, B, B, B, E, E, E, E, E, E, E, E, E, E, E, E, E, A, A, A, E, E, E },
+			{ E, E, E, B, B, B, E, E, E, E, E, E, E, E, E, E, E, E, E, A, A, A, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E, E },
+		}, [
+			[new(4, 19), new(4, 3)]
+		]),
+		new("Over the Line", new Space[,] {
+			{ E, E, E, E, E, E, E, E, E, E, b, a, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, b, A, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, b, A, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, b, a, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, b, a, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, b, a, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, b, a, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, b, a, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, B, a, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, B, a, E, E, E, E, E, E, E, E, E, E },
+			{ E, E, E, E, E, E, E, E, E, E, b, a, E, E, E, E, E, E, E, E, E, E },
+		}, [
+			[new(1, 11), new(8, 10)]
+		]),
 	];

-	public static Version Version { get; } = new(1, 2, 0, 1);
-	public static DateTime LastModified { get; } = new(2023, 4, 12, 23, 0, 0, DateTimeKind.Utc);
+	public static Version Version { get; } = new(2, 0, 1, 0);
+	public static DateTime LastModified { get; } = new(2024, 2, 24, 10, 0, 0, DateTimeKind.Utc);
 	public static string JSON { get; }
 	public static ReadOnlyCollection<Stage> Stages { get; }

--- a/TableturfBattleServer/StageSelectionRules.cs
+++ b/TableturfBattleServer/StageSelectionRules.cs
@ -5,6 +5,17 @@ public class StageSelectionRules(StageSelectionMethod method, int[]? bannedStage
 	public int[] BannedStages { get; set; } = bannedStages ?? Array.Empty<int>();

 	public static StageSelectionRules Default { get; } = new(StageSelectionMethod.Vote, Array.Empty<int>());
+
+	public void AddUnavailableStages(int maxPlayers) {
+		if (maxPlayers == 2) return;
+
+		var list = new List<int>(this.BannedStages);
+		for (var i = 0; i < StageDatabase.Stages.Count; i++) {
+			if (maxPlayers > StageDatabase.Stages[i].MaxPlayers)
+				list.Add(i);
+		}
+		this.BannedStages = list.ToArray();
+	}
 }

 public enum StageSelectionMethod {
--- a/TableturfBattleServer/TableturfWebSocketBehaviour.cs
+++ b/TableturfBattleServer/TableturfWebSocketBehaviour.cs
@ -18,7 +18,7 @@ internal class TableturfWebSocketBehaviour : WebSocketBehavior {
 			this.ClientToken = clientToken;

 		// Send an initial state payload.
-		if (Program.TryGetGame(this.GameID, out var game)) {
+		if (Server.Instance.TryGetGame(this.GameID, out var game)) {
 			DTO.PlayerData? playerData = null;
 			for (int i = 0; i < game.Players.Count; i++) {
 				var player = game.Players[i];
@ -30,9 +30,9 @@ internal class TableturfWebSocketBehaviour : WebSocketBehavior {
 				}
 			}
 			this.Game = game;
-			this.Send(JsonUtils.Serialise(new DTO.WebSocketPayloadWithPlayerData<Game?>("sync", game, playerData)));
+			this.Send(JsonUtils.Serialise(new DTO.WebSocketPayloadWithPlayerData<Game?>("sync", game, playerData, this.ClientToken == game.HostClientToken)));
 		} else
-			this.Send(JsonUtils.Serialise(new DTO.WebSocketPayloadWithPlayerData<Game?>("sync", null, null)));
+			this.Send(JsonUtils.Serialise(new DTO.WebSocketPayloadWithPlayerData<Game?>("sync", null, null, false)));
 	}

 	protected override void OnClose(WebSocketSharp.CloseEventArgs e) {
--- a/images/screenshot1.png
+++ b/images/screenshot1.png
--- a/images/screenshot2.png
+++ b/images/screenshot2.png
--- a/images/screenshot3.png
+++ b/images/screenshot3.png
--- a/images/screenshot4.png
+++ b/images/screenshot4.png
--- a/license.md
+++ b/license.md
@ -1,6 +1,6 @@
-MIT License
+# MIT License

-Copyright (c) 2022 Andrea Giannone
+Copyright (c) 2022-2024 Andrio Celos

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/readme.md
+++ b/readme.md
@ -9,3 +9,9 @@ _Splatoon_ is © Nintendo. This is a fan project and is not affiliated with Nint
 ## Screenshots

 ![Game page screenshot](images/screenshot1.png)
+
+![Game page screenshot](images/screenshot2.png)
+
+![Replay screenshot](images/screenshot3.png)
+
+![Deck test screenshot](images/screenshot4.png)
Author	SHA1	Message	Date
Andrio Celos	a02809ef25	Fix Show Deck showing the deck from a previous battle	2025-08-20 22:40:35 +10:00
Andrio Celos	260b1425bd	Enable non-default costs for custom cards	2025-03-29 18:52:12 +11:00
Andrio Celos	c531b92884	Fix issues with lobby game settings UI	2025-03-29 18:48:02 +11:00
Andrio Celos	3e77d2afde	Remove some validation from deckSleeves API field This fixes a bug where certain actual sleeve IDs were rejected. Thanks to a Discord user who reported this.	2025-03-27 18:09:55 +11:00
Andrio Celos	74747b7f16	Fix incorrectly-positioned ink pattern on Heavy Edit Splatling	2024-06-10 12:45:25 +10:00
Andrio Celos	825c02db58	Add the ability to export snapshots of cards	2024-06-10 12:01:15 +10:00
Andrio Celos	87c8280b03	Preload the font before loading the card database Fixes card names not being scaled correctly.	2024-06-10 12:00:35 +10:00
Andrio Celos	686a648dcd	Add more metadata for new cards	2024-06-02 19:55:46 +10:00
Andrio Celos	83e4c9932c	Add Sizzle Season 2024 cards	2024-06-02 19:16:46 +10:00
Andrio Celos	ef8f5a700d	Fix infinite loop of 'game not found' errors in a certain situation	2024-03-12 13:27:30 +11:00
Andrio Celos	0b57a48de3	Fix sort ordering of new weapon variants	2024-03-08 14:57:41 +11:00
Andrio Celos	0891a53da1	Reorganise assets and convert images to WebP	2024-03-08 12:45:03 +11:00
Andrio Celos	ca287ea8eb	Rework card rendering to use the raw CardInk_00 asset	2024-03-08 12:34:57 +11:00
Andrio Celos	bd1bdd9966	Adjust card rendering	2024-03-08 11:00:41 +11:00
Andrio Celos	6409983705	Correct card name gradient on longer names	2024-03-07 10:51:35 +11:00
Andrio Celos	9d9d560b7a	Adjust ink colours for 2-star cards	2024-03-07 10:41:31 +11:00
Andrio Celos	282b998d17	Fix card name gradients not showing when filtering the gallery	2024-03-04 10:07:14 +11:00
Andrio Celos	6372e79204	Finalise Fresh Season 2024 cards and sleeves	2024-03-01 18:35:21 +11:00
Andrio Celos	d627db31fb	Add a remove card button to the deck editor	2024-03-01 11:20:06 +11:00
Andrio Celos	5296e19e86	Fix an error exporting custom cards without an image	2024-03-01 11:17:49 +11:00
Andrio Celos	242ff60a9d	Reorganise server code; move API endpoints into separate methods	2024-02-29 11:39:04 +11:00
Andrio Celos	4878d7d2c0	Update copyright notice	2024-02-26 09:54:07 +11:00
Andrio Celos	2792089465	Fix layout of stages Two-Lane Splattop and Pedal to the Metal	2024-02-24 21:08:54 +11:00
Andrio Celos	5c90d3ad09	Adjust a stage selection menu	2024-02-22 17:08:55 +11:00
Andrio Celos	87cf04909a	Update names of new stages	2024-02-22 15:47:21 +11:00
Andrio Celos	a70b5a9700	Prevent choosing stages that don't support the number of players in the game	2024-02-22 15:44:58 +11:00
Andrio Celos	125531cfbe	Add support for upcoming cards and stages	2024-02-22 15:42:39 +11:00
Andrio Celos	3bcf9cbb71	Gallery page: Keep the toolbar on top when scrolling	2024-02-21 11:10:25 +11:00
Andrio Celos	8f936d5ed2	#6 Add ability to place custom images on custom cards, revise editor UI	2024-02-20 16:39:11 +11:00
Andrio Celos	0b8e59a7e9	Add a space to card names to be included when copying it	2024-02-19 14:17:06 +11:00
Andrio Celos	372a0deee2	Use an alternate border for custom cards; move the images from the repository to external	2024-02-19 14:12:18 +11:00
Andrio Celos	e07cdc8904	Allow custom card rarity and ink colours to be selected	2024-02-16 15:56:46 +11:00
Andrio Celos	42dc0b462b	Automatically wrap custom card names and calculate text scale on the client	2024-02-09 17:07:43 +11:00
Andrio Celos	548a3116b2	Implement custom cards in replays	2024-02-08 17:23:14 +11:00
Andrio Celos	7f7563952f	Fix custom cards having wrong special cost in-game	2024-02-08 17:22:55 +11:00
Andrio Celos	ba96b6b6f6	Implement custom cards in battles	2024-02-08 15:49:49 +11:00
Andrio Celos	3d742ac443	Import/export custom cards with decks	2024-02-06 15:44:10 +11:00
Andrio Celos	686db54fa0	Allow saving decks with custom cards	2024-02-06 13:51:45 +11:00
Andrio Celos	935d3de744	More custom card UI	2024-02-05 16:55:27 +11:00
Andrio Celos	f193477ce3	Add WIP gallery page and custom card editor	2024-02-04 22:32:09 +11:00
Andrio Celos	329993b15d	Allow selecting preferred colours	2023-12-11 13:55:48 +11:00
Andrio Celos	08a539b67d	Fix decks being unselectable immediately after import	2023-12-11 10:20:57 +11:00
Andrio Celos	29ae032914	Keep special weapons and weapon variants together when sorting by size or rarity	2023-12-07 11:08:45 +11:00
Andrio Celos	b4e3b17971	Fix test highlight persisting after removing the card	2023-12-04 09:55:34 +11:00
Andrio Celos	0f108f7797	Mark Chill Season 2023 cards as released	2023-12-01 11:19:07 +11:00
Andrio Celos	22405f5770	Preserve player's ink colour in deck test after leaving a game	2023-12-01 10:55:37 +11:00
Andrio Celos	1e3525663f	Fix board flip sometimes not flipping	2023-12-01 10:54:19 +11:00
Andrio Celos	df838f9c37	Update screenshots	2023-12-01 10:52:17 +11:00
Andrio Celos	c567962309	Add Chill Season 2023 card art	2023-11-30 16:54:08 +11:00
Andrio Celos	b9a3412ab1	Highlight a placement in deck test by hovering or clicking the list	2023-11-30 11:35:17 +11:00
Andrio Celos	acc8cd247a	Update Chill Season 2023 cards	2023-11-29 12:57:19 +11:00
Andrio Celos	461e26ea5d	Fix cards not showing when skipping through replays rapidly	2023-11-24 23:18:33 +11:00
Andrio Celos	eadd999bcb	Hide the upcoming cards option in the lobby page if there are none	2023-11-24 14:04:35 +11:00
Andrio Celos	a69d67556f	Lobby layout fixes	2023-11-24 13:59:53 +11:00
Andrio Celos	4861e181ae	Fix stage switch	2023-11-24 13:55:37 +11:00
Andrio Celos	00454429a4	Fix creating a game as a spectator	2023-11-24 13:55:01 +11:00
Andrio Celos	dd7366c7d4	Add likely upcoming cards for Chill Season 2023 and option to disallow	2023-11-24 12:53:09 +11:00