From c6c6122491bd58761f474124cfbf22dd7b51e885 Mon Sep 17 00:00:00 2001
From: V1perW0lf <11570429+V1perW0lf@users.noreply.github.com>
Date: Wed, 28 Oct 2026 17:27:29 -0500
Subject: [PATCH 1/2] fix achievement grouping

---
 manifest.json                     |    7 +-
 scripts/community/achievements.js | 1999 ++++++++++++-----------------
 styles/achievements.css           |  358 +++---
 3 files changed, 990 insertions(+), 1374 deletions(-)

diff --git a/manifest.json b/manifest.json
index c55b77a45..d6a5c9c3d 100644
--- a/manifest.json
+++ b/manifest.json
@@ -383,7 +383,9 @@
 			"matches":
 			[
 				"https://steamcommunity.com/id/*/stats*",
-				"https://steamcommunity.com/profiles/*/stats*"
+				"https://steamcommunity.com/profiles/*/stats*",
+				"https://steamcommunity.com/id/*/achievements/*",
+				"https://steamcommunity.com/profiles/*/achievements/*"
 			],
 			"js":
 			[
@@ -414,7 +416,8 @@
 		{
 			"matches":
 			[
-				"https://steamcommunity.com/stats/*/achievements*"
+				"https://steamcommunity.com/stats/*/achievements*",
+				"https://steamcommunity.com/achievements/*"
 			],
 			"js":
 			[
diff --git a/scripts/community/achievements.js b/scripts/community/achievements.js
index afeca756f..a30a1902e 100644
--- a/scripts/community/achievements.js
+++ b/scripts/community/achievements.js
@@ -2,54 +2,49 @@
 'use strict';
 
 /**
- * @typedef {object} ApiGameAchievement
- * @property {string} internal_name - The internal identifier for the achievement
- * @property {string} localized_name - The display name of the achievement
- * @property {string} localized_desc - The description of the achievement
- * @property {string} icon - The filename for the achievement icon
- * @property {string} icon_gray - The filename for the grayed-out achievement icon
- * @property {boolean} hidden - Whether the achievement is hidden from players until unlocked
- * @property {string} player_percent_unlocked - The percentage of players who have unlocked this achievement
- * @property {number?} global_unlock - The parsed float value of player_percent_unlocked
- */
-
-/**
- * @typedef {object} PlayerAchievement
- * @property {string|null} unlock
- * @property {string|null} unlockCompare
- * @property {string|null} progressText
- * @property {string|null} progressTextCompare
- * @property {string|null} progressWidth
- * @property {number} [unlockTimestamp]
- */
-
-/**
- * @typedef {object} AchievementData
+ * Achievements page enhancement for Steam's NEW (React) achievements page.
+ *
+ * Why this differs from the old version:
+ *  - The new page has no .achieveRow / #personalAchieve / #tabs / #application_config,
+ *    and class names are hashed, so scraping DOM rows is not reliable.
+ *  - The new list is virtualized (only visible rows exist in the DOM).
+ *  - But the server-rendered HTML contains the full data (schema, user unlocks,
+ *    global percentages, config) in <script id="valve-ssr-data">. The page's own script
+ *    removes that tag after boot, so we re-fetch the page HTML and read it from there.
+ *
+ * @typedef {object} Ach
  * @property {number} id
- * @property {number} domId
- * @property {number} update
- * @property {ApiGameAchievement} achievement
- * @property {PlayerAchievement} player
- */
-
-/**
- * @typedef {object} AchievementGroup
+ * @property {string} apiName
+ * @property {string} name
+ * @property {string} desc
+ * @property {boolean} hidden
+ * @property {string} iconAchieved
+ * @property {string} iconUnachieved
+ * @property {number} globalUnlock  0..1
+ * @property {boolean} unlocked
+ * @property {number} unlockTimestamp  ms, 0 if locked
+ * @property {number} group  index in groups
+ *
+ * @typedef {object} Group
  * @property {string} [name]
  * @property {string} [dlcAppName]
  * @property {number} [dlcAppId]
  * @property {number} [logoAppId]
  * @property {string[]} achievementApiNames
+ * @property {Ach[]} [list]
  * @property {number} [earned]
- * @property {number} [earnedCompare]
- * @property {AchievementData[]} [achievementData]
- * @property {HTMLElement|null} [earnedDetailsElement]
+ * @property {HTMLDetailsElement} [unlockedEl]
+ * @property {HTMLDetailsElement} [lockedEl]
+ * @property {HTMLElement} [globalEl]
  */
 
 /**
- * @param {boolean} isPersonal
+ * @param {boolean} isPersonal  hint from the caller; real value is derived from the data
  */
 function DoAchievements( isPersonal )
 {
+	WriteLog( 'achievements.js (React rewrite) loaded', location.pathname );
+
 	GetOption( {
 		'improve-achievements': true,
 		'spoiler-achievements': true,
@@ -57,225 +52,187 @@ function DoAchievements( isPersonal )
 		'achievements-global-unlock': true,
 	}, ( items ) =>
 	{
-		InitAchievements( items, isPersonal );
+		InitAchievements( items, isPersonal ).catch( ( e ) => console.error( '[SteamDB]', e ) );
 	} );
 }
 
 /**
- * @param {{ [key: string]: any }} items
- * @param {boolean} isPersonal
+ * @param {string} selector
+ * @param {(el: Element) => boolean} [predicate]
+ * @param {number} timeout
+ * @returns {Promise<Element|null>}
  */
-function InitAchievements( items, isPersonal )
+function WaitForElement( selector, predicate = () => true, timeout = 15000 )
 {
-	if( !items[ 'improve-achievements' ] )
-	{
-		return;
-	}
-
-	const spoilerAchievements = !!items[ 'spoiler-achievements' ];
-	const showGlobalUnlock = !!items[ 'achievements-global-unlock' ];
-	const oldContainer = document.getElementById( 'personalAchieve' );
-
-	if( isPersonal && !oldContainer )
+	return new Promise( ( resolve ) =>
 	{
-		return;
-	}
-
-	/** @type {HTMLElement} */
-	const gameLogoElement = document.querySelector( '.profile_small_header_additional .gameLogo' );
-
-	if( !gameLogoElement )
-	{
-		WriteLog( 'Failed to find game logo' );
-		return;
-	}
-
-	gameLogoElement.style.viewTransitionName = 'steamdb-gamelogo';
+		const check = () =>
+		{
+			const el = document.querySelector( selector );
+			return el && predicate( el ) ? el : null;
+		};
 
-	const appIdElement = gameLogoElement.querySelector( 'a' );
-	let appid = 0;
+		const found = check();
 
-	if( appIdElement )
-	{
-		const appidMatch = appIdElement.href.match( /\/app\/(?<id>[0-9]+)/ );
-
-		if( appidMatch )
+		if( found )
 		{
-			appid = Number.parseInt( appidMatch.groups.id, 10 );
+			resolve( found );
+			return;
 		}
-	}
-	else
-	{
-		/** @type {HTMLImageElement} */
-		const gameLogoImage = gameLogoElement.querySelector( 'img' );
-		const appidMatch = gameLogoImage.src.match( /\/apps\/(?<id>[0-9]+)/ );
 
-		if( appidMatch )
+		const observer = new MutationObserver( () =>
 		{
-			appid = Number.parseInt( appidMatch.groups.id, 10 );
-		}
-	}
+			const el = check();
 
-	if( appid === 0 )
-	{
-		WriteLog( 'Failed to find appid' );
-		return;
-	}
+			if( el )
+			{
+				observer.disconnect();
+				resolve( el );
+			}
+		} );
 
-	const extraTabs = document.createElement( 'div' );
-	extraTabs.className = 'steamdb_stats_extra_tabs';
+		observer.observe( document.documentElement, { childList: true, subtree: true } );
 
-	/** @type {HTMLButtonElement|null} */
-	let sortButton = null;
+		setTimeout( () =>
+		{
+			observer.disconnect();
+			resolve( null );
+		}, timeout );
+	} );
+}
 
-	if( isPersonal )
+/**
+ * Read all data we need from the SSR payload of this very page.
+ * @param {number} appid
+ */
+async function LoadPageData( appid )
+{
+	const response = await fetch( location.href, { headers: { Accept: 'text/html' } } );
+	const html = await response.text();
+	const doc = new DOMParser().parseFromString( html, 'text/html' );
+	const dataElement = doc.getElementById( 'valve-ssr-data' );
+
+	if( !dataElement )
 	{
-		sortButton = document.createElement( 'button' );
+		throw new Error( 'valve-ssr-data not found' );
+	}
 
-		sortButton.type = 'button';
-		sortButton.className = 'btn_grey_black btn_small_thin steamdb_achievements_sort_button';
+	const ssr = JSON.parse( dataElement.textContent );
+	const queries = JSON.parse( ssr.renderContext.queryData ).queries;
 
-		const sortButtonText = document.createElement( 'span' );
-		sortButtonText.textContent = _t( 'achievements_sort_by_time' );
-		sortButton.append( sortButtonText );
-		extraTabs.append( sortButton );
-	}
+	const find = ( kind ) => queries.find( ( q ) =>
+		q.queryKey[ 0 ] === 'achievements' && q.queryKey[ 1 ] === appid && q.queryKey[ 2 ] === kind
+	)?.state?.data;
 
-	// Steam Hunters link
-	const steamID = location.pathname.match( /^\/(?<url>(?:id|profiles)\/(?:[^\s/]+))\/?/ );
+	/** @type {ApplicationConfig} */
+	const config = Object.assign( {}, ssr.Config );
 
-	if( steamID || !isPersonal )
+	try
 	{
-		const link = document.createElement( 'a' );
-		link.dataset.tooltipText = _t( 'view_on_steam_hunters' );
+		const token = JSON.parse( ssr.loaderData[ 0 ] ).strWebAPIToken;
 
-		if( steamID )
+		if( token )
 		{
-			link.href = `https://steamhunters.com/${steamID.groups.url}/apps/${appid}/achievements?utm_source=SteamDB`;
+			config.WEBAPI_ACCESS_TOKEN = token;
 		}
-		else
-		{
-			link.href = `https://steamhunters.com/apps/${appid}/achievements?utm_source=SteamDB`;
-		}
-
-		const image = document.createElement( 'img' );
-		image.className = 'steamdb_stats_tab_icon';
-		image.src = GetLocalResource( 'icons/steamhunters.svg' );
-		link.append( image );
-
-		extraTabs.append( link );
 	}
-
-	// SteamDB link
+	catch
 	{
-		const link = document.createElement( 'a' );
-		link.href = `${GetHomepage()}app/${appid}/stats/`;
-		link.dataset.tooltipText = _t( 'view_on_steamdb' );
-
-		const image = document.createElement( 'img' );
-		image.className = 'steamdb_stats_tab_icon';
-		image.src = GetLocalResource( 'icons/white.svg' );
-
-		link.append( image );
-		extraTabs.append( link );
+		// not logged in, no token
 	}
 
-	if( !isPersonal )
+	return {
+		config,
+		schema: find( 'schema_v2' ),
+		user: find( 'user_achievements' ),
+		percentages: find( 'globalpercentages' )?.percentages || {},
+	};
+}
+
+/**
+ * @param {{ [key: string]: any }} items
+ * @param {boolean} isPersonalHint
+ */
+async function InitAchievements( items, isPersonalHint )
+{
+	if( !items[ 'improve-achievements' ] )
 	{
-		extraTabs.append( CreateHideEarnedButton() );
+		return;
 	}
 
-	extraTabs.append( CreateFoldButton( true ) );
+	const spoilerAchievements = !!items[ 'spoiler-achievements' ];
+	const showGlobalUnlock = !!items[ 'achievements-global-unlock' ];
+
+	const appidMatch = location.pathname.match( /\/achievements\/(?<id>[0-9]+)/ );
 
-	function AppendExtraTabs( firstTime = false )
+	if( !appidMatch )
 	{
-		if( window.innerWidth < 600 )
-		{
-			if( extraTabs.classList.contains( 'steamdb_stats_extra_tabs_mobile' ) )
-			{
-				return;
-			}
-			extraTabs.classList.add( 'steamdb_stats_extra_tabs_mobile' );
-			document
-				.querySelector( '#subtabs' )
-				.insertAdjacentElement( 'afterend', extraTabs );
-		}
-		else if( firstTime || extraTabs.classList.contains( 'steamdb_stats_extra_tabs_mobile' ) )
-		{
-			extraTabs.classList.remove( 'steamdb_stats_extra_tabs_mobile' );
-			document.querySelector( '#tabs' ).append( extraTabs );
-		}
+		WriteLog( 'Failed to find appid' );
+		return;
 	}
 
-	AppendExtraTabs( true );
-	window.addEventListener( 'resize', () => AppendExtraTabs( false ) );
+	const appid = Number.parseInt( appidMatch.groups.id, 10 );
 
-	let isCompareView = false;
+	// Wait for React to render the virtualized list so we know where to put our container
+	const firstRow = await WaitForElement( '[data-tableindex]' );
 
-	/** @type {string|null} */
-	let leftAvatarUrl = null;
-
-	/** @type {string|null} */
-	let rightAvatarUrl = null;
-
-	if( isPersonal )
+	if( !firstRow )
 	{
-		if( oldContainer.classList.contains( 'compare_view' ) )
-		{
-			isCompareView = true;
-			leftAvatarUrl = /** @type {HTMLImageElement} */ ( document.querySelector( '.topAvatarsLeft img' ) ).src;
-			rightAvatarUrl = /** @type {HTMLImageElement} */ ( document.querySelector( '.topAvatarsRight img' ) ).src;
-		}
+		WriteLog( 'Failed to find new achievements list' );
+		return;
 	}
-	else
-	{
-		// Some games like TF2 and CS:S have achievement groups, so skip if it's filtered
-		/** @type {HTMLSelectElement} */
-		const groupSelector = document.querySelector( '#headerContent select[name="group"]' );
 
-		if( groupSelector && groupSelector.value !== 'all' )
-		{
-			return;
-		}
-	}
+	// The virtualized list wrapper: plain (non-hashed) "Panel" class + position: relative
+	/** @type {HTMLElement|null} */
+	let nativeList = firstRow.parentElement;
 
-	const applicationConfig = ParseApplicationConfig();
+	while( nativeList && !( nativeList.classList.contains( 'Panel' ) && nativeList.style.position === 'relative' ) )
+	{
+		nativeList = nativeList.parentElement;
+	}
 
-	if( !applicationConfig.LANGUAGE )
+	if( !nativeList )
 	{
-		WriteLog( 'Failed to find language' );
+		WriteLog( 'Failed to find native list wrapper' );
 		return;
 	}
 
-	const params = new URLSearchParams();
-	params.set( 'origin', location.origin );
-	params.set( 'format', 'json' );
+	WriteLog( 'Found native list, loading page data' );
 
-	if( applicationConfig.WEBAPI_ACCESS_TOKEN )
+	const data = await LoadPageData( appid );
+
+	if( !data.schema || !data.schema.groups )
 	{
-		params.set( 'access_token', applicationConfig.WEBAPI_ACCESS_TOKEN );
+		WriteLog( 'Failed to find achievement schema' );
+		return;
 	}
 
-	params.set( 'appid', appid.toString() );
+	// Steam now has its own "sets" (base game, DLC, ...). When a game uses them, Steam's page already
+	// groups achievements and all its own features (compare, filters, global stats) work, so leave it alone.
+	const nativeSets = data.schema.groups.filter( ( g ) => g.id !== 0 && g.achievements.length > 0 );
 
-	if( applicationConfig.LANGUAGE === 'sc_schinese' )
-	{
-		params.set( 'language', 'schinese' );
-	}
-	else
+	if( nativeSets.length > 0 )
 	{
-		params.set( 'language', applicationConfig.LANGUAGE );
+		WriteLog( 'Steam already groups this game into sets, not changing the page' );
+		return;
 	}
 
-	// Request header field x-requested-with is not allowed
-	// by Access-Control-Allow-Headers in preflight response.
-	params.set( 'x_requested_with', 'SteamDB' );
+	const applicationConfig = data.config;
+	const isPersonal = !!data.user || ( isPersonalHint && /^\/(?:id|profiles)\//.test( location.pathname ) );
+	const userAchievements = data.user?.achievements || {};
 
-	const gameAchievementsFetch = fetch( `${applicationConfig.WEBAPI_BASE_URL}IPlayerService/GetGameAchievements/v1/?${params.toString()}` )
-		.then( ( response ) => response.json() );
+	const baseName = document.title.match( /^Steam Community :: (?<name>.+?) :: /u )?.groups.name || 'Base Game';
 
-	if( items[ 'achievements-group-updates' ] )
+	// Group updates from SteamDB (DLC / updates), if enabled
+	/** @type {Group[]|null} */
+	const steamdbGroups = await new Promise( ( resolve ) =>
 	{
+		if( !items[ 'achievements-group-updates' ] )
+		{
+			resolve( null );
+			return;
+		}
+
 		SendMessageToBackgroundScript( {
 			contentScriptQuery: 'GetAchievementsGroups',
 			appid,
@@ -283,970 +240,858 @@ function InitAchievements( items, isPersonal )
 		{
 			if( !response || !response.success || !Array.isArray( response.data ) )
 			{
-				gameAchievementsFetch.then( ( gameAchievements ) =>
-				{
-					ProcessGameAchievements( gameAchievements, [] );
-				} );
-
-				if( response?.error )
-				{
-					WriteLog( `GetAchievementsGroups failed to load: ${response.error}` );
-				}
-				else
-				{
-					WriteLog( 'GetAchievementsGroups failed to load' );
-				}
-
+				WriteLog( 'GetAchievementsGroups failed to load', response?.error );
+				resolve( null );
 				return;
 			}
 
 			WriteLog( 'GetAchievementsGroups loaded' );
+			resolve( response.data );
+		} );
+	} );
 
-			const dlcCapsulesPromise = FetchDlcCapsules( applicationConfig, appid, response.data );
+	/** @type {Group[]} */
+	let groups;
 
-			gameAchievementsFetch.then( ( gameAchievements ) =>
-			{
-				ProcessGameAchievements( gameAchievements, response.data, dlcCapsulesPromise );
-			} ).catch( ( e ) => console.error( '[SteamDB]', e ) );
-		} );
+	if( steamdbGroups )
+	{
+		groups = [ { name: baseName, achievementApiNames: [] }, ...steamdbGroups ];
 	}
 	else
 	{
-		gameAchievementsFetch.then( ( gameAchievements ) =>
-		{
-			ProcessGameAchievements( gameAchievements, [] );
-		} ).catch( ( e ) => console.error( '[SteamDB]', e ) );
-	}
+		// Fall back to the groups already present in Steam's own schema (DLC achievements)
+		groups = [ { name: baseName, achievementApiNames: [] } ];
 
-	/**
-	 * @param {Record<string, any>} response
-	 * @param {AchievementGroup[]} achievementUpdates
-	 * @param {Promise<Map<number, string>>} [dlcCapsulesPromise]
-	 */
-	function ProcessGameAchievements( response, achievementUpdates, dlcCapsulesPromise )
-	{
-		if( !response || !response.response || !response.response.achievements )
+		for( const schemaGroup of data.schema.groups )
 		{
-			return;
+			if( schemaGroup.id === 0 || !schemaGroup.dlcappid )
+			{
+				continue;
+			}
+
+			groups.push( {
+				name: schemaGroup.name || undefined,
+				dlcAppId: schemaGroup.dlcappid,
+				achievementApiNames: schemaGroup.achievements.map( ( a ) => a.api_name ),
+			} );
 		}
+	}
 
-		achievementUpdates.unshift( {
-			name: document.title.match( /^.+? :: (?<name>.+) :: / )?.groups.name || 'Base Game',
-			achievementApiNames: [],
-		} );
+	/** @type {Map<string, number>} */
+	const apiNameToGroup = new Map();
 
-		/** @type {Map<string, number>} */
-		const achievementInternalIdToUpdate = new Map();
+	groups.forEach( ( group, index ) =>
+	{
+		group.list = [];
+		group.earned = 0;
 
-		for( let updateId = 0; updateId < achievementUpdates.length; updateId++ )
+		for( const apiName of group.achievementApiNames )
 		{
-			const update = achievementUpdates[ updateId ];
-			update.earned = 0;
-			update.earnedCompare = 0;
-			update.achievementData = [];
-			update.earnedDetailsElement = null;
-
-			for( const achievement of update.achievementApiNames )
-			{
-				achievementInternalIdToUpdate.set( achievement, updateId );
-			}
+			apiNameToGroup.set( apiName, index );
 		}
+	} );
 
-		/** @type {NodeListOf<HTMLElement>} */
-		const oldAchievementRows = document.querySelectorAll( '.achieveRow' );
-
-		/** @type {Map<number, ApiGameAchievement>} */
-		const achievements = new Map( response.response.achievements.map( ( /** @type {ApiGameAchievement} */ value, /** @type {number} */ index ) => [ index, value ] ) );
-
-		/**
-		 * @param {number} id
-		 * @param {number} domId
-		 * @param {ApiGameAchievement} achievement
-		 * @param {PlayerAchievement} player
-		 */
-		const AddAchievementData = ( id, domId, achievement, player ) =>
+	// Build achievement list from the schema
+	for( const schemaGroup of data.schema.groups )
+	{
+		for( const a of schemaGroup.achievements )
 		{
-			achievement.global_unlock = Number.parseFloat( achievement.player_percent_unlocked ) / 100.0;
+			const user = userAchievements[ a.internal_key ];
+			const unlocked = !!user?.unlocked;
 
-			/** @type {AchievementData} */
+			/** @type {Ach} */
 			const ach = {
-				id,
-				domId,
-				update: achievementInternalIdToUpdate.get( achievement.internal_name ) || 0,
-				achievement,
-				player,
+				id: a.internal_key,
+				apiName: a.api_name,
+				name: a.name,
+				desc: a.description,
+				hidden: !!a.hidden,
+				iconAchieved: a.icon_achieved,
+				iconUnachieved: a.icon_unachieved,
+				globalUnlock: ( data.percentages[ a.internal_key ] || 0 ) / 100,
+				unlocked,
+				unlockTimestamp: unlocked ? ( user.unlock_time || 0 ) * 1000 : 0,
+				group: apiNameToGroup.get( a.api_name ) || 0,
 			};
 
-			const update = achievementUpdates[ ach.update ];
-			update.achievementData.push( ach );
+			groups[ ach.group ].list.push( ach );
 
-			if( ach.player.unlock )
+			if( unlocked )
 			{
-				update.earned++;
+				groups[ ach.group ].earned++;
 			}
+		}
+	}
 
-			if( ach.player.unlockCompare )
-			{
-				update.earnedCompare++;
-			}
-		};
+	WriteLog( 'Groups:', groups.map( ( g ) => `${g.name || g.dlcAppName || g.dlcAppId} (${g.list.length})` ) );
 
