feat(arcade): add native abacus numbers support to pressure gauge

- Use native abacus numbers setting from user preferences
- Conditionally render abacus based on nativeAbacusNumbers setting
- Apply setting to PressureGauge in Complement Race game

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/app/arcade/complement-race/components/PressureGauge.tsx

@@ -2,12 +2,16 @@
 
 import { animated, useSpring } from '@react-spring/web'
 import { AbacusReact } from '@soroban/abacus-react'
+import { useAbacusSettings } from '@/hooks/useAbacusSettings'
 
 interface PressureGaugeProps {
   pressure: number // 0-150 PSI
 }
 
 export function PressureGauge({ pressure }: PressureGaugeProps) {
+  // Get native abacus numbers setting
+  const { data: abacusSettings } = useAbacusSettings()
+  const useNativeAbacusNumbers = abacusSettings?.nativeAbacusNumbers ?? false
   const maxPressure = 150
 
   // Animate pressure value smoothly with spring physics
@@ -107,6 +111,7 @@ export function PressureGauge({ pressure }: PressureGaugeProps) {
                     lineHeight: 0,
                   }}
                 >
+                  {useNativeAbacusNumbers ? (
                     <AbacusReact
                       value={psi}
                       columns={3}
@@ -118,6 +123,17 @@ export function PressureGauge({ pressure }: PressureGaugeProps) {
                         columnPosts: { opacity: 0 },
                       }}
                     />
+                  ) : (
+                    <div
+                      style={{
+                        fontSize: '14px',
+                        fontWeight: 'bold',
+                        color: '#1f2937',
+                      }}
+                    >
+                      {psi}
+                    </div>
+                  )}
                 </div>
               </foreignObject>
             </g>
@@ -142,7 +158,7 @@ export function PressureGauge({ pressure }: PressureGaugeProps) {
         />
       </svg>
 
-      {/* Abacus readout */}
+      {/* Pressure readout */}
       <div
         style={{
           textAlign: 'center',
@@ -153,6 +169,8 @@ export function PressureGauge({ pressure }: PressureGaugeProps) {
           minHeight: '32px',
         }}
       >
+        {useNativeAbacusNumbers ? (
+          <>
             <div
               style={{
                 display: 'inline-flex',
@@ -174,6 +192,12 @@ export function PressureGauge({ pressure }: PressureGaugeProps) {
               />
             </div>
             <span style={{ fontSize: '12px', color: '#6b7280', fontWeight: 'bold' }}>PSI</span>
+          </>
+        ) : (
+          <div style={{ fontSize: '20px', fontWeight: 'bold', color: '#1f2937' }}>
+            {Math.round(pressure)} <span style={{ fontSize: '12px', color: '#6b7280' }}>PSI</span>
+          </div>
+        )}
       </div>
     </div>
   )