ui changes and cs prices

src/lib/world-opinions/CultureMap.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { countries, regions, type RegionId } from './data';
+	import { Button } from '$lib/components/ui/button/index.js';
 
 	const culturalMap = countries.flatMap((country) =>
 		country.values ? [{ ...country, x: country.values.x, y: country.values.y }] : []
@@ -96,13 +97,23 @@
 
 <div class="wo-chart">
 	<div class="mb-4 flex flex-wrap gap-2" role="group" aria-label="Highlight a region">
-		<button class="wo-chip" aria-pressed={region === 'all'} onclick={() => (region = 'all')}>
+		<Button
+			variant={region === 'all' ? 'secondary' : 'outline'}
+			size="sm"
+			aria-pressed={region === 'all'}
+			onclick={() => (region = 'all')}
+		>
 			all
-		</button>
+		</Button>
 		{#each usedRegions as id (id)}
-			<button class="wo-chip" aria-pressed={region === id} onclick={() => (region = id)}>
+			<Button
+				variant={region === id ? 'secondary' : 'outline'}
+				size="sm"
+				aria-pressed={region === id}
+				onclick={() => (region = id)}
+			>
 				{regions[id].toLowerCase()}
-			</button>
+			</Button>
 		{/each}
 	</div>
 

src/lib/world-opinions/PartyCompass.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { countryById, parties, partyCountries } from './data';
+	import { Button } from '$lib/components/ui/button/index.js';
 
 	let { focus = null }: { focus?: string | null } = $props();
 
@@ -64,8 +65,9 @@
 	<div class="mb-2 flex flex-wrap gap-2" role="group" aria-label={`Compare up to ${MAX} countries`}>
 		{#each partyCountries as id (id)}
 			{@const slot = slotOf(id)}
-			<button
-				class="wo-chip"
+			<Button
+				variant={slot >= 0 ? 'secondary' : 'outline'}
+				size="sm"
 				aria-pressed={slot >= 0}
 				disabled={slot < 0 && full}
 				onclick={() => toggle(id)}
@@ -73,7 +75,7 @@
 				{#if slot >= 0}<span class="wo-swatch" style:background={`var(--wo-s${slot + 1})`}
 					></span>{/if}
 				{countryName(id).toLowerCase()}
-			</button>
+			</Button>
 		{/each}
 	</div>