-		let badAchievementsLogged = 10;
+	/** @type {Map<number, Ach>} */
+	const achById = new Map();
 
-		let firstLockedDomId = -1;
-		if( isPersonal )
+	for( const group of groups )
+	{
+		for( const ach of group.list )
 		{
-			const container = oldAchievementRows[ 0 ]?.parentElement;
-			if( container )
-			{
-				const children = Array.from( container.children );
-
-				// Look for  <br><br><br>
-				for( let i = 0; i < children.length - 2; i++ )
-				{
-					if( children[ i ].tagName === 'BR' &&
-						children[ i + 1 ].tagName === 'BR' &&
-						children[ i + 2 ].tagName === 'BR' )
-					{
-						let achieveRowCount = 0;
-
-						for( let j = 0; j < i; j++ )
-						{
-							if( children[ j ].classList?.contains( 'achieveRow' ) )
-							{
-								achieveRowCount++;
-							}
-						}
-
-						firstLockedDomId = achieveRowCount;
-						break;
-					}
-				}
-			}
+			achById.set( ach.id, ach );
 		}
+	}
 
-		// Match all achievements on the page to API data
-		for( let domId = 0; domId < oldAchievementRows.length; domId++ )
-		{
-			const element = oldAchievementRows[ domId ];
+	const mediaCdn = applicationConfig.MEDIA_CDN_COMMUNITY_URL ||
+		document.querySelector( 'img[src*="/images/apps/"]' )?.src.replace( /images\/apps\/.*$/u, '' ) ||
+		'https://shared.fastly.steamstatic.com/community_assets/';
+	const storeItemBase = applicationConfig.STORE_ITEM_BASE_URL || 'https://shared.fastly.steamstatic.com/store_item_assets/';
+	const baseCapsuleUrl = `${storeItemBase}steam/apps/${appid}/header.jpg`;
 
-			/** @type {HTMLImageElement} */
-			const image = element.querySelector( '.achieveImgHolder > img' );
+	const dlcCapsulesPromise = FetchDlcCapsules( applicationConfig, appid, groups );
 
-			if( !image )
-			{
-				// hidden achievements remaining element
-				continue;
-			}
+	const percentFormatter = new Intl.NumberFormat( GetLanguage(), {
+		style: 'percent',
+		minimumFractionDigits: 1,
+		maximumFractionDigits: 1,
+	} );
 
-			const iconSlash = image.src.lastIndexOf( '/' );
-			const icon = iconSlash > 0 ? image.src.substring( iconSlash + 1 ) : null;
+	const dateFormatter = new Intl.DateTimeFormat( GetLanguage(), {
+		dateStyle: 'medium',
+		timeStyle: 'short',
+	} );
 
-			const name = element.querySelector( '.achieveTxt > h3' ).textContent;
-			const progress = element.querySelector( '.achievementProgressBar' );
-			let progressText = null;
-			let progressWidth = null;
-			let progressTextCompare = null;
-			let unlock;
-			let unlockCompare;
+	let sortByTime = false;
 
-			if( isPersonal )
-			{
-				if( isCompareView )
-				{
-					unlock = element
-						.querySelector( '.achieveUnlockTime' )
-						?.childNodes[ 0 ].textContent.trim();
-					unlockCompare = element
-						.querySelector( '.achieveUnlockTime .compareVal' )
-						?.textContent.trim();
-				}
-				else
-				{
-					unlock = element
-						.querySelector( '.achieveUnlockTime' )
-						?.textContent.trim();
-				}
-
-				if( !unlock && firstLockedDomId !== -1 && domId < firstLockedDomId )
-				{
-					unlock = '—';
-				}
-			}
-			else if( element.classList.contains( 'unlocked' ) )
-			{
-				unlock = 'true'; // slightly odd type conformation, but the text won't be displayed for non-personal pages
-			}
+	/**
+	 * @param {Ach} ach
+	 */
+	const CreateAchievementRow = ( ach ) =>
+	{
+		const element = document.createElement( 'div' );
+		element.className = 'steamdb_achievement';
+		element.dataset.achId = ach.id.toString();
 
-			if( progress )
-			{
-				if( isCompareView )
-				{
-					progressText = progress
-						.querySelector( '.progressText' )
-						?.childNodes[ 0 ].textContent.trim();
-					progressTextCompare = progress
-						.querySelector( '.progressText .compareVal' )
-						?.textContent.trim();
-				}
-				else
-				{
-					progressText = progress.querySelector( '.progressText' ).textContent.trim();
-				}
+		if( ach.id < 100 )
+		{
+			element.style.viewTransitionName = `steamdb-achievement-${ach.id}`;
+		}
 
-				progressWidth = /** @type {HTMLElement} */ ( progress.querySelector( '.progress' ) ).style.width;
-			}
+		const showColor = !isPersonal || ach.unlocked || !ach.iconUnachieved;
 
-			let foundAchievement = false;
+		const image = document.createElement( 'img' );
+		image.src = `${mediaCdn}images/apps/${appid}/${showColor ? ach.iconAchieved : ach.iconUnachieved}`;
+		image.className = 'steamdb_achievement_image';
+		image.loading = 'lazy';
+		element.append( image );
 
-			for( const [ id, achievement ] of achievements.entries() )
-			{
-				if( name !== achievement.localized_name )
-				{
-					continue;
-				}
+		const nameContainer = document.createElement( 'div' );
+		element.append( nameContainer );
 
-				const apiIcon = unlock || !isPersonal ? achievement.icon : achievement.icon_gray;
+		const name = document.createElement( 'h3' );
+		name.textContent = ach.name;
+		nameContainer.append( name );
 
-				if( apiIcon && icon !== apiIcon )
-				{
-					if( badAchievementsLogged-- > 0 )
-					{
-						WriteLog( 'Mismatching icon', icon, achievement );
-					}
+		if( ach.hidden && !ach.unlocked )
+		{
+			const hiddenAch = document.createElement( 'i' );
+			hiddenAch.textContent = _t( 'hidden_achievement' );
 
-					continue;
-				}
+			const desc = document.createElement( 'span' );
+			desc.textContent = ach.desc;
 
-				AddAchievementData( id, domId, achievement, {
-					unlock,
-					unlockCompare,
-					progressText,
-					progressTextCompare,
-					progressWidth,
-				} );
+			const descSpoiler = document.createElement( 'h5' );
+			descSpoiler.append( hiddenAch );
+			descSpoiler.append( desc );
+			nameContainer.append( descSpoiler );
 
-				foundAchievement = true;
+			if( spoilerAchievements )
+			{
+				desc.classList.add( 'steamdb_achievement_spoiler' );
 
-				if( id < 100 )
+				if( isPersonal )
 				{
-					element.style.viewTransitionName = `steamdb-achievement-${id}`;
+					image.classList.add( 'steamdb_achievement_spoiler' );
+					name.classList.add( 'steamdb_achievement_spoiler' );
 				}
+			}
+		}
+		else
+		{
+			const desc = document.createElement( 'h5' );
+			desc.textContent = ach.desc;
+			nameContainer.append( desc );
+		}
 
-				achievements.delete( id );
+		// Global unlock percentage on the far right, shown/hidden by the "Show Global Stats" toggle
+		const AppendGlobalUnlock = () =>
+		{
+			const percent = percentFormatter.format( ach.globalUnlock );
 
-				break;
-			}
+			const unlock = document.createElement( 'div' );
+			unlock.className = 'steamdb_achievement_unlock_global';
+			unlock.title = _t( 'achievement_global_unlock', [ percent ] );
+			unlock.textContent = percent;
+			element.append( unlock );
+		};
 
-			if( !foundAchievement && badAchievementsLogged-- > 0 )
-			{
-				WriteLog( 'Failed to find achievement', name, icon );
-			}
+		if( !isPersonal )
+		{
+			AppendGlobalUnlock();
+
+			return element;
 		}
 
-		// Add hidden achievements
-		for( const [ id, achievement ] of achievements.entries() )
+		if( ach.globalUnlock < 0.1 )
 		{
-			AddAchievementData( id, null, achievement, {
-				unlock: null,
-				unlockCompare: null,
-				progressText: null,
-				progressTextCompare: null,
-				progressWidth: null,
-			} );
+			image.classList.add( 'steamdb_achievement_image_glow' );
 		}
 
-		const percentFormatter = new Intl.NumberFormat( GetLanguage(), {
-			style: 'percent',
-			minimumFractionDigits: 1,
-			maximumFractionDigits: 1,
-		} );
+		const status = document.createElement( 'div' );
+		status.className = 'steamdb_achievement_status';
 
-		/**
-		 * @param {string} unlock
-		 * @param {number} unlockTimestamp
-		 * @param {boolean} isLeftPlayer
-		 */
-		const CreateUnlockRow = ( unlock, unlockTimestamp, isLeftPlayer ) =>
+		if( ach.unlocked )
 		{
 			const unlockRow = document.createElement( 'div' );
 			unlockRow.className = 'steamdb_achievement_status_row';
 
 			const text = document.createElement( 'div' );
-			text.textContent = unlock;
-			unlockRow.append( text );
 
-			if( !isLeftPlayer )
+			if( ach.unlockTimestamp )
 			{
-				text.className = 'steamdb_achievement_status_row_compare';
-			}
+				text.textContent = dateFormatter.format( ach.unlockTimestamp );
 
-			if( unlockTimestamp )
-			{
 				const relativeUnlock = document.createElement( 'div' );
-				relativeUnlock.textContent = FormatRelativeTime(
-					Date.now() - unlockTimestamp,
-				);
+				relativeUnlock.textContent = FormatRelativeTime( Date.now() - ach.unlockTimestamp );
 				text.append( relativeUnlock );
 			}
-
-			if( isCompareView )
+			else
 			{
-				const avatar = document.createElement( 'img' );
-				avatar.className = 'steamdb_achievement_status_avatar';
-				avatar.src = isLeftPlayer ? leftAvatarUrl : rightAvatarUrl;
-				unlockRow.append( avatar );
+				text.textContent = '—';
 			}
 
-			return unlockRow;
-		};
+			unlockRow.append( text );
+			status.append( unlockRow );
+		}
 
-		/**
-		 * @param {string} progressText
-		 * @param {string} progressWidth
-		 * @param {boolean} isLeftPlayer
-		 */
-		const CreateProgressRow = ( progressText, progressWidth, isLeftPlayer = true ) =>
-		{
-			const progressRow = document.createElement( 'div' );
-			progressRow.className = 'steamdb_achievement_status_row steamdb_achievement_status_locked';
+		element.append( status );
 
-			const progress = document.createElement( 'div' );
-			progress.className = 'steamdb_achievement_progress';
-			progressRow.append( progress );
+		AppendGlobalUnlock();
 
-			if( !isLeftPlayer )
-			{
-				progress.classList.add( 'steamdb_achievement_progress_compare' );
-				// removing parentheses from start and end of second player progress text
-				progressText = progressText.replace( /^\(/, '' ).replace( /\)$/, '' );
+		return element;
+	};
 
-				// trying to get progress based on text, as right player doesn't have a bar
-				const [ current, total ] = progressText.split( '/' ).map( ( val ) => val.replace( /,/g, '' ).trim() );
-				progressWidth = Math.ceil( Number.parseInt( current, 10 ) / Number.parseInt( total, 10 ) * 100 ) + '%';
-			}
+	/**
+	 * @param {number} earned
+	 * @param {number} total
+	 */
+	const CreateProgressSummary = ( earned, total ) =>
+	{
+		const percentage = total > 0 ? earned / total : 0;
+		const progress = document.createElement( 'div' );
+		progress.className = 'steamdb_achievement_progress';
 
-			const info = document.createElement( 'div' );
-			info.textContent = progressText;
-			progress.append( info );
+		const info = document.createElement( 'div' );
+		info.className = 'steamdb_achievement_progress_info';
+		info.textContent = `${earned} / ${total} (${percentFormatter.format( percentage )})`;
 
-			const progressBar = document.createElement( 'div' );
-			progressBar.className = 'steamdb_achievement_progressbar';
-			info.append( progressBar );
+		const progressBar = document.createElement( 'div' );
+		progressBar.className = 'steamdb_achievement_progressbar';
 
-			const progressBarInner = document.createElement( 'div' );
-			progressBarInner.className = 'steamdb_achievement_progressbar_inner';
-			progressBarInner.style.width = progressWidth;
-			progressBar.append( progressBarInner );
+		const progressBarInner = document.createElement( 'div' );
+		progressBarInner.className = 'steamdb_achievement_progressbar_inner';
+		progressBarInner.style.width = Math.round( percentage * 100 ) + '%';
+		progressBar.append( progressBarInner );
 
-			if( isCompareView )
-			{
-				const avatar = document.createElement( 'img' );
-				avatar.className = 'steamdb_achievement_status_avatar';
-				avatar.src = isLeftPlayer ? leftAvatarUrl : rightAvatarUrl;
-				progressRow.append( avatar );
-			}
+		info.append( progressBar );
+		progress.append( info );
 
-			return progressRow;
-		};
+		return progress;
+	};
 
