fix(ui): fix Glass theme hover effects and backdrop click behavior

- Add hover:glass-tint-green CSS rule for dropdown item hover effects
- Add data-[highlighted]:glass-tint-green CSS rule for keyboard navigation
- Fix Settings modal backdrop click not closing in Glass themes
  - Add onClick={onClose} to content wrapper div
  - Add stopPropagation to modal panel to prevent bubbling
- Update ThemeSelector and SoundSelector dropdown items with new hover classes

Fixes #14

Author: ryota-murakami

app/globals.css

@@ -493,11 +493,20 @@
   background: var(--glass-tint-amber);
 }
 
+/* Hover Tint Variants (for dropdown items) */
+.hover\:glass-tint-green:hover {
+  background: var(--glass-tint-green);
+}
+
 /* Data State Tint Variants (for Radix UI Select) */
 .data-\[state\=checked\]\:glass-tint-green[data-state='checked'] {
   background: var(--glass-tint-green);
 }
 
+.data-\[highlighted\]\:glass-tint-green[data-highlighted] {
+  background: var(--glass-tint-green);
+}
+
 .data-\[highlighted\]\:glass-tint-green\/50[data-highlighted] {
   background: rgba(16, 185, 129, 0.075);
 }

components/settings/SettingsPanel.tsx

@@ -119,8 +119,12 @@ export const SettingsPanel = memo(function SettingsPanel({
 
             {/* Glass Dialog Content - Flexbox centering wrapper */}
             <Dialog.Content asChild>
-              <div className="fixed inset-0 flex items-center justify-center p-4">
+              <div
+                className="fixed inset-0 flex items-center justify-center p-4"
+                onClick={onClose}
+              >
                 <motion.div
+                  onClick={(e) => e.stopPropagation()}
                   data-testid="settings-panel"
                   className="flex max-h-[85vh] w-[90vw] max-w-md flex-col overflow-hidden rounded-3xl glass glass-elevated glass-highlight focus:outline-none"
                   initial={{ opacity: 0, scale: 0.95 }}

components/settings/SoundSelector.tsx

@@ -204,7 +204,7 @@ export const SoundSelector = React.memo(function SoundSelector({
                   <div className="flex items-center justify-between rounded-xl px-2 py-1">
                     <Select.Item
                       value={preset}
-                      className="relative flex-1 cursor-pointer rounded-xl pl-8 pr-4 py-2 text-sm text-text-primary outline-none transition-colors data-[state=checked]:glass-tint-green data-[state=checked]:text-primary-green data-[highlighted]:glass-tint-green/50"
+                      className="relative flex-1 cursor-pointer rounded-xl pl-8 pr-4 py-2 text-sm text-text-primary outline-none transition-colors hover:glass-tint-green data-[state=checked]:glass-tint-green data-[state=checked]:text-primary-green data-[highlighted]:glass-tint-green"
                     >
                       <Select.ItemText>{tPresets(preset)}</Select.ItemText>
                       <Select.ItemIndicator className="absolute left-2 inline-flex items-center">

components/settings/ThemeSelector.tsx

@@ -176,7 +176,7 @@ export const ThemeSelector = React.memo(function ThemeSelector() {
                 <Select.Item
                   key={item}
                   value={item}
-                  className="relative flex cursor-pointer items-center rounded-xl py-2 pl-8 pr-4 text-sm text-text-primary outline-none transition-colors data-[state=checked]:glass-tint-green data-[state=checked]:text-primary-green data-[highlighted]:glass-tint-green/50"
+                  className="relative flex cursor-pointer items-center rounded-xl py-2 pl-8 pr-4 text-sm text-text-primary outline-none transition-colors hover:glass-tint-green data-[state=checked]:glass-tint-green data-[state=checked]:text-primary-green data-[highlighted]:glass-tint-green"
                 >
                   <Select.ItemText>
                     <div className="flex items-center gap-2">

package.json

@@ -31,7 +31,7 @@
     "framer-motion": "^12.23.24",
     "lucide-react": "^0.555.0",
     "next": "^16.0.5",
-    "next-intl": "^4.5.5",
+    "next-intl": "^4.5.6",
     "next-themes": "^0.4.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
@@ -52,7 +52,7 @@
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",
     "postcss": "^8.5.6",
-    "prettier": "^3.6.2",
+    "prettier": "^3.7.1",
     "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3"
   }