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>