-		/**
-		 * @param {boolean} isLeftPlayer
-		 */
-		const CreateLockRow = ( isLeftPlayer ) =>
+	/**
+	 * @param {Ach[]} list
+	 */
+	const SortByGlobal = ( list ) => list.sort( ( a, b ) =>
+	{
+		if( a.globalUnlock === b.globalUnlock )
 		{
-			const lockRow = document.createElement( 'div' );
-			lockRow.className = 'steamdb_achievement_status_row steamdb_achievement_status_locked';
+			return a.id - b.id;
+		}
 
-			const avatar = document.createElement( 'img' );
-			avatar.className = 'steamdb_achievement_status_avatar';
-			avatar.src = isLeftPlayer ? leftAvatarUrl : rightAvatarUrl;
-			lockRow.append( avatar );
+		return b.globalUnlock > a.globalUnlock ? 1 : -1;
+	} );
 
-			return lockRow;
+	/**
+	 * (Re)fill the achievement rows of a group.
+	 * @param {Group} group
+	 */
+	const FillGroup = ( group ) =>
+	{
+		const clear = ( /** @type {HTMLElement} */ el ) =>
+		{
+			while( el.lastElementChild && el.lastElementChild.tagName !== 'SUMMARY' )
+			{
+				el.lastElementChild.remove();
+			}
 		};
 
-		/**
-		 * @param {object} obj
-		 * @param {number} obj.id
-		 * @param {ApiGameAchievement} obj.achievement
-		 * @param {PlayerAchievement} obj.player
-		 */
-		const CreateAchievementRow = ( { id, achievement, player } ) =>
+		if( !isPersonal )
 		{
-			const element = document.createElement( 'div' );
-			element.className = 'steamdb_achievement';
+			clear( group.globalEl );
 
-			if( id < 100 )
+			for( const ach of SortByGlobal( group.list.slice() ) )
 			{
-				element.style.viewTransitionName = `steamdb-achievement-${id}`;
+				group.globalEl.append( CreateAchievementRow( ach ) );
 			}
 
-			const image = document.createElement( 'img' );
-			image.src = `${applicationConfig.MEDIA_CDN_COMMUNITY_URL}images/apps/${appid}/${!isPersonal || player.unlock || !achievement.icon_gray ? achievement.icon : achievement.icon_gray}`;
-			image.className = 'steamdb_achievement_image';
-			element.append( image );
+			return;
+		}
 
-			const nameContainer = document.createElement( 'div' );
-			element.append( nameContainer );
+		clear( group.unlockedEl );
+		clear( group.lockedEl );
 
-			const name = document.createElement( 'h3' );
-			name.textContent = achievement.localized_name;
-			nameContainer.append( name );
+		const unlocked = group.list.filter( ( a ) => a.unlocked );
+		const locked = group.list.filter( ( a ) => !a.unlocked );
 
-			if(
-				achievement.hidden &&
-				( ( !player.unlock && !isCompareView ) ||
-					( !player.unlockCompare && isCompareView ) )
-			)
-			{
-				const hiddenAch = document.createElement( 'i' );
-				hiddenAch.textContent = _t( 'hidden_achievement' );
+		SortByGlobal( locked );
 
-				const desc = document.createElement( 'span' );
-				desc.textContent = achievement.localized_desc;
+		if( sortByTime )
+		{
+			unlocked.sort( ( a, b ) => a.unlockTimestamp === b.unlockTimestamp ?
+				a.id - b.id :
+				b.unlockTimestamp - a.unlockTimestamp );
+		}
+		else
+		{
+			SortByGlobal( unlocked );
+		}
 
-				const descSpoiler = document.createElement( 'h5' );
-				descSpoiler.append( hiddenAch );
-				descSpoiler.append( desc );
-				nameContainer.append( descSpoiler );
+		for( const ach of unlocked )
+		{
+			group.unlockedEl.append( CreateAchievementRow( ach ) );
+		}
 
-				if( spoilerAchievements )
-				{
-					desc.classList.add( 'steamdb_achievement_spoiler' );
+		for( const ach of locked )
+		{
+			group.lockedEl.append( CreateAchievementRow( ach ) );
+		}
 
-					if( isPersonal )
-					{
-						image.classList.add( 'steamdb_achievement_spoiler' );
-						name.classList.add( 'steamdb_achievement_spoiler' );
-					}
-				}
-			}
-			else
-			{
-				const desc = document.createElement( 'h5' );
-				desc.textContent = achievement.localized_desc;
-				nameContainer.append( desc );
-			}
+		group.unlockedEl.hidden = unlocked.length === 0;
+		group.lockedEl.hidden = locked.length === 0;
+	};
 
