Implement RefreshGuard system to prevent accidental page navigation

- Add useRefreshGuard hook with proper beforeunload/unload event handling
- Add useNavigationGuard for React Router SPA navigation blocking
- Add useGameGuard combining both guards with game state detection
- Add RefreshGuardModal component for user warnings
- Add RefreshGuardProvider to wrap application
- Fix Room component crash with defensive null checks
- Add Local Server to default hosts for localhost development

webclient/src/components/RefreshGuardModal/RefreshGuardModal.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Typography,
+  Box,
+  Alert
+} from '@mui/material';
+import { Warning as WarningIcon } from '@mui/icons-material';
+
+interface RefreshGuardModalProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  message: string;
+  title?: string;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+}
+
+/**
+ * Modal dialog that warns users about navigating away or refreshing the page.
+ * Synchronized with browser's native beforeunload dialog.
+ */
+export const RefreshGuardModal: React.FC<RefreshGuardModalProps> = ({
+  open,
+  onClose,
+  onConfirm,
+  message,
+  title = 'Warning',
+  confirmButtonText = 'Leave Anyway',
+  cancelButtonText = 'Stay'
+}) => {
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      aria-labelledby="refresh-guard-title"
+      aria-describedby="refresh-guard-description"
+      maxWidth="sm"
+      fullWidth
+      disableEscapeKeyDown // Prevent closing with Escape key
+    >
+      <DialogTitle id="refresh-guard-title">
+        <Box display="flex" alignItems="center" gap={1}>
+          <WarningIcon color="warning" />
+          {title}
+        </Box>
+      </DialogTitle>
+      
+      <DialogContent>
+        <Alert severity="warning" sx={{ mb: 2 }}>
+          <Typography variant="body1" id="refresh-guard-description">
+            {message}
+          </Typography>
+        </Alert>
+        
+        <Typography variant="body2" color="textSecondary">
+          Your browser may also show a confirmation dialog. Both dialogs are asking the same thing - 
+          whether you want to leave the page and lose your current progress.
+        </Typography>
+      </DialogContent>
+      
+      <DialogActions>
+        <Button 
+          onClick={onClose}
+          variant="contained"
+          color="primary"
+          autoFocus // Focus the safe option by default
+        >
+          {cancelButtonText}
+        </Button>
+        <Button 
+          onClick={onConfirm}
+          variant="outlined"
+          color="error"
+        >
+          {confirmButtonText}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};