feat: enhance CasinoButton, Chip, and TableBackground components; add size prop for responsive styling and update TableScreen controls visibility logic

src/components/CasinoButton.js

@@ -8,18 +8,19 @@ const gradients = {
   green: ['#39c377', '#1f7a44']
 };
 
-export default function CasinoButton({ label, onPress, variant = 'gold', disabled }) {
+export default function CasinoButton({ label, onPress, variant = 'gold', disabled, size = 'default' }) {
   const textColor = variant === 'gold' ? '#2b1d0b' : '#f7f2e6';
+  const isSmall = size === 'small';
   return (
     <Pressable onPress={onPress} disabled={disabled} style={styles.wrapper}>
       <LinearGradient
         colors={gradients[variant] || gradients.gold}
         start={{ x: 0, y: 0 }}
         end={{ x: 1, y: 1 }}
-        style={[styles.button, disabled && styles.disabled]}
+        style={[styles.button, isSmall && styles.buttonSmall, disabled && styles.disabled]}
       >
         <View style={styles.inner}>
-          <Text style={[styles.text, { color: textColor }]}>{label}</Text>
+          <Text style={[styles.text, isSmall && styles.textSmall, { color: textColor }]}>{label}</Text>
         </View>
       </LinearGradient>
     </Pressable>
@@ -40,6 +41,10 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: 'rgba(255,255,255,0.2)'
   },
+  buttonSmall: {
+    paddingVertical: 8,
+    paddingHorizontal: 16
+  },
   inner: {
     alignItems: 'center'
   },
@@ -49,6 +54,10 @@ const styles = StyleSheet.create({
     letterSpacing: 1,
     textTransform: 'uppercase'
   },
+  textSmall: {
+    fontSize: 13,
+    letterSpacing: 0.8
+  },
   disabled: {
     opacity: 0.5
   }