-			if( !isPersonal )
-			{
-				const unlock = document.createElement( 'div' );
-				unlock.className = 'steamdb_achievement_unlock_global';
-				unlock.textContent = percentFormatter.format( achievement.global_unlock );
-				element.append( unlock );
+	// ---- Build container ----
+	let counter = 0;
+	const newContainer = document.createElement( 'div' );
+	newContainer.className = 'steamdb_achievements_container';
+
+	// Toolbar (replaces the old tab bar)
+	const extraTabs = document.createElement( 'div' );
+	extraTabs.className = 'steamdb_stats_extra_tabs';
 
-				const checkmark = document.createElement( 'div' );
-				checkmark.className = 'steamdb_achievement_checkmark';
-				element.prepend( checkmark );
+	/** @type {HTMLButtonElement|null} */
+	let sortButton = null;
 
-				if( player.unlock )
-				{
-					element.classList.add( 'steamdb_earned_achievement' );
+	if( isPersonal )
+	{
+		sortButton = document.createElement( 'button' );
+		sortButton.type = 'button';
+		sortButton.className = 'btn_grey_black btn_small_thin steamdb_achievements_sort_button';
 
-					checkmark.innerHTML = `
-						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
-							<path d="M31.09 4.38L13 22.46L5.41 14.88L1.88 18.41L13 29.54L34.62 7.91L31.09 4.38Z"/>
-						</svg>
-					`;
+		const sortButtonText = document.createElement( 'span' );
+		sortButtonText.textContent = _t( 'achievements_sort_by_time' );
+		sortButton.append( sortButtonText );
+		extraTabs.append( sortButton );
+
+		sortButton.addEventListener( 'click', ( e ) =>
+		{
+			e.preventDefault();
 
-					if( achievement.global_unlock < 0.1 )
+			sortByTime = !sortByTime;
+			sortButton.classList.toggle( 'steamdb_active', sortByTime );
+
+			StartViewTransition( () =>
+			{
+				for( const group of groups )
+				{
+					if( group.unlockedEl )
 					{
-						image.classList.add( 'steamdb_achievement_image_glow' );
+						FillGroup( group );
 					}
 				}
 
-				element.classList.add( 'steamdb_achievement_global_progress_overlay' );
-				element.style.setProperty( '--steamdb-progress', `${Math.round( achievement.global_unlock * 100 )}%` );
+				ApplyFilters( false );
+			} );
+		} );
+	}
 
-				return element;
-			}
+	const steamID = location.pathname.match( /^\/(?<url>(?:id|profiles)\/(?:[^\s/]+))\/?/ );
 
-			if( showGlobalUnlock )
-			{
-				const globalUnlock = document.createElement( 'h6' );
-				globalUnlock.textContent = _t( 'achievement_global_unlock', [ percentFormatter.format( achievement.global_unlock ) ] );
-				nameContainer.append( globalUnlock );
-			}
+	{
+		const link = document.createElement( 'a' );
+		link.dataset.tooltipText = _t( 'view_on_steam_hunters' );
+		link.href = steamID && isPersonal ?
+			`https://steamhunters.com/${steamID.groups.url}/apps/${appid}/achievements?utm_source=SteamDB` :
+			`https://steamhunters.com/apps/${appid}/achievements?utm_source=SteamDB`;
 
-			const status = document.createElement( 'div' );
-			status.className = 'steamdb_achievement_status';
+		const image = document.createElement( 'img' );
+		image.className = 'steamdb_stats_tab_icon';
+		image.src = GetLocalResource( 'icons/steamhunters.svg' );
+		link.append( image );
+		extraTabs.append( link );
+	}
 
-			if( player.unlock )
-			{
-				const unlockRow = CreateUnlockRow(
-					player.unlock,
-					player.unlockTimestamp,
-					true,
-				);
-				status.append( unlockRow );
-			}
-			else if( player.progressText )
-			{
-				const progressRow = CreateProgressRow( player.progressText, player.progressWidth, true );
-				status.append( progressRow );
-			}
-			else if( isCompareView )
-			{
-				const locked = CreateLockRow( true );
-				status.append( locked );
-			}
+	{
+		const link = document.createElement( 'a' );
+		link.href = `${GetHomepage()}app/${appid}/stats/`;
+		link.dataset.tooltipText = _t( 'view_on_steamdb' );
 
-			if( player.unlockCompare )
-			{
-				const unlockRow = CreateUnlockRow(
-					player.unlockCompare,
-					null,
-					false,
-				);
-				status.append( unlockRow );
-			}
-			else if( player.progressTextCompare )
-			{
-				const progressRow = CreateProgressRow( player.progressTextCompare, null, false );
-				status.append( progressRow );
-			}
-			else if( isCompareView )
-			{
-				const locked = CreateLockRow( false );
-				status.append( locked );
-			}
+		const image = document.createElement( 'img' );
+		image.className = 'steamdb_stats_tab_icon';
+		image.src = GetLocalResource( 'icons/white.svg' );
+		link.append( image );
+		extraTabs.append( link );
+	}
 
-			if( achievement.global_unlock < 0.1 )
-			{
-				image.classList.add( 'steamdb_achievement_image_glow' );
-			}
+	if( !isPersonal )
+	{
+		extraTabs.append( CreateHideEarnedButton() );
+	}
 
-			element.append( status );
+	extraTabs.append( CreateFoldButton( true ) );
 
-			if( isCompareView )
-			{
-				const imageCompare = document.createElement( 'img' );
-				imageCompare.src = `${applicationConfig.MEDIA_CDN_COMMUNITY_URL}images/apps/${appid}/${player.unlockCompare || !achievement.icon_gray ? achievement.icon : achievement.icon_gray}`;
-				imageCompare.className = 'steamdb_achievement_image steamdb_achievement_image_compare';
-				element.append( imageCompare );
-			}
+	// "Show Global Stats" toggle, like Steam's own page
+	const globalStatsKey = 'steamdb_ach_global_stats';
+	const storedGlobalStats = SessionStorageGet( globalStatsKey );
+	const globalStatsOn = storedGlobalStats === null ? ( !isPersonal || showGlobalUnlock ) : storedGlobalStats === '1';
 
-			return element;
-		};
+	newContainer.classList.toggle( 'steamdb_hide_global_stats', !globalStatsOn );
 
-		let counter = 0;
-		const newContainer = document.createElement( 'div' );
-		newContainer.className = 'steamdb_achievements_container';
+	const toggleLabel = document.createElement( 'label' );
+	toggleLabel.className = 'steamdb_toggle';
 
-		const searchField = document.createElement( 'input' );
-		searchField.name = 'achievements-search';
-		searchField.maxLength = 255;
-		searchField.type = 'search';
-		searchField.placeholder = _t( 'search' );
-		searchField.setAttribute( 'accesskey', '/' );
+	const toggleInput = document.createElement( 'input' );
+	toggleInput.type = 'checkbox';
+	toggleInput.checked = globalStatsOn;
+	toggleInput.setAttribute( 'role', 'switch' );
 
-		const searchFieldContainer = document.createElement( 'div' );
-		searchFieldContainer.className = 'steamdb_achievement_search';
-		searchFieldContainer.append( searchField );
-		newContainer.append( searchFieldContainer );
+	const toggleTrack = document.createElement( 'span' );
+	toggleTrack.className = 'steamdb_toggle_track';
 
-		searchField.addEventListener( 'input', function()
-		{
-			const searchVal = this.value.trim().toUpperCase();
+	const toggleText = document.createElement( 'span' );
+	toggleText.textContent = _t( 'achievements_show_global_stats' ) || 'Show Global Stats';
 
-			/** @type {NodeListOf<HTMLElement>} */
-			const achievementGroups = document.querySelectorAll( '.steamdb_achievements_group' );
+	toggleLabel.append( toggleInput, toggleTrack, toggleText );
 
-			StartViewTransition( () =>
-			{
-				if( searchVal.length === 0 )
-				{
-					for( const group of achievementGroups )
-					{
-						/** @type {NodeListOf<HTMLElement>} */
-						const achievementElements = group.querySelectorAll( '.steamdb_achievement' );
+	toggleInput.addEventListener( 'change', () =>
+	{
+		SessionStorageSet( globalStatsKey, toggleInput.checked ? '1' : '0' );
+		newContainer.classList.toggle( 'steamdb_hide_global_stats', !toggleInput.checked );
+	} );
 
-						for( const achievement of achievementElements )
-						{
-							achievement.hidden = false;
-						}
+	// Search
+	const searchField = document.createElement( 'input' );
+	searchField.name = 'achievements-search';
+	searchField.maxLength = 255;
+	searchField.type = 'search';
+	searchField.placeholder = _t( 'search' );
+	searchField.setAttribute( 'accesskey', '/' );
 
-						group.hidden = false;
-					}
+	const searchFieldContainer = document.createElement( 'div' );
+	searchFieldContainer.className = 'steamdb_achievement_search';
+	searchFieldContainer.append( searchField );
 
-					return;
-				}
+	const toolbar = document.createElement( 'div' );
+	toolbar.className = 'steamdb_achievements_toolbar';
+	toolbar.append( toggleLabel, extraTabs, searchFieldContainer );
+	newContainer.append( toolbar );
 
-				for( const group of achievementGroups )
-				{
-					let count = 0;
+	// Filters: achievement state, set (group) and search text
+	/** @type {HTMLSelectElement|null} */
+	let stateSelect = null;
 
-					/** @type {NodeListOf<HTMLElement>} */
-					const achievementElements = group.querySelectorAll( '.steamdb_achievement' );
+	/** @type {HTMLSelectElement|null} */
+	let setSelect = null;
 
-					for( const achievement of achievementElements )
-					{
-						const title = achievement.querySelector( 'h3' ).textContent;
-						const description = achievement.querySelector( 'h5' ).textContent;
-						const found = title.toUpperCase().includes( searchVal ) || description.toUpperCase().includes( searchVal );
-						achievement.hidden = !found;
-
-						if( found )
-						{
-							count++;
-						}
-					}
+	const filterableGroups = groups.map( ( group, index ) => ( { group, index } ) ).filter( ( g ) => g.group.list.length > 0 );
 
-					group.hidden = count === 0;
-				}
-			} );
-		} );
+	const CreateSelect = ( /** @type {string} */ label ) =>
+	{
+		const select = document.createElement( 'select' );
+		select.className = 'steamdb_achievements_select';
+		select.setAttribute( 'aria-label', label );
+
+		return select;
+	};
 
