diff --git a/src/games/sync/ui/OnlinePeers.tsx b/src/games/sync/ui/OnlinePeers.tsx
deleted file mode 100644
index 269a5ac4..00000000
--- a/src/games/sync/ui/OnlinePeers.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import {
-  Avatar,
-  Box,
-  Divider,
-  Group,
-  Popover,
-  Stack,
-  Text,
-} from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
-import { IconCircleFilled } from '@tabler/icons-react';
-import { useMemo } from 'react';
-import { useAllPeers } from '../peersSlice';
-import { SENDER_ID } from '../realtimeSyncTypes';
-import { DeviceIdenticon } from './DeviceIdenticon';
-import { PeerAvatar } from './PeerAvatar';
-
-export function OnlinePeers() {
-  const peers = useAllPeers();
-  const [opened, { toggle, close }] = useDisclosure(false);
-
-  const deviceCountByUser = useMemo(() => {
-    const map = new Map<string, number>();
-    for (const p of peers) {
-      map.set(p.userId, (map.get(p.userId) ?? 0) + 1);
-    }
-    return map;
-  }, [peers]);
-
-  const leaderSenderId = useMemo(() => {
-    if (peers.length === 0) return null;
-    return [...peers.map(p => p.senderId)].sort()[0];
-  }, [peers]);
-
-  const groupedByUser = useMemo(() => {
-    const groups = new Map<
-      string,
-      {
-        userId: string;
-        displayName: string;
-        avatarUrl: string | null;
-        devices: typeof peers;
-      }
-    >();
-    for (const p of peers) {
-      const existing = groups.get(p.userId);
-      if (existing) {
-        existing.devices.push(p);
-      } else {
-        groups.set(p.userId, {
-          userId: p.userId,
-          displayName: p.displayName,
-          avatarUrl: p.avatarUrl,
-          devices: [p],
-        });
-      }
-    }
-    return Array.from(groups.values());
-  }, [peers]);
-
-  if (peers.length === 0) return null;
-
-  return (
-    <Popover
-      opened={opened}
-      onClose={close}
-      position="bottom-end"
-      withArrow
-      shadow="md"
-    >
-      <Popover.Target>
-        <Box
-          onClick={toggle}
-          style={{
-            cursor: 'pointer',
-            display: 'inline-flex',
-            alignItems: 'center',
-          }}
-        >
-          {peers.map((peer, idx) => (
-            <Box
-              key={peer.senderId}
-              style={{
-                marginLeft: idx === 0 ? 0 : -10,
-                zIndex: peers.length - idx,
-              }}
-            >
-              <PeerAvatar
-                peer={peer}
-                size={26}
-                showDeviceBadge={(deviceCountByUser.get(peer.userId) ?? 0) > 1}
-              />
-            </Box>
-          ))}
-        </Box>
-      </Popover.Target>
-      <Popover.Dropdown p="sm">
-        <Stack gap="xs" miw={220}>
-          <Text size="xs" c="dimmed" fw={600} tt="uppercase">
-            Connected ({peers.length})
-          </Text>
-          {groupedByUser.map((group, idx) => (
-            <Box key={group.userId || group.displayName}>
-              {idx > 0 && <Divider mb="xs" />}
-              <Group gap="xs" wrap="nowrap" mb={4}>
-                <Avatar src={group.avatarUrl} size={22} radius="xl">
-                  {group.displayName.charAt(0).toUpperCase()}
-                </Avatar>
-                <Text size="sm" fw={500}>
-                  {group.displayName}
-                  {group.devices.some(d => d.senderId === SENDER_ID) && (
-                    <Text span size="xs" c="dimmed">
-                      {' '}
-                      (you)
-                    </Text>
-                  )}
-                </Text>
-              </Group>
-              <Stack gap={4} pl={30}>
-                {group.devices.map(device => (
-                  <Group key={device.senderId} gap={6} wrap="nowrap">
-                    <DeviceIdenticon seed={device.deviceName} size={12} />
-                    <Text size="xs" c="dimmed">
-                      {device.deviceName || 'Unknown device'}
-                    </Text>
-                    {device.senderId === leaderSenderId && (
-                      <IconCircleFilled
-                        size={8}
-                        color="var(--mantine-color-green-5)"
-                        title="Leader"
-                      />
-                    )}
-                  </Group>
-                ))}
-              </Stack>
-            </Box>
-          ))}
-        </Stack>
-      </Popover.Dropdown>
-    </Popover>
-  );
-}
diff --git a/src/games/sync/ui/OnlinePeersList.module.css b/src/games/sync/ui/OnlinePeersList.module.css
new file mode 100644
index 00000000..894d527c
--- /dev/null
+++ b/src/games/sync/ui/OnlinePeersList.module.css
@@ -0,0 +1,12 @@
+.identiconBadge {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--mantine-color-dark-5);
+  border: 2px solid var(--mantine-color-dark-7);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  flex-shrink: 0;
+}
diff --git a/src/games/sync/ui/OnlinePeersList.tsx b/src/games/sync/ui/OnlinePeersList.tsx
new file mode 100644
index 00000000..701e38df
--- /dev/null
+++ b/src/games/sync/ui/OnlinePeersList.tsx
@@ -0,0 +1,90 @@
+import { Avatar, Box, Divider, Group, Stack, Text } from '@mantine/core';
+import { IconCircleFilled } from '@tabler/icons-react';
+import { useMemo } from 'react';
+import { useAllPeers } from '../peersSlice';
+import { SENDER_ID } from '../realtimeSyncTypes';
+import { DeviceIdenticon } from './DeviceIdenticon';
+import classes from './OnlinePeersList.module.css';
+
+const IDENTICON_SIZE = 14;
+
+export function OnlinePeersList() {
+  const peers = useAllPeers();
+
+  const leaderSenderId = useMemo(() => {
+    if (peers.length === 0) return null;
+    return [...peers.map(p => p.senderId)].sort()[0];
+  }, [peers]);
+
+  const groupedByUser = useMemo(() => {
+    const groups = new Map<
+      string,
+      {
+        userId: string;
+        displayName: string;
+        avatarUrl: string | null;
+        devices: typeof peers;
+      }
+    >();
+    for (const p of peers) {
+      const existing = groups.get(p.userId);
+      if (existing) {
+        existing.devices.push(p);
+      } else {
+        groups.set(p.userId, {
+          userId: p.userId,
+          displayName: p.displayName,
+          avatarUrl: p.avatarUrl,
+          devices: [p],
+        });
+      }
+    }
+    return Array.from(groups.values());
+  }, [peers]);
+
+  return (
+    <Stack gap="xs" miw={220}>
+      {groupedByUser.map((group, idx) => (
+        <Box key={group.userId || group.displayName}>
+          {idx > 0 && <Divider mb="xs" />}
+          <Group gap="xs" wrap="nowrap" mb={4}>
+            <Avatar src={group.avatarUrl} size={22} radius="xl">
+              {group.displayName.charAt(0).toUpperCase()}
+            </Avatar>
+            <Text size="sm" fw={500}>
+              {group.displayName}
+              {group.devices.some(d => d.senderId === SENDER_ID) && (
+                <Text span size="xs" c="dimmed">
+                  {' '}
+                  (you)
+                </Text>
+              )}
+            </Text>
+          </Group>
+          <Stack gap={4} pl={30}>
+            {group.devices.map(device => (
+              <Group key={device.senderId} gap={6} wrap="nowrap">
+                <Box className={classes.identiconBadge}>
+                  <DeviceIdenticon
+                    seed={device.deviceName}
+                    size={IDENTICON_SIZE}
+                  />
+                </Box>
+                <Text size="xs" c="dimmed">
+                  {device.deviceName || 'Unknown device'}
+                </Text>
+                {device.senderId === leaderSenderId && (
+                  <IconCircleFilled
+                    size={8}
+                    color="var(--mantine-color-green-5)"
+                    title="Leader"
+                  />
+                )}
+              </Group>
+            ))}
+          </Stack>
+        </Box>
+      ))}
+    </Stack>
+  );
+}
diff --git a/src/games/sync/ui/PeerAvatar.module.css b/src/games/sync/ui/PeerAvatar.module.css
new file mode 100644
index 00000000..bdb8c647
--- /dev/null
+++ b/src/games/sync/ui/PeerAvatar.module.css
@@ -0,0 +1,22 @@
+.wrap {
+  position: relative;
+  display: inline-flex;
+  width: var(--peer-avatar-size);
+  height: var(--peer-avatar-size);
+  vertical-align: middle;
+}
+
+.badge {
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  width: var(--peer-avatar-badge-size);
+  height: var(--peer-avatar-badge-size);
+  border-radius: 50%;
+  border: 2px solid var(--mantine-color-dark-7);
+  background: var(--mantine-color-dark-5);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/games/sync/ui/PeerAvatar.tsx b/src/games/sync/ui/PeerAvatar.tsx
index 47584643..dbc4c2ff 100644
--- a/src/games/sync/ui/PeerAvatar.tsx
+++ b/src/games/sync/ui/PeerAvatar.tsx
@@ -1,7 +1,9 @@
 import { Avatar, Box, Tooltip } from '@mantine/core';
+import type { CSSProperties } from 'react';
 import type { PeerInfo } from '../peersSlice';
 import { SENDER_ID } from '../realtimeSyncTypes';
 import { DeviceIdenticon } from './DeviceIdenticon';
+import classes from './PeerAvatar.module.css';
 
 export interface PeerAvatarProps {
   peer: PeerInfo;
@@ -35,31 +37,16 @@ export function PeerAvatar({
   const content =
     showDeviceBadge && peer.deviceName ? (
       <Box
-        pos="relative"
-        style={{
-          display: 'inline-flex',
-          width: size,
-          height: size,
-          verticalAlign: 'middle',
-        }}
+        className={classes.wrap}
+        style={
+          {
+            '--peer-avatar-size': `${size}px`,
+            '--peer-avatar-badge-size': `${badgeSize}px`,
+          } as CSSProperties
+        }
       >
         {avatar}
-        <Box
-          pos="absolute"
-          style={{
-            bottom: -2,
-            right: -2,
-            width: badgeSize,
-            height: badgeSize,
-            borderRadius: '50%',
-            border: '2px solid var(--mantine-color-dark-7)',
-            background: 'var(--mantine-color-dark-5)',
-            overflow: 'hidden',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
+        <Box className={classes.badge}>
           <DeviceIdenticon
             seed={peer.deviceName}
             size={badgeSize - 4}
diff --git a/src/games/sync/ui/RealtimeSyncIndicator.module.css b/src/games/sync/ui/RealtimeSyncIndicator.module.css
new file mode 100644
index 00000000..a7612180
--- /dev/null
+++ b/src/games/sync/ui/RealtimeSyncIndicator.module.css
@@ -0,0 +1,52 @@
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 6px 4px 10px;
+  border-radius: 999px;
+  background: var(--mantine-color-dark-6);
+  border: 1px solid var(--mantine-color-dark-4);
+  transition:
+    background 120ms ease,
+    border-color 120ms ease;
+}
+
+.pill:not(:disabled):hover {
+  background: var(--mantine-color-dark-5);
+  border-color: var(--mantine-color-dark-3);
+}
+
+.pill:disabled {
+  cursor: default;
+}
+
+.statusIconWrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.statusDot {
+  position: absolute;
+  bottom: -1px;
+  right: -1px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--mantine-color-green-5);
+  border: 1.5px solid var(--mantine-color-dark-6);
+  box-shadow: 0 0 6px var(--mantine-color-green-5);
+}
+
+.avatarStack {
+  display: inline-flex;
+  align-items: center;
+}
+
+.avatarStackItem {
+  position: relative;
+  z-index: var(--peer-z, 0);
+}
+
+.avatarStackItem:not(:first-child) {
+  margin-left: -10px;
+}
diff --git a/src/games/sync/ui/RealtimeSyncIndicator.tsx b/src/games/sync/ui/RealtimeSyncIndicator.tsx
index 8804c2d2..76f7ccba 100644
--- a/src/games/sync/ui/RealtimeSyncIndicator.tsx
+++ b/src/games/sync/ui/RealtimeSyncIndicator.tsx
@@ -1,65 +1,126 @@
-import { Box, Group, Tooltip } from '@mantine/core';
+import {
+  Box,
+  Divider,
+  Group,
+  HoverCard,
+  Stack,
+  Text,
+  UnstyledButton,
+} from '@mantine/core';
 import { IconBroadcast, IconBroadcastOff } from '@tabler/icons-react';
+import { type CSSProperties, useMemo } from 'react';
 import { useStore } from '@/core/zustand';
 import { useAllPeers } from '../peersSlice';
-import { OnlinePeers } from './OnlinePeers';
+import { OnlinePeersList } from './OnlinePeersList';
+import { PeerAvatar } from './PeerAvatar';
+import classes from './RealtimeSyncIndicator.module.css';
 
 export function RealtimeSyncIndicator() {
   const isConnected = useStore(s => s.gameSave.isRealtimeSyncConnected);
   const peers = useAllPeers();
 
+  const deviceCountByUser = useMemo(() => {
+    const map = new Map<string, number>();
+    for (const p of peers) {
+      map.set(p.userId, (map.get(p.userId) ?? 0) + 1);
+    }
+    return map;
+  }, [peers]);
+
   if (!isConnected && peers.length === 0) return null;
 
+  const hasPeers = peers.length > 0;
+
   return (
-    <Group
-      gap={10}
-      wrap="nowrap"
-      align="center"
-      pl={10}
-      pr={6}
-      py={4}
-      style={{
-        borderRadius: 999,
-        background: 'var(--mantine-color-dark-6)',
-        border: '1px solid var(--mantine-color-dark-4)',
-      }}
+    <HoverCard
+      position="bottom-end"
+      withArrow
+      shadow="md"
+      openDelay={100}
+      closeDelay={150}
+      withinPortal
     >
-      <Tooltip
-        label={isConnected ? 'Realtime sync active' : 'Realtime sync offline'}
-        withArrow
-      >
-        <Box pos="relative" style={{ display: 'inline-flex' }}>
-          {isConnected ? (
-            <>
-              <IconBroadcast
+      <HoverCard.Target>
+        <UnstyledButton
+          className={classes.pill}
+          aria-label={
+            isConnected ? 'Realtime sync active' : 'Realtime sync offline'
+          }
+        >
+          <Box className={classes.statusIconWrap}>
+            {isConnected ? (
+              <>
+                <IconBroadcast
+                  size={18}
+                  color="var(--mantine-color-green-4)"
+                  stroke={1.8}
+                />
+                <Box className={classes.statusDot} />
+              </>
+            ) : (
+              <IconBroadcastOff
                 size={18}
+                color="var(--mantine-color-gray-6)"
+                stroke={1.8}
+              />
+            )}
+          </Box>
+          {hasPeers && (
+            <Box className={classes.avatarStack}>
+              {peers.map((peer, idx) => (
+                <Box
+                  key={peer.senderId}
+                  className={classes.avatarStackItem}
+                  style={{ '--peer-z': peers.length - idx } as CSSProperties}
+                >
+                  <PeerAvatar
+                    peer={peer}
+                    size={26}
+                    withTooltip={false}
+                    showDeviceBadge={
+                      (deviceCountByUser.get(peer.userId) ?? 0) > 1
+                    }
+                  />
+                </Box>
+              ))}
+            </Box>
+          )}
+        </UnstyledButton>
+      </HoverCard.Target>
+      <HoverCard.Dropdown p="sm">
+        <Stack gap="xs">
+          <Group gap={6} align="center" wrap="nowrap">
+            {isConnected ? (
+              <IconBroadcast
+                size={14}
                 color="var(--mantine-color-green-4)"
                 stroke={1.8}
               />
-              <Box
-                pos="absolute"
-                style={{
-                  bottom: -1,
-                  right: -1,
-                  width: 7,
-                  height: 7,
-                  borderRadius: '50%',
-                  background: 'var(--mantine-color-green-5)',
-                  border: '1.5px solid var(--mantine-color-dark-6)',
-                  boxShadow: '0 0 6px var(--mantine-color-green-5)',
-                }}
+            ) : (
+              <IconBroadcastOff
+                size={14}
+                color="var(--mantine-color-gray-6)"
+                stroke={1.8}
               />
+            )}
+            <Text size="sm" fw={500}>
+              {isConnected ? 'Realtime sync active' : 'Realtime sync offline'}
+              {hasPeers && (
+                <Text span size="sm" c="dimmed" fw={400}>
+                  {' · '}
+                  {peers.length} connected
+                </Text>
+              )}
+            </Text>
+          </Group>
+          {hasPeers && (
+            <>
+              <Divider />
+              <OnlinePeersList />
             </>
-          ) : (
-            <IconBroadcastOff
-              size={18}
-              color="var(--mantine-color-gray-6)"
-              stroke={1.8}
-            />
           )}
-        </Box>
-      </Tooltip>
-      {peers.length > 0 && <OnlinePeers />}
-    </Group>
+        </Stack>
+      </HoverCard.Dropdown>
+    </HoverCard>
   );
 }
diff --git a/src/games/sync/useRealtimeGameSync.ts b/src/games/sync/useRealtimeGameSync.ts
index fed8b020..d47c44ed 100644
--- a/src/games/sync/useRealtimeGameSync.ts
+++ b/src/games/sync/useRealtimeGameSync.ts
@@ -245,6 +245,26 @@ export function useRealtimeGameSync() {
     };
     window.addEventListener('beforeunload', onBeforeUnload);
 
+    // Supabase's channel heartbeat can take 30s+ to detect a dead WebSocket,
+    // so we flip the sync-connected flag off immediately when the browser
+    // reports offline, and force an early reconnect attempt when it comes back.
+    const onOffline = () => {
+      logger.warn('Browser went offline: marking sync disconnected');
+      useStore.getState().setRealtimeSyncConnected(false);
+    };
+
+    const onOnline = () => {
+      logger.info('Browser back online: forcing reconnect');
+      reconnectAttemptsRef.current = 0;
+      if (reconnectTimer !== null) {
+        clearTimeout(reconnectTimer);
+        reconnectTimer = null;
+      }
+      setReconnectEpoch(e => e + 1);
+    };
+    window.addEventListener('offline', onOffline);
+    window.addEventListener('online', onOnline);
+
     const unsubscribePatches = onStorePatches(patches => {
       if (isApplyingRemoteRef.current || isBroadcastSuppressed()) return;
       if (!channelRef.current) return;
@@ -262,6 +282,8 @@ export function useRealtimeGameSync() {
     return () => {
       isCleaningUp = true;
       window.removeEventListener('beforeunload', onBeforeUnload);
+      window.removeEventListener('offline', onOffline);
+      window.removeEventListener('online', onOnline);
       unsubscribePatches();
       if (flushTimer !== null) {
         clearTimeout(flushTimer);