Loading screen

client/src/index.css

@@ -200,3 +200,7 @@ button, input {
     filter: drop-shadow(0 0 16px rgba(var(--bot-glow-color, 88, 166, 255), 0.75));
   }
 }
+
+@keyframes caro5-spin {
+  to { transform: rotate(360deg); }
+}

client/src/pages/Game.tsx

@@ -576,6 +576,7 @@ export default function Game() {
   const location = useLocation()
   const navigate = useNavigate()
   const [engine, setEngine] = useState<GameEngine | null>(null)
+  const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [tick, setTick] = useState(0)
   const [connectionStatus] = useState<'connecting' | 'connected' | 'disconnected'>('connected')
@@ -943,6 +944,7 @@ export default function Game() {
       e.onStateChanged?.()
     }
     setEngine(e)
+    setLoading(false)
   }, [rerender, scheduleLocalBotTurn, isLocal, p1Name, p2Name, p1Symbol, p2Symbol, p1ColorState, p2ColorState, gameRules, p1DrawTower, p2DrawTower, localPlayerTypes])
 
   const status = engine?.status ?? 'waiting'
@@ -1007,6 +1009,26 @@ export default function Game() {
 
   return (
     <div style={{ width: '100vw', height: '100dvh', overflow: 'hidden', position: 'relative' }}>
+      {loading && (
+        <div style={{
+          position: 'absolute', inset: 0, zIndex: 1000,
+          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+          gap: '1.5rem',
+          background: `linear-gradient(rgba(13, 17, 23, 0.68), rgba(13, 17, 23, 0.78)), url('${binAssetUrl('bg/start-menu-bg.jpg')}') center / cover no-repeat fixed, ${theme.bgStr}`,
+          color: theme.text,
+        }}>
+          <h1 style={{ fontSize: 'clamp(1.8rem, 5vw, 2.5rem)', fontWeight: 800, letterSpacing: '-0.03em' }}>
+            CARO 5
+          </h1>
+          <div style={{
+            width: 32, height: 32, borderRadius: '50%',
+            border: `3px solid ${theme.border}`,
+            borderTopColor: theme.player1Str,
+            animation: 'caro5-spin 0.8s linear infinite',
+          }} />
+          <p style={{ color: theme.textMuted, fontSize: '0.95rem' }}>Setting up the board…</p>
+        </div>
+      )}
       <GameCanvas onEngineReady={handleEngineReady} />
       {isLocal && engine && (
         <>