-		document.addEventListener( 'keydown', ( e ) =>
+	if( isPersonal )
+	{
+		stateSelect = CreateSelect( 'Filter' );
+
+		for( const [ value, text ] of [
+			[ 'all', _t( 'achievements_filter_all' ) || 'All Achievements' ],
+			[ 'unlocked', _t( 'achievements_filter_unlocked' ) || 'Unlocked' ],
+			[ 'locked', _t( 'achievements_filter_locked' ) || 'Locked' ],
+		] )
 		{
-			if( e.ctrlKey || e.metaKey )
-			{
-				return;
-			}
+			stateSelect.append( new Option( text, value ) );
+		}
 
-			if( e.target instanceof Element && [ 'INPUT', 'TEXTAREA', 'SELECT', 'BUTTON' ].includes( e.target.tagName ) )
-			{
-				return;
-			}
+		toolbar.insertBefore( stateSelect, searchFieldContainer );
+	}
 
-			if( e.code === 'Slash' || e.code === 'KeyS' || e.key === '/' || e.key === 's' )
-			{
-				e.preventDefault();
-				searchField.focus();
-			}
-		} );
+	if( filterableGroups.length > 1 )
+	{
+		setSelect = CreateSelect( 'Set' );
+		setSelect.append( new Option( _t( 'achievements_sets_all', [ filterableGroups.length.toString() ] ) || `All Sets (${filterableGroups.length})`, 'all' ) );
+
+		for( const { group, index } of filterableGroups )
+		{
+			setSelect.append( new Option( group.dlcAppName || group.name || 'Update', index.toString() ) );
+		}
+
+		toolbar.insertBefore( setSelect, searchFieldContainer );
+	}
+
+	const ApplyFilters = ( animate = true ) =>
+	{
+		const searchVal = searchField.value.trim().toUpperCase();
+		const state = stateSelect ? stateSelect.value : 'all';
+		const set = setSelect ? setSelect.value : 'all';
 
-		/**
-		 * @param {number} earned
-		 * @param {number} total
-		 * @param {boolean} isLeftPlayer
-		 */
-		const CreateProgressSummary = ( earned, total, isLeftPlayer = true ) =>
+		/** @type {NodeListOf<HTMLElement>} */
+		const achievementGroups = newContainer.querySelectorAll( '.steamdb_achievements_group' );
+
+		const apply = () =>
 		{
-			const percentage = earned / total;
-			const progress = document.createElement( 'div' );
-			progress.className = 'steamdb_achievement_progress';
-			if( !isLeftPlayer )
+			for( const group of achievementGroups )
 			{
-				progress.classList.add( 'steamdb_achievement_progress_compare' );
-			}
+				let count = 0;
 
-			const info = document.createElement( 'div' );
-			info.className = 'steamdb_achievement_progress_info';
-			info.textContent = `${earned} / ${total} (${percentFormatter.format( percentage )})`;
+				/** @type {NodeListOf<HTMLElement>} */
+				const achievementElements = group.querySelectorAll( '.steamdb_achievement' );
+				const inSet = set === 'all' || group.dataset.groupIndex === set;
 
-			const progressBar = document.createElement( 'div' );
-			progressBar.className = 'steamdb_achievement_progressbar';
+				for( const achievement of achievementElements )
+				{
+					const ach = achById.get( Number.parseInt( achievement.dataset.achId, 10 ) );
+					const title = achievement.querySelector( 'h3' ).textContent;
+					const description = achievement.querySelector( 'h5' ).textContent;
 
-			const progressBarInner = document.createElement( 'div' );
-			progressBarInner.className = 'steamdb_achievement_progressbar_inner';
-			progressBarInner.style.width = Math.round( percentage * 100 ) + '%';
-			progressBar.append( progressBarInner );
+					const found = inSet &&
+						( state === 'all' || !ach || ( state === 'unlocked' ? ach.unlocked : !ach.unlocked ) ) &&
+						( searchVal.length === 0 ||
+							title.toUpperCase().includes( searchVal ) ||
+							description.toUpperCase().includes( searchVal ) );
 
-			info.append( progressBar );
-			progress.append( info );
+					achievement.hidden = !found;
 
-			if( isCompareView )
-			{
-				const avatar = document.createElement( 'img' );
-				avatar.className = 'steamdb_achievement_progress_avatar';
-				avatar.src = isLeftPlayer ? leftAvatarUrl : rightAvatarUrl;
-				progress.append( avatar );
-			}
+					if( found )
+					{
+						count++;
+					}
+				}
+
+				// Hide the earned/locked sections that have nothing to show with the current filters
+				for( const list of group.querySelectorAll( '.steamdb_achievements_list' ) )
+				{
+					/** @type {HTMLElement} */ ( list ).hidden = !list.querySelector( '.steamdb_achievement:not([hidden])' );
+				}
 
-			return progress;
+				group.hidden = count === 0;
+			}
 		};
 
-		for( let updateId = 0; updateId < achievementUpdates.length; updateId++ )
+		if( animate === false )
+		{
+			apply();
+		}
+		else
 		{
-			const update = achievementUpdates[ updateId ];
+			StartViewTransition( apply );
+		}
+	};
 
-			if( update.achievementData.length === 0 )
-			{
-				continue;
-			}
+	searchField.addEventListener( 'input', () => ApplyFilters() );
+	stateSelect?.addEventListener( 'change', () => ApplyFilters() );
+	setSelect?.addEventListener( 'change', () => ApplyFilters() );
 
-			const gameGroup = document.createElement( 'div' );
-			gameGroup.className = 'steamdb_achievements_group';
-			newContainer.append( gameGroup );
+	document.addEventListener( 'keydown', ( e ) =>
+	{
+		if( e.ctrlKey || e.metaKey )
+		{
+			return;
+		}
 
-			{
-				const summary = document.createElement( 'div' );
-				summary.className = 'steamdb_achievements_title';
-				gameGroup.append( summary );
+		if( e.target instanceof Element && [ 'INPUT', 'TEXTAREA', 'SELECT', 'BUTTON' ].includes( e.target.tagName ) )
+		{
+			return;
+		}
 
-				const dlcAppId = update.dlcAppId || appid;
-				const logoAppId = update.logoAppId || dlcAppId;
+		if( e.code === 'Slash' || e.code === 'KeyS' || e.key === '/' || e.key === 's' )
+		{
+			e.preventDefault();
+			searchField.focus();
+		}
+	} );
 
-				const summaryGameLogo = document.createElement( 'a' );
-				summaryGameLogo.className = 'steamdb_achievements_game_logo_contain';
-				summaryGameLogo.href = `https://store.steampowered.com/app/${dlcAppId}`;
-				summary.append( summaryGameLogo );
+	// One block per game / update
+	for( let groupId = 0; groupId < groups.length; groupId++ )
+	{
+		const group = groups[ groupId ];
 
-				const summaryGameLogoImg = document.createElement( 'img' );
-				summaryGameLogoImg.className = 'steamdb_achievements_game_logo';
-				summaryGameLogoImg.src = gameLogoElement.querySelector( 'img' ).src;
-				summaryGameLogo.append( summaryGameLogoImg );
+		if( group.list.length === 0 )
+		{
+			continue;
+		}
 
-				if( updateId === 0 )
-				{
-					summaryGameLogo.style.viewTransitionName = 'steamdb-gamelogo';
-				}
-				else if( logoAppId !== appid )
-				{
-					summaryGameLogoImg.dataset.appid = logoAppId.toString();
-				}
+		const gameGroup = document.createElement( 'div' );
+		gameGroup.className = 'steamdb_achievements_group';
+		gameGroup.dataset.groupIndex = groupId.toString();
+		newContainer.append( gameGroup );
 
-				const summaryName = document.createElement( 'div' );
-				summaryName.className = 'steamdb_achievements_game_name';
-				summaryName.textContent = update.dlcAppName || update.name || 'Update';
+		{
+			const summary = document.createElement( 'div' );
+			summary.className = 'steamdb_achievements_title';
+			gameGroup.append( summary );
 
-				if( update.dlcAppName && update.name )
-				{
-					const summaryName2 = document.createElement( 'span' );
-					summaryName2.className = 'steamdb_achievements_update_name';
-					summaryName2.textContent = ` — ${update.name}`;
-					summaryName.append( summaryName2 );
-				}
+			const dlcAppId = group.dlcAppId || appid;
+			const logoAppId = group.logoAppId || dlcAppId;
 
-				if( update.earned === update.achievementData.length )
-				{
-					const completedImage = document.createElement( 'img' );
-					completedImage.className = 'steamdb_completed_achievements_icon';
-					completedImage.src = GetLocalResource( 'icons/achievements_completed.svg' );
+			const summaryGameLogo = document.createElement( 'a' );
+			summaryGameLogo.className = 'steamdb_achievements_game_logo_contain';
+			summaryGameLogo.href = `https://store.steampowered.com/app/${dlcAppId}`;
+			summary.append( summaryGameLogo );
 
-					summaryGameLogo.append( completedImage );
-				}
+			const summaryGameLogoImg = document.createElement( 'img' );
+			summaryGameLogoImg.className = 'steamdb_achievements_game_logo';
+			summaryGameLogoImg.src = baseCapsuleUrl;
+			summaryGameLogo.append( summaryGameLogoImg );
 
-				const summaryText = document.createElement( 'div' );
-				summaryText.className = 'steamdb_achievements_name_container';
-				summaryText.append( summaryName );
-				summary.append( summaryText );
+			if( groupId === 0 )
+			{
+				summaryGameLogo.style.viewTransitionName = 'steamdb-gamelogo';
+			}
+			else if( logoAppId !== appid )
+			{
+				summaryGameLogoImg.dataset.appid = logoAppId.toString();
+			}
 
-				{
-					const progress = CreateProgressSummary( update.earned, update.achievementData.length, true );
-					summaryText.append( progress );
-				}
+			const summaryName = document.createElement( 'div' );
+			summaryName.className = 'steamdb_achievements_game_name';
+			summaryName.textContent = group.dlcAppName || group.name || 'Update';
 
-				if( isCompareView )
-				{
-					const progress = CreateProgressSummary( update.earnedCompare, update.achievementData.length, false );
-					summaryText.append( progress );
-				}
+			if( group.dlcAppName && group.name )
+			{
+				const summaryName2 = document.createElement( 'span' );
+				summaryName2.className = 'steamdb_achievements_update_name';
+				summaryName2.textContent = ` — ${group.name}`;
+				summaryName.append( summaryName2 );
+			}
 
-				summary.append( CreateFoldButton() );
+			if( isPersonal && group.earned === group.list.length )
+			{
+				const completedImage = document.createElement( 'img' );
+				completedImage.className = 'steamdb_completed_achievements_icon';
+				completedImage.src = GetLocalResource( 'icons/achievements_completed.svg' );
+				summaryGameLogo.append( completedImage );
 			}
 
+			const summaryText = document.createElement( 'div' );
+			summaryText.className = 'steamdb_achievements_name_container';
+			summaryText.append( summaryName );
+			summary.append( summaryText );
+
 			if( isPersonal )
 			{
-				const lockedAchievementsDetails = document.createElement( 'details' );
-				const unlockedAchievementsDetails = document.createElement( 'details' );
+				summaryText.append( CreateProgressSummary( group.earned, group.list.length ) );
+			}
 
-				unlockedAchievementsDetails.id = `steamdb_ach_details_${appid}_${counter++}`;
-				lockedAchievementsDetails.id = `steamdb_ach_details_${appid}_${counter++}`;
+			summary.append( CreateFoldButton() );
+		}
 
-				lockedAchievementsDetails.addEventListener( 'toggle', OnToggleDetails );
-				unlockedAchievementsDetails.addEventListener( 'toggle', OnToggleDetails );
+		const panel = document.createElement( 'div' );
+		panel.className = 'steamdb_achievements_panel';
+		gameGroup.append( panel );
 
-				update.earnedDetailsElement = unlockedAchievementsDetails;
+		if( isPersonal )
+		{
+			const unlockedEl = document.createElement( 'details' );
+			const lockedEl = document.createElement( 'details' );
 
-				{
-					const unlockedAchievementsSummary = document.createElement( 'summary' );
-					unlockedAchievementsSummary.textContent = _t( 'achievements_unlocked_count', [ update.earned.toString() ] );
-					unlockedAchievementsDetails.className = 'steamdb_achievements_list';
-					unlockedAchievementsDetails.open = !IsSessionStorageSet( unlockedAchievementsDetails.id );
-					unlockedAchievementsDetails.append( unlockedAchievementsSummary );
-
-					const lockedAchievementsSummary = document.createElement( 'summary' );
-					lockedAchievementsSummary.textContent = _t( 'achievements_locked_count', [ ( update.achievementData.length - update.earned ).toString() ] );
-					lockedAchievementsDetails.className = 'steamdb_achievements_list';
-					lockedAchievementsDetails.open = !IsSessionStorageSet( lockedAchievementsDetails.id );
-					lockedAchievementsDetails.append( lockedAchievementsSummary );
-				}
+			unlockedEl.id = `steamdb_ach_details_${appid}_${counter++}`;
+			lockedEl.id = `steamdb_ach_details_${appid}_${counter++}`;
 
-				// Sort by unlock state, global unlock percentage, id
-				update.achievementData.sort( ( a, b ) =>
-				{
-					const aUnlocked = !!a.player.unlock;
-					const bUnlocked = !!b.player.unlock;
+			unlockedEl.addEventListener( 'toggle', OnToggleDetails );
+			lockedEl.addEventListener( 'toggle', OnToggleDetails );
 
-					if( aUnlocked !== bUnlocked )
-					{
-						return bUnlocked ? 1 : -1;
-					}
+			const unlockedSummary = document.createElement( 'summary' );
+			unlockedSummary.textContent = _t( 'achievements_unlocked_count', [ group.earned.toString() ] );
+			unlockedEl.className = 'steamdb_achievements_list';
+			unlockedEl.open = !IsSessionStorageSet( unlockedEl.id );
+			unlockedEl.append( unlockedSummary );
 
-					if( b.achievement.player_percent_unlocked === a.achievement.player_percent_unlocked )
-					{
-						return a.id - b.id;
-					}
+			const lockedSummary = document.createElement( 'summary' );
+			lockedSummary.textContent = _t( 'achievements_locked_count', [ ( group.list.length - group.earned ).toString() ] );
+			lockedEl.className = 'steamdb_achievements_list';
+			lockedEl.open = !IsSessionStorageSet( lockedEl.id );
+			lockedEl.append( lockedSummary );
 
-					return b.achievement.global_unlock > a.achievement.global_unlock ? 1 : -1;
-				} );
+			group.unlockedEl = unlockedEl;
+			group.lockedEl = lockedEl;
 
-				for( const achievement of update.achievementData )
-				{
-					if( achievement.update !== updateId )
-					{
-						continue;
-					}
+			panel.append( unlockedEl, lockedEl );
+		}
+		else
+		{
+			const globalEl = document.createElement( 'details' );
+			globalEl.open = true;
 
-					const element = CreateAchievementRow( achievement );
+			const globalSummary = document.createElement( 'summary' );
+			globalSummary.textContent = _t( 'achievements_count', [ group.list.length.toString() ] ) || `ACHIEVEMENTS: ${group.list.length}`;
+			globalEl.className = 'steamdb_achievements_list';
+			globalEl.append( globalSummary );
 
-					if( achievement.player.unlock )
-					{
-						unlockedAchievementsDetails.append( element );
-					}
-					else
-					{
-						lockedAchievementsDetails.append( element );
-					}
-				}
+			group.globalEl = globalEl;
+			panel.append( globalEl );
+		}
 
-				if( unlockedAchievementsDetails.childElementCount > 1 )
-				{
-					gameGroup.append( unlockedAchievementsDetails );
-				}
+		FillGroup( group );
+	}
 
-				if( lockedAchievementsDetails.childElementCount > 1 )
-				{
-					gameGroup.append( lockedAchievementsDetails );
-				}
-			}
-			else
-			{
-				const globalAchievementsContainer = document.createElement( 'details' );
-				globalAchievementsContainer.open = true;
+	if( groups.filter( ( g ) => g.list.length > 0 ).length > 1 )
+	{
+		const disclaimer = document.createElement( 'div' );
+		disclaimer.className = 'steamdb_achievement_groups_disclaimer';
 
-				const globalAchievementsSummary = document.createElement( 'summary' );
-				globalAchievementsSummary.setAttribute( 'hidden', 'true' );
-				globalAchievementsContainer.append( globalAchievementsSummary );
+		let image = document.createElement( 'img' );
+		image.src = GetLocalResource( 'icons/white.svg' );
+		disclaimer.append( image );
 
-				// Sort by global unlock rate
-				update.achievementData.sort( ( a, b ) =>
-				{
-					if( b.achievement.player_percent_unlocked === a.achievement.player_percent_unlocked )
-					{
-						return a.id - b.id;
-					}
+		disclaimer.append( document.createTextNode( ' × ' ) );
 
-					return b.achievement.global_unlock > a.achievement.global_unlock ? 1 : -1;
-				} );
+		image = document.createElement( 'img' );
+		image.src = GetLocalResource( 'icons/steamhunters.svg' );
+		disclaimer.append( image );
 
-				for( const achievement of update.achievementData )
-				{
-					if( achievement.update !== updateId )
-					{
-						continue;
-					}
+		const text = document.createElement( 'a' );
+		text.href = `https://steamhunters.com/apps/${appid}/achievements?utm_source=SteamDB`;
+		text.textContent = _t( 'achievements_groups_by_steamhunters' );
+		disclaimer.append( text );
 
-					const element = CreateAchievementRow( achievement );
-					globalAchievementsContainer.append( element );
-				}
+		newContainer.append( disclaimer );
+	}
 
-				if( globalAchievementsContainer.childElementCount > 0 )
-				{
-					gameGroup.append( globalAchievementsContainer );
-				}
+	// Steam's own filter bar ("Show Global Stats" switch, "All Achievements" dropdown and search box)
+	// only controls its (now hidden) list, so hide it. Class names are hashed, so find the bar by
+	// its switch role and hide the row that holds both the switch and the dropdown.
+	const HideNativeFilterBar = () =>
+	{
+		for( const toggle of document.querySelectorAll( '[role="switch"]' ) )
+		{
+			if( newContainer.contains( toggle ) )
+			{
+				continue;
 			}
-		}
 
-		if( achievementUpdates.length > 1 )
-		{
-			const disclaimer = document.createElement( 'div' );
-			disclaimer.className = 'steamdb_achievement_groups_disclaimer';
+			/** @type {HTMLElement|null} */
+			let bar = toggle.parentElement;
 
-			let image = document.createElement( 'img' );
-			image.src = GetLocalResource( 'icons/white.svg' );
-			disclaimer.append( image );
+			// Walk up to the first ancestor that also contains the dropdown, but don't go past the bar
+			for( let depth = 0; bar && depth < 4 && !bar.querySelector( '[role="combobox"]' ); depth++ )
+			{
+				bar = bar.parentElement;
+			}
 
-			disclaimer.append( document.createTextNode( ' × ' ) );
+			if( !bar || !bar.querySelector( '[role="combobox"]' ) || bar.querySelector( '[data-tableindex]' ) )
+			{
+				bar = toggle.parentElement;
+			}
 
-			image = document.createElement( 'img' );
-			image.src = GetLocalResource( 'icons/steamhunters.svg' );
-			disclaimer.append( image );
+			if( bar && bar.style.getPropertyValue( 'display' ) !== 'none' )
+			{
+				bar.style.setProperty( 'display', 'none', 'important' );
+			}
+		}
+	};
 
-			const text = document.createElement( 'a' );
-			text.href = `https://steamhunters.com/apps/${appid}/achievements?utm_source=SteamDB`;
-			text.textContent = _t( 'achievements_groups_by_steamhunters' );
-			disclaimer.append( text );
+	// ---- Swap in our container, hide Steam's virtualized list ----
+	StartViewTransition( () =>
+	{
+		nativeList.insertAdjacentElement( 'beforebegin', newContainer );
 
-			newContainer.append( disclaimer );
-		}
+		// Use !important so React re-renders of the list don't bring it back
+		nativeList.style.setProperty( 'display', 'none', 'important' );
 
-		const ReplaceAchievements = () =>
+		if( !isPersonal )
 		{
-			if( isPersonal )
+			const container = document.getElementById( 'mainContents' ) || newContainer;
+			container.classList.add( 'steamdb_global_achievements_page' );
+
+			if( IsSessionStorageSet( 'steamdb_ach_hide_earned' ) )
 			{
-				oldContainer.insertAdjacentElement( 'beforebegin', newContainer );
-				oldContainer.hidden = true;
+				container.classList.add( 'steamdb_hide_earned_achievements' );
 			}
-			else
-			{
-				for( const el of oldAchievementRows )
-				{
-					el.hidden = true;
-				}
-
-				oldAchievementRows[ 0 ].insertAdjacentElement( 'beforebegin', newContainer );
+		}
 
-				const container = document.getElementById( 'mainContents' );
-				container.classList.add( 'steamdb_global_achievements_page' );
+		HideNativeFilterBar();
 
-				if( IsSessionStorageSet( 'steamdb_ach_hide_earned' ) )
-				{
-					container.classList.add( 'steamdb_hide_earned_achievements' );
-				}
-			}
+		// Augmented Steam's sorting can't work on our list
+		document.querySelector( '.es-sortbox' )?.setAttribute( 'hidden', 'true' );
 
-			gameLogoElement.hidden = true;
+		WriteLog( 'Container inserted', newContainer.isConnected );
+	} );
 
