Use NudeUI <meter-discrete> for rating

We get the same UX in all browsers

css/style.css

@@ -135,31 +135,6 @@ header {
 	padding: 0 1.3em;
 }
 
-/* Credit to Lea Verou: https://twitter.com/LeaVerou/status/1449514764221272064 and https://codepen.io/leaverou/pen/abydReB */
-[mv-app="gameState"] meter {
-	display: inline-block;
-	inline-size: 3em;
-	font-size: 130%;
-	background: var(--icon-faded) 0 / auto 100%;
-}
-
-[mv-app="gameState"] meter::-webkit-meter-inner-element {
-	display: block;
-}
-
-[mv-app="gameState"] meter::-webkit-meter-bar {
-	border: none;
-	background: transparent;
-}
-
-[mv-app="gameState"] meter::-webkit-meter-optimum-value {
-	background: var(--icon) 0 / auto 100%;
-}
-
-[mv-app="gameState"] meter::-moz-meter-bar {
-	background: var(--icon) 0 / auto 100%;
-}
-
 #game-board {
 	--theme-color: #ee7622;
 	--matched-card: #eee;

index.html

@@ -15,6 +15,9 @@
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css" />
 	<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/shoelace-autoloader.js"></script>
 
+	<!-- NudeUI -->
+	<script src="https://nudeui.com/elements/meter-discrete/meter-discrete.js" type="module"></script>
+
 	<link rel="stylesheet prefetch" href="css/style.css" />
 	<link rel="icon" href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">🧠</text></svg>' />
 	<title>Memory Game</title>
@@ -58,7 +61,7 @@ <h2>
 
 	<main>
 		<section mv-app="gameState">
-			<meter value="[game.rating]" max="3"></meter>
+			<meter-discrete value="[game.rating]" max="3"></meter-discrete>
 
 			<div id="moves-counter" mv-value="[pluralize(game.move, 'move', 'moves')]">0 moves</div>