-			document.querySelectorAll( '#topSummaryAchievements .achieveBar' ).forEach( ( el, i ) =>
-			{
-				el.classList.add( 'steamdb_achievement_progressbar' );
+	// React may re-render and drop our container (or un-hide the native list), so put it back if so
+	const reattach = () =>
+	{
+		HideNativeFilterBar();
 
-				// Second progress bar at the top belongs to the second player
-				if( i === 1 )
-				{
-					el.classList.add( 'steamdb_achievement_progress_compare' );
-				}
-			} );
+		if( !nativeList.isConnected )
+		{
+			const newNative = document.querySelector( '[data-tableindex]' )?.closest( '.Panel[style*="position: relative"]' );
 
-			if( dlcCapsulesPromise )
+			if( !newNative )
 			{
-				dlcCapsulesPromise.then( ( images ) =>
-				{
-					for( const [ dlcAppId, url ] of images )
-					{
-						/** @type {NodeListOf<HTMLImageElement>} */
-						const imageTags = document.querySelectorAll( `.steamdb_achievements_game_logo[data-appid="${dlcAppId}"]` );
-
-						for( const image of imageTags )
-						{
-							image.src = url;
-						}
-					}
-				} ).catch( ( e ) => console.error( '[SteamDB]', e ) );
+				return;
 			}
 
-			// As we are completely redrawing the achievement list, sorting added by
-			// Augmented Steam won't work it, hide their sorting to prevent user confusion
-			document.querySelector( '.es-sortbox' )?.setAttribute( 'hidden', 'true' );
-		};
+			nativeList = /** @type {HTMLElement} */ ( newNative );
+		}
+
+		if( !newContainer.isConnected )
+		{
+			WriteLog( 'Container was removed, re-inserting' );
+			nativeList.insertAdjacentElement( 'beforebegin', newContainer );
+		}
+
+		if( nativeList.style.getPropertyValue( 'display' ) !== 'none' )
+		{
+			nativeList.style.setProperty( 'display', 'none', 'important' );
+		}
+	};
 
-		StartViewTransition( ReplaceAchievements );
+	new MutationObserver( reattach ).observe( document.body, { childList: true, subtree: true, attributes: true, attributeFilter: [ 'style' ] } );
 
-		if( sortButton )
+	dlcCapsulesPromise.then( ( images ) =>
+	{
+		for( const [ dlcAppId, url ] of images )
 		{
-			HookSortButton( sortButton, achievementUpdates, oldAchievementRows, CreateAchievementRow, isCompareView );
+			/** @type {NodeListOf<HTMLImageElement>} */
+			const imageTags = newContainer.querySelectorAll( `.steamdb_achievements_game_logo[data-appid="${dlcAppId}"]` );
+
+			for( const image of imageTags )
+			{
+				image.src = url;
+			}
 		}
-	}
+	} ).catch( ( e ) => console.error( '[SteamDB]', e ) );
 }
 
+/**
+ * @typedef {{WEBAPI_BASE_URL: string, WEBAPI_ACCESS_TOKEN?: string, MEDIA_CDN_COMMUNITY_URL?: string, STORE_ICON_BASE_URL?: string, LANGUAGE?: string, STORE_ITEM_BASE_URL?: string, COUNTRY?: string, EREALM?: string}} ApplicationConfig
+ */
+
 /**
  * @param {ApplicationConfig} applicationConfig
  * @param {number} appid
- * @param {AchievementGroup[]} achievementUpdates
+ * @param {Group[]} achievementUpdates
+ * @returns {Promise<Map<number, string>>}
  */
 async function FetchDlcCapsules( applicationConfig, appid, achievementUpdates )
 {
@@ -1283,7 +1128,7 @@ async function FetchDlcCapsules( applicationConfig, appid, achievementUpdates )
 
 	if( dlcAppIds.length === 0 )
 	{
-		return Promise.resolve( images );
+		return images;
 	}
 
 	const request = {
@@ -1357,75 +1202,6 @@ async function FetchDlcCapsules( applicationConfig, appid, achievementUpdates )
 	return images;
 }
 
-/**
- * @typedef {{WEBAPI_BASE_URL: string, WEBAPI_ACCESS_TOKEN?: string, MEDIA_CDN_COMMUNITY_URL?: string, STORE_ICON_BASE_URL?: string, LANGUAGE?: string, STORE_ITEM_BASE_URL?: string, COUNTRY?: string, EREALM?: string}} ApplicationConfig
- */
-
-function ParseApplicationConfig()
-{
-	const applicationConfigElement = document.getElementById( 'application_config' );
-
-	if( applicationConfigElement )
-	{
-		/** @type {ApplicationConfig} */
-		const applicationConfig = JSON.parse( applicationConfigElement.dataset.config );
-		const accessToken = JSON.parse( applicationConfigElement.dataset.loyalty_webapi_token );
-
-		if( accessToken )
-		{
-			applicationConfig.WEBAPI_ACCESS_TOKEN = accessToken;
-		}
-
-		return applicationConfig;
-	}
-
-	// Application config does not exist if user is logged out, so we have to reconstruct the data
-	/** @type {ApplicationConfig} */
-	const applicationConfig = {
-		WEBAPI_BASE_URL: window.location.hostname === 'my.steamchina.com' ? 'https://api.steamchina.com/' : 'https://api.steampowered.com/',
-	};
-
-	/** @type {NodeListOf<HTMLScriptElement>} */
-	const scriptTags = document.querySelectorAll( 'script[src]' );
-
-	for( const script of scriptTags )
-	{
-		const scriptLanguage = new URL( script.src ).searchParams.get( 'l' );
-
-		if( scriptLanguage )
-		{
-			applicationConfig.LANGUAGE = scriptLanguage;
-			break;
-		}
-	}
-
-	// Game logo cdn
-	const gameLogoUrl = /** @type {HTMLImageElement} */ ( document.querySelector( '.profile_small_header_additional .gameLogo img' ) ).src;
-	const gameLogoUrlAppsIndex = gameLogoUrl.lastIndexOf( '/apps/' );
-
-	if( gameLogoUrlAppsIndex > 0 )
-	{
-		applicationConfig.STORE_ICON_BASE_URL = gameLogoUrl.substring( 0, gameLogoUrlAppsIndex + '/apps/'.length );
-	}
-
-	// Media cdn
-	/** @type {NodeListOf<HTMLImageElement>} */
-	const imageTags = document.querySelectorAll( '.achieveImgHolder > img' );
-
-	for( const image of imageTags )
-	{
-		const index = image.src.lastIndexOf( '/images/apps/' );
-
-		if( index > 0 )
-		{
-			applicationConfig.MEDIA_CDN_COMMUNITY_URL = image.src.substring( 0, index + 1 );
-			break;
-		}
-	}
-
-	return applicationConfig;
-}
-
 const relativeDateFormatter = new Intl.RelativeTimeFormat( GetLanguage(), { numeric: 'auto' } );
 
 /**
@@ -1460,181 +1236,9 @@ function FormatRelativeTime( ms )
 	return relativeDateFormatter.format( -year, 'year' );
 }
 
-/**
- * @param {HTMLButtonElement} sortButton
- * @param {AchievementGroup[]} achievementUpdates
- * @param {NodeListOf<HTMLElement>} oldAchievementRows
- * @param {(data: AchievementData) => HTMLDivElement} CreateAchievementRow
- * @param {boolean} isCompareView
- */
-function HookSortButton( sortButton, achievementUpdates, oldAchievementRows, CreateAchievementRow, isCompareView )
-{
-	sortButton.addEventListener( 'click', ( /** @type {MouseEvent} */ e ) =>
-	{
-		e.preventDefault();
-
-		sortButton.setAttribute( 'disabled', 'true' );
-
-		// Request the same page in finnish because it has an easier date format to parse
-		const url = new URL( window.location.href );
-		url.searchParams.set( 'l', 'finnish' );
-
-		fetch( url, {
-			headers: {
-				Accept: 'text/html',
-				'X-Requested-With': 'SteamDB',
-			},
-		} )
-			.then( ( response ) => response.text() )
-			.then( ( text ) =>
-			{
-				const parser = new DOMParser();
-				const htmlDocument = parser.parseFromString( text, 'text/html' );
-				const otherAchievementRows = htmlDocument.querySelectorAll( '#personalAchieve .achieveRow' );
-
-				if( otherAchievementRows.length !== oldAchievementRows.length )
-				{
-					throw new Error( 'Mismatching amount of achievements' );
-				}
-
-				const currentYear = new Date().getFullYear();
-
-				/** @type {Record<number, AchievementData>} */
-				const achievementDataMap = [];
-
-				for( const update of achievementUpdates )
-				{
-					for( const achievement of update.achievementData )
-					{
-						if( achievement.domId === null )
-						{
-							continue;
-						}
-
-						achievementDataMap[ achievement.domId ] = achievement;
-					}
-				}
-
-				/** @type {AchievementData[][]} */
-				const unlockedAchievementsPerUpdate = [];
-
-				for( let updateId = 0; updateId < achievementUpdates.length; updateId++ )
-				{
-					unlockedAchievementsPerUpdate[ updateId ] = [];
-				}
-
-				// Assume the achievements are in the same order
-				for( let id = 0; id < otherAchievementRows.length; id++ )
-				{
-					const otherAchievement = otherAchievementRows[ id ];
-					const oldAchievement = oldAchievementRows[ id ];
-
-					/** @type {HTMLImageElement} */
-					const otherImage = otherAchievement.querySelector( '.achieveImgHolder > img' );
-
-					/** @type {HTMLImageElement} */
-					const oldImage = oldAchievement.querySelector( '.achieveImgHolder > img' );
-
-					if( !otherImage || !oldImage )
-					{
-						continue;
-					}
-
-					// Verify that we are seeing the same achievements by their image at least
-					if( otherImage.src !== oldImage.src )
-					{
-						throw new Error( 'Mismatching achievement icon' );
-					}
-
-					const unlock = isCompareView ?
-						otherAchievement.querySelector( '.achieveUnlockTime' )
-							?.childNodes[ 0 ].textContent.trim() :
-						otherAchievement.querySelector( '.achieveUnlockTime' )
-							?.textContent.trim();
-
-					if( !unlock )
-					{
-						continue;
-					}
-
-					const parsedTime = unlock.match( /Avattu (?<day>[0-9]+)\.(?<month>[0-9]+)\.(?<year>[0-9]+)? klo (?<hour>[0-9]+)\.(?<minute>[0-9]+)/ );
-
-					if( !parsedTime )
-					{
-						throw new Error( 'Failed to parse unlock time' );
-					}
-
-					const c = parsedTime.groups;
-					const date = new Date(
-						c.year ? Number.parseInt( c.year, 10 ) : currentYear,
-						Number.parseInt( c.month, 10 ) - 1,
-						Number.parseInt( c.day, 10 ),
-						Number.parseInt( c.hour, 10 ),
-						Number.parseInt( c.minute, 10 ),
-						0,
-						0
-					);
-
-					const achievement = achievementDataMap[ id ];
-					achievement.player.unlockTimestamp = date.getTime();
-					unlockedAchievementsPerUpdate[ achievement.update ].push( achievement );
-				}
-
-				// Redraw earned achievements block with new sorting
-				const RedrawSortedAchievements = () =>
-				{
-					sortButton.remove();
-
-					for( let updateId = 0; updateId < achievementUpdates.length; updateId++ )
-					{
-						const update = achievementUpdates[ updateId ];
-						const unlockedAchievements = unlockedAchievementsPerUpdate[ updateId ];
-
-						if( !update.earnedDetailsElement )
-						{
-							continue;
-						}
-
-						while( update.earnedDetailsElement.lastElementChild.tagName !== 'SUMMARY' )
-						{
-							update.earnedDetailsElement.lastElementChild.remove();
-						}
-
-						unlockedAchievements.sort( ( a, b ) =>
-						{
-							const aTime = a.player.unlockTimestamp;
-							const bTime = b.player.unlockTimestamp;
-
-							if( aTime === bTime )
-							{
-								return a.id - b.id;
-							}
-
-							return bTime > aTime ? 1 : -1;
-						} );
-
-						for( const achievement of unlockedAchievements )
-						{
-							const element = CreateAchievementRow( achievement );
-							update.earnedDetailsElement.append( element );
-						}
-					}
-				};
-
-				StartViewTransition( RedrawSortedAchievements );
-			} )
-			.catch( ( ex ) =>
-			{
-				WriteLog( ex );
-				alert( `Failed to sort achievements: ${ex.message}` );
-				sortButton.removeAttribute( 'disabled' );
-			} );
-	}, { once: true } );
-}
-
 /**
  * @param {MouseEvent} e
- * @param {HTMLElement|undefined} parent
+ * @param {HTMLElement|null|undefined} parent
  */
 function ToggleDetailsElements( e, parent )
 {
@@ -1648,7 +1252,6 @@ function ToggleDetailsElements( e, parent )
 	const elements = parent.querySelectorAll( 'details' );
 	let state = true;
 
-	// Figure out if any of the elements are currently open
 	// If at least one is open, we will close all of them
 	for( const el of elements )
 	{
@@ -1719,15 +1322,19 @@ function OnToggleEarnedClick( e )
 {
 	e.preventDefault();
 
-	const container = document.getElementById( 'mainContents' );
+	const container = document.getElementById( 'mainContents' ) || document.querySelector( '.steamdb_global_achievements_page' );
+
+	if( !container )
+	{
+		return;
+	}
+
 	const state = container.classList.contains( 'steamdb_hide_earned_achievements' );
 
-	const ToggleEarned = () =>
+	StartViewTransition( () =>
 	{
 		container.classList.toggle( 'steamdb_hide_earned_achievements', !state );
-	};
-
-	StartViewTransition( ToggleEarned );
+	} );
 
 	SessionStorageToggle( 'steamdb_ach_hide_earned', state );
 }
@@ -1843,4 +1450,4 @@ function StartViewTransition( callback )
 	{
 		callback();
 	}
-}
+}
\ No newline at end of file
diff --git a/styles/achievements.css b/styles/achievements.css
index 6fd9d4f28..b95c5a5fd 100644
--- a/styles/achievements.css
+++ b/styles/achievements.css
@@ -5,63 +5,84 @@ html {
 	scrollbar-gutter: stable;
 }
 
-.achieveRow .compareImg {
-	position: relative;
-	font-size: 0; /* fix incorrect extra padding */
+.steamdb_achievements_container {
+	--steamdb-panel: #171d25;
+	--steamdb-divider: #262d38;
+	--steamdb-muted: #8b929a;
+
+	margin: 24px 0 40px;
+	font-size: 14px;
 }
 
-.achieveRow:not(.unlocked) .compareImg::before {
-	content: "";
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill='%2366C0F4' fill-rule='evenodd' d='M27 26v-2h-1.75l-1.5 2H27zm0 1a3.002 3.002 0 0 1-3.009 3H9.01A3.008 3.008 0 0 1 6 27h21zM6 26v-2h3.25l-1.5 2H6zm2.75 0l1.5-2h2l-1.5 2h-2zm3 0l1.5-2h2l-1.5 2h-2zm3 0l1.5-2h2l-1.5 2h-2zm3 0l1.5-2h2l-1.5 2h-2zm3 0l1.5-2h2l-1.5 2h-2zM27 23v-5.99c0-1.66-1.34-3.005-3-3.01v-3.5a7.5 7.5 0 1 0-15 0V14c-1.658.005-3 1.34-3 3.01V23h21zm-15-9v-3.5C12 8.01 14.015 6 16.5 6c2.48 0 4.5 2.015 4.5 4.5V14h-9z'/%3E%3C/svg%3E%0A");
-	background-size: 24px 24px;
-	width: 24px;
-	height: 24px;
-	display: block;
-	position: absolute;
-	left: 5px;
-	top: 22px;
+/* Toolbar: toggle on the left, tools + search on the right */
+.steamdb_achievements_toolbar {
+	display: flex;
+	align-items: center;
+	gap: 16px;
+	margin-bottom: 16px;
+	flex-wrap: wrap;
 }
 
-#topSummaryAchievements .compareVal {
-	margin-top: 10px;
+.steamdb_achievements_toolbar .steamdb_toggle {
+	margin-right: auto;
 }
 
-.steamdb_global_achievements_page {
-	padding: 0 !important;
+.steamdb_toggle {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	color: #fff;
+	cursor: pointer;
+	user-select: none;
 }
 
-.steamdb_global_achievements_page #compareAvatar {
-	display: none;
+.steamdb_toggle > input {
+	position: absolute;
+	opacity: 0;
+	pointer-events: none;
 }
 
-.steamdb_global_achievements_page #headerContent {
-	margin-left: 0;
+.steamdb_toggle_track {
+	position: relative;
+	width: 38px;
+	height: 24px;
+	border-radius: 12px;
+	background: #3d4450;
+	flex-shrink: 0;
+	transition: background-color 0.15s;
 }
 
-.steamdb_achievement_spoiler {
-	filter: brightness(3) blur(6px);
+.steamdb_toggle_track::after {
+	content: "";
+	position: absolute;
+	top: 2px;
+	left: 2px;
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	background: #fff;
+	transition: transform 0.15s;
 }
 
-.steamdb_achievement_image.steamdb_achievement_spoiler {
-	filter: grayscale(1) blur(6px);
+.steamdb_toggle > input:checked + .steamdb_toggle_track {
+	background: #1a9fff;
 }
 
-.steamdb_achievement:hover .steamdb_achievement_spoiler {
-	filter: unset;
+.steamdb_toggle > input:checked + .steamdb_toggle_track::after {
+	transform: translateX(14px);
+}
+
+.steamdb_toggle > input:focus-visible + .steamdb_toggle_track {
+	outline: 2px solid #9ba3ad;
+	outline-offset: 2px;
 }
 
 .steamdb_stats_extra_tabs {
-	float: right;
 	display: flex;
 	align-items: center;
 	gap: 12px;
 }
 
-.steamdb_stats_extra_tabs_mobile {
-	float: unset;
-	margin-bottom: 20px;
-}
-
 .steamdb_stats_extra_tabs > a {
 	display: flex;
 }
@@ -71,12 +92,59 @@ html {
 	height: 22px;
 }
 
-.steamdb_achievements_group {
-	margin-bottom: 40px;
+.steamdb_achievements_select {
+	background: #101419;
+	color: #fff;
+	border: 1px solid transparent;
+	border-radius: 3px;
+	font: inherit;
+	padding: 8px 10px;
+	cursor: pointer;
+	max-width: 220px;
 }
 
-.steamdb_achievements_group > summary {
-	display: flex;
+.steamdb_achievements_select:focus {
+	border-color: #417b9c;
+	outline: none;
+}
+
+.steamdb_achievement_search {
+	width: 230px;
+	max-width: 100%;
+}
+
+.steamdb_achievement_search > input {
+	background: #101419;
+	color: #fff;
+	border: 1px solid transparent;
+	border-radius: 3px;
+	width: 100%;
+	font: inherit;
+	box-sizing: border-box;
+	padding: 9px 36px 9px 10px;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23dcdedf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
+	background-size: 14px;
+	background-position: right 12px center;
+	background-repeat: no-repeat;
+}
+
+.steamdb_achievement_search > input::placeholder {
+	font-style: italic;
+	color: #8b929a;
+}
+
+.steamdb_achievement_search > input:focus {
+	border-color: #417b9c;
+	outline: none;
+}
+
+.steamdb_achievement_search > input::-webkit-search-cancel-button {
+	display: none;
+}
+
+/* Per-game block */
+.steamdb_achievements_group {
+	margin-bottom: 32px;
 }
 
 .steamdb_achievements_title {
@@ -84,7 +152,7 @@ html {
 	align-items: center;
 	gap: 15px;
 	color: #fff;
-	margin-bottom: 15px;
+	margin-bottom: 12px;
 	overflow-wrap: anywhere;
 }
 
@@ -141,69 +209,59 @@ html {
 
 .steamdb_stats_extra_tabs .steamdb_fold_button,
 .steamdb_stats_extra_tabs .steamdb_done_button {
-	margin-left: 30px;
-}
-
-.steamdb_stats_extra_tabs_mobile .steamdb_fold_button,
-.steamdb_stats_extra_tabs_mobile .steamdb_done_button {
-	margin-left: auto;
+	margin-left: 0;
 }
 
-.steamdb_stats_extra_tabs .steamdb_done_button + .steamdb_fold_button {
-	margin-left: 0;
+/* Dark panel holding the lists, like Steam's own page */
+.steamdb_achievements_panel {
+	background: var(--steamdb-panel);
+	padding: 16px;
+	border-radius: 2px;
 }
 
 .steamdb_achievements_list {
 	font-weight: 700;
-	color: #83868a;
+	color: var(--steamdb-muted);
 }
 
-.steamdb_achievements_list + .steamdb_achievements_list {
-	margin-top: 10px;
+/* Only add the gap when the section before it is actually visible */
+.steamdb_achievements_list:not([hidden]) ~ .steamdb_achievements_list:not([hidden]) {
+	margin-top: 16px;
 }
 
 .steamdb_achievements_list > summary {
 	cursor: pointer;
-	margin-bottom: 4px;
+	margin-bottom: 8px;
+	font-size: 13px;
+	letter-spacing: 0.03em;
+	text-transform: uppercase;
 }
 
 .steamdb_achievements_list > summary:hover {
 	color: #fff;
 }
 
-.steamdb_achievements_sort_button {
-	float: right;
-}
-
 .steamdb_achievement {
 	display: flex;
 	align-items: center;
-	gap: 8px;
-	padding: 4px;
-	padding-right: 8px;
-	margin-bottom: 8px;
-	background-color: #23262e;
+	gap: 12px;
+	padding: 10px 4px;
+	border-bottom: 1px solid var(--steamdb-divider);
 	position: relative;
 }
 
-.steamdb_achievement[hidden] {
-	display: none;
+.steamdb_achievement:last-child {
+	border-bottom: 0;
 }
 
-.steamdb_achievement_global_progress_overlay {
-	background: linear-gradient(
-		to right,
-		#23262e 40px,
-		#31343e 40px,
-		#31343e var(--steamdb-progress),
-		#23262e var(--steamdb-progress)
-	);
+.steamdb_achievement[hidden] {
+	display: none;
 }
 
 .steamdb_achievement_image {
 	width: 58px;
 	height: 58px;
-	z-index: 1;
+	flex-shrink: 0;
 }
 
 .steamdb_achievement_image_glow {
@@ -213,82 +271,79 @@ html {
 }
 
 .steamdb_achievement h3 {
-	font-size: 16px;
-	font-weight: 500;
-	color: #dcdedf;
+	font-size: 15px;
+	font-weight: 700;
+	color: #fff;
 	overflow-wrap: anywhere;
-	z-index: 1;
 }
 
 .steamdb_achievement h5 {
-	font-size: 12px;
+	font-size: 13px;
 	font-weight: 400;
-	color: #b8bcbf;
+	color: #dcdedf;
 	overflow-wrap: anywhere;
-	z-index: 1;
-}
-
-.steamdb_achievement h6 {
-	font-size: 12px;
-	font-weight: 400;
-	color: #8b929a;
+	margin-top: 4px;
 }
 
-.steamdb_hide_earned_achievements .steamdb_earned_achievement {
-	display: none;
+.steamdb_achievement_spoiler {
+	filter: brightness(3) blur(6px);
 }
 
-.steamdb_achievement_checkmark {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 20px;
-	padding: 6px;
-	flex-shrink: 0;
+.steamdb_achievement_image.steamdb_achievement_spoiler {
+	filter: grayscale(1) blur(6px);
 }
 
-.steamdb_achievement_checkmark > svg {
-	width: 20px;
-	fill: #fff;
+.steamdb_achievement:hover .steamdb_achievement_spoiler {
+	filter: unset;
 }
 
+/* Right-hand side: unlock date (personal page) and global percentage */
 .steamdb_achievement_status {
-	display: flex;
-	flex-direction: column;
-	gap: 5px;
 	margin-left: auto;
 	text-align: right;
-	font-size: 12px;
+	font-size: 13px;
 	font-weight: 400;
-	color: #8b929a;
+	color: var(--steamdb-muted);
 }
 
 .steamdb_achievement_status_row {
 	display: flex;
 	align-items: center;
 	justify-content: end;
+}
+
+.steamdb_achievement_unlock_global {
+	display: flex;
+	align-items: center;
 	gap: 8px;
+	margin-left: auto;
+	padding: 0 12px 0 16px;
+	min-width: 90px;
+	justify-content: flex-end;
+	font-size: 24px;
+	font-weight: 700;
+	color: #9ba3ad;
+	white-space: nowrap;
 }
 
-.steamdb_achievement_status_avatar {
-	height: 24px;
+.steamdb_achievement_status ~ .steamdb_achievement_unlock_global {
+	margin-left: 0;
 }
 
-.steamdb_achievement_status_locked .steamdb_achievement_status_avatar {
-	opacity: 0.2;
+.steamdb_achievement_unlock_global::before {
+	content: "";
+	width: 22px;
+	height: 22px;
+	background: currentcolor;
+	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E") center / contain no-repeat;
 }
 
-.steamdb_achievement_status_row_compare {
-	color: #ffcc6a;
+.steamdb_hide_global_stats .steamdb_achievement_unlock_global {
+	display: none;
 }
 
-.steamdb_achievement_unlock_global {
-	margin-left: auto;
-	text-align: right;
-	font-size: 14px;
-	font-weight: 700;
-	color: #fff;
-	z-index: 1;
+.steamdb_hide_earned_achievements .steamdb_earned_achievement {
+	display: none;
 }
 
 .steamdb_achievement_progress {
@@ -298,7 +353,7 @@ html {
 	font-size: 12px;
 	font-weight: 400;
 	color: #b8bcbf;
-	text-align: right;
+	text-align: left;
 	white-space: nowrap;
 }
 
@@ -306,23 +361,6 @@ html {
 	width: 100%;
 }
 
-.steamdb_achievement_progress_compare {
-	color: #ffcc6a;
-}
-
-.steamdb_achievements_name_container .steamdb_achievement_progress_compare {
-	margin-top: 10px;
-}
-
-.steamdb_achievements_title .steamdb_achievement_progress {
-	text-align: left;
-}
-
-.steamdb_achievement_progress_avatar {
-	height: 26px;
-	align-self: center;
-}
-
 .steamdb_achievement_progressbar {
 	border-radius: 10px;
 	height: 8px;
@@ -332,13 +370,6 @@ html {
 	overflow: hidden;
 }
 
-.achieveBar.steamdb_achievement_progressbar {
-	width: 100%;
-	padding: 0;
-	border: 0;
-}
-
-.achieveBar.steamdb_achievement_progressbar .achieveBarProgress,
 .steamdb_achievement_progressbar_inner {
 	height: 100%;
 	border-top-right-radius: 10px;
@@ -347,19 +378,12 @@ html {
 	width: 0%;
 }
 
-.steamdb_achievement_progressbar.steamdb_achievement_progress_compare
-	.achieveBarProgress,
-.steamdb_achievement_progress_compare .steamdb_achievement_progressbar_inner {
-	background: #ffcc6a;
-}
-
 .steamdb_achievement_groups_disclaimer {
 	display: flex;
 	gap: 8px;
 	align-items: center;
 	justify-content: center;
-	margin-left: 16px;
-	margin-top: 100px;
+	margin-top: 40px;
 }
 
 .steamdb_achievement_groups_disclaimer > img {
@@ -380,35 +404,16 @@ html {
 	text-decoration: underline;
 }
 
-.steamdb_achievement_search {
-	margin-bottom: 16px;
-}
-
-.steamdb_achievement_search > input {
-	background: #1b2838;
-	color: #fff;
-	border: 1px solid #000;
-	border-radius: 6px;
-	width: 100%;
-	font: inherit;
-	box-sizing: border-box;
-	padding: 7px 10px 7px 36px;
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
-	background-size: 16px;
-	background-position: 10px center;
-	background-repeat: no-repeat;
-}
-
-.steamdb_achievement_search > input:focus {
-	border-color: #417b9c;
-	outline: none;
-}
+@media (max-width: 600px) {
+	.steamdb_achievements_toolbar .steamdb_toggle {
+		flex-basis: 100%;
+	}
 
-.steamdb_achievement_search > input::-webkit-search-cancel-button {
-	opacity: 1;
-}
+	.steamdb_achievement_search {
+		width: 100%;
+		flex-basis: 100%;
+	}
 
-@media (max-width: 600px) {
 	.steamdb_achievements_title {
 		flex-flow: row wrap;
 	}
@@ -423,7 +428,8 @@ html {
 		width: 100%;
 	}
 
-	.steamdb_achievement_image_compare {
-		display: none;
+	.steamdb_achievement_unlock_global {
+		font-size: 18px;
+		min-width: 0;
 	}
-}
+}
\ No newline at end of file

From 7c7ddb7847b4757c93b97ed91c8575c44e13db23 Mon Sep 17 00:00:00 2001
From: V1perW0lf <11570429+V1perW0lf@users.noreply.github.com>
Date: Wed, 28 Oct 2026 18:28:16 -0500
Subject: [PATCH 2/2] fix: add gold color for achievements earned less than ten
 percent globally

---
 scripts/community/achievements.js | 7 +++++++
 styles/achievements.css           | 4 ++++
 2 files changed, 11 insertions(+)

diff --git a/scripts/community/achievements.js b/scripts/community/achievements.js
index a30a1902e..de703bd06 100644
--- a/scripts/community/achievements.js
+++ b/scripts/community/achievements.js
@@ -424,6 +424,13 @@ async function InitAchievements( items, isPersonalHint )
 
 			const unlock = document.createElement( 'div' );
 			unlock.className = 'steamdb_achievement_unlock_global';
+
+			// Rare achievements (under 10% of players) get a gold percentage
+			if( ach.globalUnlock < 0.1 )
+			{
+				unlock.classList.add( 'steamdb_achievement_unlock_global_rare' );
+			}
+
 			unlock.title = _t( 'achievement_global_unlock', [ percent ] );
 			unlock.textContent = percent;
 			element.append( unlock );
diff --git a/styles/achievements.css b/styles/achievements.css
index b95c5a5fd..c63d87b37 100644
--- a/styles/achievements.css
+++ b/styles/achievements.css
@@ -326,6 +326,10 @@ html {
 	white-space: nowrap;
 }
 
+.steamdb_achievement_unlock_global.steamdb_achievement_unlock_global_rare {
+	color: #ffd539;
+}
+
 .steamdb_achievement_status ~ .steamdb_achievement_unlock_global {
 	margin-left: 0;
 }