Add TURNS (secure) endpoints for upgraded TURN server

Updated ICE configuration to use TURNS (TLS/DTLS) on port 5349
as the preferred relay method, with plain TURN on port 3478 as
fallback. WebRTC will try secure endpoints first for better
security and reliability.

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

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

CLAUDE.md

@@ -0,0 +1,91 @@
+# Rondevu Demo Development Guidelines
+
+## WebRTC Configuration
+
+### TURN Server Setup
+
+When configuring TURN servers:
+
+- ✅ **DO** use TURNS (secure) on port 5349 when available: `turns:server.com:5349`
+- ✅ **DO** include TURN fallback on port 3478: `turn:server.com:3478`
+- ✅ **DO** include the port number in TURN URLs (even if default)
+- ✅ **DO** test TURN connectivity before deploying: `turnutils_uclient -u user -w pass server.com 3478 -y`
+- ✅ **DO** provide both TCP and UDP transports for maximum compatibility
+- ❌ **DON'T** omit the port number
+- ❌ **DON'T** assume TURN works without testing
+
+**Current Configuration:**
+```javascript
+const RTC_CONFIG = {
+  iceServers: [
+    { urls: ["stun:stun.share.fish:3478"] },
+    {
+      urls: [
+        // TURNS (secure) - TLS/DTLS on port 5349 (preferred)
+        "turns:turn.share.fish:5349?transport=tcp",
+        "turns:turn.share.fish:5349?transport=udp",
+        // TURN (fallback) - plain on port 3478
+        "turn:turn.share.fish:3478?transport=tcp",
+        "turn:turn.share.fish:3478?transport=udp",
+      ],
+      username: "webrtcuser",
+      credential: "supersecretpassword"
+    }
+  ]
+};
+```
+
+WebRTC will try TURNS (secure) endpoints first, falling back to plain TURN if needed.
+
+### ICE Configuration
+
+**Force Relay Mode for Testing:**
+```javascript
+const RTC_CONFIG = {
+  iceServers: [...],
+  iceTransportPolicy: 'relay' // Forces TURN relay, bypasses NAT issues
+};
+```
+
+Use `iceTransportPolicy: 'relay'` to:
+- Test if TURN server is working correctly
+- Bypass NAT hairpinning issues (when both peers are on same network)
+- Ensure maximum compatibility
+
+**Remove or comment out** `iceTransportPolicy: 'relay'` for production to allow direct connections when possible.
+
+## Debugging
+
+### Enable Detailed ICE Logging
+
+The demo includes detailed ICE candidate logging. Check browser console for:
+- 🧊 ICE candidate gathering
+- 🧊 ICE connection state changes
+- 📤 Candidates sent to server
+- 📥 Candidates received from server
+- ✅ Successful candidate pairs
+- ❌ Failed candidate pairs
+
+### Common Issues
+
+1. **Connection stuck in "connecting":**
+   - Enable relay-only mode to test TURN
+   - Check if both peers are behind same NAT (hairpinning issue)
+   - Verify TURN credentials are correct
+
+2. **No candidates gathered:**
+   - Check STUN/TURN server URLs
+   - Verify firewall isn't blocking UDP ports
+   - Check TURN server is running
+
+3. **Candidates gathered but connection fails:**
+   - Check if TURN relay is actually working (use `turnutils_uclient`)
+   - Verify server is filtering candidates by role correctly
+   - Enable detailed logging to see which candidate pairs are failing
+
+## UI Guidelines
+
+- Show clear connection status (waiting, connecting, connected, failed)
+- Display peer role (offerer vs answerer) for debugging
+- Provide visual feedback for all user actions
+- Use toast notifications for errors and success messages

README.md

@@ -5,8 +5,9 @@
 Experience topic-based peer discovery and WebRTC connections using the Rondevu signaling platform.
 
 **Related repositories:**
-- [rondevu-server](https://github.com/xtr-dev/rondevu) - HTTP signaling server
+- [@xtr-dev/rondevu-client](https://github.com/xtr-dev/rondevu-client) - TypeScript client library ([npm](https://www.npmjs.com/package/@xtr-dev/rondevu-client))
-- [rondevu-client](https://github.com/xtr-dev/rondevu-client) - TypeScript client library
+- [@xtr-dev/rondevu-server](https://github.com/xtr-dev/rondevu-server) - HTTP signaling server ([npm](https://www.npmjs.com/package/@xtr-dev/rondevu-server), [live](https://api.ronde.vu))
+- [@xtr-dev/rondevu-demo](https://github.com/xtr-dev/rondevu-demo) - Interactive demo ([live](https://ronde.vu))
 
 ---
 
@@ -17,14 +18,15 @@ This demo showcases the complete Rondevu workflow:
 1. **Register** - Get peer credentials (automatically saved)
 2. **Create Offers** - Advertise your WebRTC connection on topics
 3. **Discover Peers** - Find other peers by topic
-4. **Connect** - Establish direct P2P WebRTC connections
+4. **Connect** - Establish direct P2P WebRTC connections via `RondevuPeer`
 5. **Chat** - Send messages over WebRTC data channels
 
 ### Key Features
 
 - **Topic-Based Discovery** - Find peers by shared topics (like torrent infohashes)
 - **Real P2P Connections** - Actual WebRTC data channels (not simulated)
-- **Connection Manager** - Uses high-level `RondevuConnection` API (no manual WebRTC plumbing)
+- **State-Based Peer Management** - Uses `RondevuPeer` with clean state machine (idle → creating-offer → waiting-for-answer → exchanging-ice → connected)
+- **Trickle ICE** - Fast connection establishment by sending ICE candidates as they're discovered
 - **Persistent Credentials** - Saves authentication to localStorage
 - **Topics Browser** - Browse all active topics and peer counts
 - **Multiple Connections** - Support multiple simultaneous peer connections
@@ -109,76 +111,121 @@ The easiest way to test:
 
 ## Technical Implementation
 
-### Connection Manager
+### RondevuPeer State Machine
 
-This demo uses the high-level `RondevuConnection` class which abstracts all WebRTC complexity:
+This demo uses the `RondevuPeer` class which implements a clean state-based connection lifecycle:
 
 ```javascript
-// Create connection
+import { Rondevu } from '@xtr-dev/rondevu-client';
-const conn = client.createConnection();
+
+// Create peer
+const peer = client.createPeer();
 
 // Set up event listeners
-conn.on('connected', () => {
+peer.on('state', (state) => {
-  console.log('P2P connection established!');
+  console.log('Peer state:', state);
+  // Offerer: idle → creating-offer → waiting-for-answer → exchanging-ice → connected
+  // Answerer: idle → answering → exchanging-ice → connected
 });
 
-conn.on('datachannel', (channel) => {
+peer.on('connected', () => {
-  channel.onmessage = (event) => {
+  console.log('✅ P2P connection established!');
-    console.log('Message:', event.data);
-  };
 });
 
-// Create offer
+peer.on('datachannel', (channel) => {
-await conn.createOffer({
+  channel.addEventListener('message', (event) => {
+    console.log('📥 Message:', event.data);
+  });
+
+  channel.addEventListener('open', () => {
+    // Channel is ready, can send messages
+    channel.send('Hello!');
+  });
+});
+
+peer.on('failed', (error) => {
+  console.error('❌ Connection failed:', error);
+});
+
+// Create offer (offerer)
+await peer.createOffer({
   topics: ['demo-room'],
   ttl: 300000
 });
 
-// Or answer an offer
+// Or answer an offer (answerer)
-await conn.answer(offerId, offerSdp);
+await peer.answer(offerId, offerSdp, {
+  topics: ['demo-room']
+});
 ```
 
-The connection manager handles:
+### Connection States
-- Offer/answer SDP generation
+
-- ICE candidate gathering and exchange
+**Offerer Flow:**
-- Automatic polling for answers and candidates
+1. **idle** - Initial state
-- Data channel lifecycle
+2. **creating-offer** - Creating WebRTC offer and sending to server
-- Connection state management
+3. **waiting-for-answer** - Polling for answer from peer (every 2 seconds)
-- Event-driven API
+4. **exchanging-ice** - Exchanging ICE candidates (polling every 1 second)
+5. **connected** - Successfully connected!
+6. **failed/closed** - Connection failed or was closed
+
+**Answerer Flow:**
+1. **idle** - Initial state
+2. **answering** - Creating WebRTC answer and sending to server
+3. **exchanging-ice** - Exchanging ICE candidates (polling every 1 second)
+4. **connected** - Successfully connected!
+5. **failed/closed** - Connection failed or was closed
 
 ### What Happens Under the Hood
 
-1. **Offerer** calls `conn.createOffer()`:
+1. **Offerer** calls `peer.createOffer()`:
-   - Creates RTCPeerConnection
+   - State → `creating-offer`
+   - Creates RTCPeerConnection and data channel
    - Generates SDP offer
-   - Creates data channel
+   - Sets up ICE candidate handler (before gathering starts)
+   - Sets local description → ICE gathering begins
    - Posts offer to Rondevu server
+   - State → `waiting-for-answer`
    - Polls for answers every 2 seconds
+   - When answer received → State → `exchanging-ice`
 
-2. **Answerer** calls `conn.answer()`:
+2. **Answerer** calls `peer.answer()`:
+   - State → `answering`
    - Creates RTCPeerConnection
    - Sets remote description (offer SDP)
    - Generates SDP answer
-   - Posts answer to server
+   - Sends answer to server (registers as answerer)
-   - Polls for ICE candidates every 1 second
+   - Sets up ICE candidate handler (before gathering starts)
+   - Sets local description → ICE gathering begins
+   - State → `exchanging-ice`
 
-3. **ICE Exchange**:
+3. **ICE Exchange** (Trickle ICE):
-   - Both peers generate ICE candidates
+   - Both peers generate ICE candidates as they're discovered
-   - Candidates are automatically sent to server
+   - Candidates are automatically sent to server immediately
-   - Peers poll and receive remote candidates
+   - Peers poll and receive remote candidates (every 1 second)
    - ICE establishes the direct P2P path
+   - State → `connected`
 
 4. **Connection Established**:
    - Data channel opens
    - Chat messages flow directly between peers
    - No server relay (true P2P!)
 
+### Key Features of Implementation
+
+- **Trickle ICE**: Candidates sent immediately as discovered (no waiting)
+- **Proper Authorization**: Answer sent to server before ICE gathering to authorize candidate posting
+- **Event Cleanup**: All event listeners properly removed with `removeEventListener`
+- **State Management**: Clean state machine with well-defined transitions
+- **Error Handling**: Graceful failure states with error events
+
 ### Architecture
 
 - **Frontend**: React + Vite
 - **Signaling**: Rondevu server (Cloudflare Workers + D1)
 - **Client**: @xtr-dev/rondevu-client (TypeScript library)
-- **WebRTC**: RTCPeerConnection with Google STUN servers
+- **WebRTC**: RTCPeerConnection with STUN/TURN servers
+- **Connection Management**: RondevuPeer class with state machine
 
 ## Server Configuration
 
@@ -213,18 +260,41 @@ npx wrangler pages deploy dist --project-name=rondevu-demo
 
 - Credentials are stored in localStorage and persist across sessions
 - Offers expire after 5 minutes by default
-- The connection manager polls automatically (no manual polling needed)
+- The peer automatically polls for answers and ICE candidates
 - Multiple simultaneous connections are supported
-- WebRTC uses Google's public STUN servers for NAT traversal
+- WebRTC uses Google's public STUN servers + custom TURN server for NAT traversal
 - Data channel messages are unreliable but fast (perfect for chat)
+- Connection cleanup is automatic when peers disconnect
+
+## Connection Timeouts
+
+The demo uses these default timeouts:
+
+- **ICE Gathering**: 10 seconds (not used with trickle ICE)
+- **Waiting for Answer**: 30 seconds
+- **Creating Answer**: 10 seconds
+- **ICE Connection**: 30 seconds
+
+These can be customized in the `PeerOptions`:
+
+```javascript
+await peer.createOffer({
+  topics: ['my-topic'],
+  timeouts: {
+    waitingForAnswer: 60000,  // 1 minute
+    iceConnection: 45000      // 45 seconds
+  }
+});
+```
 
 ## Technologies
 
 - **React** - UI framework
 - **Vite** - Build tool and dev server
-- **@xtr-dev/rondevu-client** - Rondevu client library
+- **@xtr-dev/rondevu-client** - Rondevu client library with `RondevuPeer`
 - **RTCPeerConnection** - WebRTC connections
 - **RTCDataChannel** - P2P messaging
+- **QRCode** - QR code generation for easy topic sharing
 
 ## License
 

package-lock.json

@@ -1,14 +1,13 @@
 {
   "name": "rondevu-demo",
-  "version": "0.4.0",
+  "version": "2.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "rondevu-demo",
-      "version": "0.4.0",
+      "version": "2.0.0",
       "dependencies": {
-        "@xtr-dev/rondevu-client": "^0.4.1",
         "@zxing/library": "^0.21.3",
         "qrcode": "^1.5.4",
         "react": "^18.2.0",
@@ -22,15 +21,6 @@
         "vite": "^5.4.11"
       }
     },
-    "../client": {
-      "name": "@xtr-dev/rondevu-client",
-      "version": "0.0.4",
-      "extraneous": true,
-      "license": "MIT",
-      "devDependencies": {
-        "typescript": "^5.9.3"
-      }
-    },
     "node_modules/@babel/code-frame": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
@@ -762,9 +752,9 @@
       "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.53.3.tgz",
-      "integrity": "sha512-8c1vW4ocv3UOMp9K+gToY5zL2XiiVw3k7f1ksf4yO1FlDFQ1C2u72iACFnSOceJFsWskc2WZNqeRhFRPzv+wtQ==",
+      "integrity": "sha512-mRSi+4cBjrRLoaal2PnqH82Wqyb+d3HsPUN/W+WslCXsZsyHa9ZeQQX/pQsZaVIWDkPcpV6jJ+3KLbTbgnwv8w==",
       "cpu": [
         "arm"
       ],
@@ -776,9 +766,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.53.3.tgz",
-      "integrity": "sha512-mQGfsIEFcu21mvqkEKKu2dYmtuSZOBMmAl5CFlPGLY94Vlcm+zWApK7F/eocsNzp8tKmbeBP8yXyAbx0XHsFNA==",
+      "integrity": "sha512-CbDGaMpdE9sh7sCmTrTUyllhrg65t6SwhjlMJsLr+J8YjFuPmCEjbBSx4Z/e4SmDyH3aB5hGaJUP2ltV/vcs4w==",
       "cpu": [
         "arm64"
       ],
@@ -790,9 +780,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.53.3.tgz",
-      "integrity": "sha512-takF3CR71mCAGA+v794QUZ0b6ZSrgJkArC+gUiG6LB6TQty9T0Mqh3m2ImRBOxS2IeYBo4lKWIieSvnEk2OQWA==",
+      "integrity": "sha512-Nr7SlQeqIBpOV6BHHGZgYBuSdanCXuw09hon14MGOLGmXAFYjx1wNvquVPmpZnl0tLjg25dEdr4IQ6GgyToCUA==",
       "cpu": [
         "arm64"
       ],
@@ -804,9 +794,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.53.3.tgz",
-      "integrity": "sha512-W901Pla8Ya95WpxDn//VF9K9u2JbocwV/v75TE0YIHNTbhqUTv9w4VuQ9MaWlNOkkEfFwkdNhXgcLqPSmHy0fA==",
+      "integrity": "sha512-DZ8N4CSNfl965CmPktJ8oBnfYr3F8dTTNBQkRlffnUarJ2ohudQD17sZBa097J8xhQ26AwhHJ5mvUyQW8ddTsQ==",
       "cpu": [
         "x64"
       ],
@@ -818,9 +808,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.53.3.tgz",
-      "integrity": "sha512-QofO7i7JycsYOWxe0GFqhLmF6l1TqBswJMvICnRUjqCx8b47MTo46W8AoeQwiokAx3zVryVnxtBMcGcnX12LvA==",
+      "integrity": "sha512-yMTrCrK92aGyi7GuDNtGn2sNW+Gdb4vErx4t3Gv/Tr+1zRb8ax4z8GWVRfr3Jw8zJWvpGHNpss3vVlbF58DZ4w==",
       "cpu": [
         "arm64"
       ],
@@ -832,9 +822,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.53.3.tgz",
-      "integrity": "sha512-jr21b/99ew8ujZubPo9skbrItHEIE50WdV86cdSoRkKtmWa+DDr6fu2c/xyRT0F/WazZpam6kk7IHBerSL7LDQ==",
+      "integrity": "sha512-lMfF8X7QhdQzseM6XaX0vbno2m3hlyZFhwcndRMw8fbAGUGL3WFMBdK0hbUBIUYcEcMhVLr1SIamDeuLBnXS+Q==",
       "cpu": [
         "x64"
       ],
@@ -846,9 +836,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.53.3.tgz",
-      "integrity": "sha512-PsNAbcyv9CcecAUagQefwX8fQn9LQ4nZkpDboBOttmyffnInRy8R8dSg6hxxl2Re5QhHBf6FYIDhIj5v982ATQ==",
+      "integrity": "sha512-k9oD15soC/Ln6d2Wv/JOFPzZXIAIFLp6B+i14KhxAfnq76ajt0EhYc5YPeX6W1xJkAdItcVT+JhKl1QZh44/qw==",
       "cpu": [
         "arm"
       ],
@@ -860,9 +850,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.53.3.tgz",
-      "integrity": "sha512-Fw4tysRutyQc/wwkmcyoqFtJhh0u31K+Q6jYjeicsGJJ7bbEq8LwPWV/w0cnzOqR2m694/Af6hpFayLJZkG2VQ==",
+      "integrity": "sha512-vTNlKq+N6CK/8UktsrFuc+/7NlEYVxgaEgRXVUVK258Z5ymho29skzW1sutgYjqNnquGwVUObAaxae8rZ6YMhg==",
       "cpu": [
         "arm"
       ],
@@ -874,9 +864,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.53.3.tgz",
-      "integrity": "sha512-a+3wVnAYdQClOTlyapKmyI6BLPAFYs0JM8HRpgYZQO02rMR09ZcV9LbQB+NL6sljzG38869YqThrRnfPMCDtZg==",
+      "integrity": "sha512-RGrFLWgMhSxRs/EWJMIFM1O5Mzuz3Xy3/mnxJp/5cVhZ2XoCAxJnmNsEyeMJtpK+wu0FJFWz+QF4mjCA7AUQ3w==",
       "cpu": [
         "arm64"
       ],
@@ -888,9 +878,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.53.3.tgz",
-      "integrity": "sha512-AvttBOMwO9Pcuuf7m9PkC1PUIKsfaAJ4AYhy944qeTJgQOqJYJ9oVl2nYgY7Rk0mkbsuOpCAYSs6wLYB2Xiw0Q==",
+      "integrity": "sha512-kASyvfBEWYPEwe0Qv4nfu6pNkITLTb32p4yTgzFCocHnJLAHs+9LjUu9ONIhvfT/5lv4YS5muBHyuV84epBo/A==",
       "cpu": [
         "arm64"
       ],
@@ -902,9 +892,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.53.3.tgz",
-      "integrity": "sha512-DkDk8pmXQV2wVrF6oq5tONK6UHLz/XcEVow4JTTerdeV1uqPeHxwcg7aFsfnSm9L+OO8WJsWotKM2JJPMWrQtA==",
+      "integrity": "sha512-JiuKcp2teLJwQ7vkJ95EwESWkNRFJD7TQgYmCnrPtlu50b4XvT5MOmurWNrCj3IFdyjBQ5p9vnrX4JM6I8OE7g==",
       "cpu": [
         "loong64"
       ],
@@ -916,9 +906,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.53.3.tgz",
-      "integrity": "sha512-W/b9ZN/U9+hPQVvlGwjzi+Wy4xdoH2I8EjaCkMvzpI7wJUs8sWJ03Rq96jRnHkSrcHTpQe8h5Tg3ZzUPGauvAw==",
+      "integrity": "sha512-EoGSa8nd6d3T7zLuqdojxC20oBfNT8nexBbB/rkxgKj5T5vhpAQKKnD+h3UkoMuTyXkP5jTjK/ccNRmQrPNDuw==",
       "cpu": [
         "ppc64"
       ],
@@ -930,9 +920,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.53.3.tgz",
-      "integrity": "sha512-sjQLr9BW7R/ZiXnQiWPkErNfLMkkWIoCz7YMn27HldKsADEKa5WYdobaa1hmN6slu9oWQbB6/jFpJ+P2IkVrmw==",
+      "integrity": "sha512-4s+Wped2IHXHPnAEbIB0YWBv7SDohqxobiiPA1FIWZpX+w9o2i4LezzH/NkFUl8LRci/8udci6cLq+jJQlh+0g==",
       "cpu": [
         "riscv64"
       ],
@@ -944,9 +934,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.53.3.tgz",
-      "integrity": "sha512-hq3jU/kGyjXWTvAh2awn8oHroCbrPm8JqM7RUpKjalIRWWXE01CQOf/tUNWNHjmbMHg/hmNCwc/Pz3k1T/j/Lg==",
+      "integrity": "sha512-68k2g7+0vs2u9CxDt5ktXTngsxOQkSEV/xBbwlqYcUrAVh6P9EgMZvFsnHy4SEiUl46Xf0IObWVbMvPrr2gw8A==",
       "cpu": [
         "riscv64"
       ],
@@ -958,9 +948,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.53.3.tgz",
-      "integrity": "sha512-gn8kHOrku8D4NGHMK1Y7NA7INQTRdVOntt1OCYypZPRt6skGbddska44K8iocdpxHTMMNui5oH4elPH4QOLrFQ==",
+      "integrity": "sha512-VYsFMpULAz87ZW6BVYw3I6sWesGpsP9OPcyKe8ofdg9LHxSbRMd7zrVrr5xi/3kMZtpWL/wC+UIJWJYVX5uTKg==",
       "cpu": [
         "s390x"
       ],
@@ -972,9 +962,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.53.3.tgz",
-      "integrity": "sha512-hXGLYpdhiNElzN770+H2nlx+jRog8TyynpTVzdlc6bndktjKWyZyiCsuDAlpd+j+W+WNqfcyAWz9HxxIGfZm1Q==",
+      "integrity": "sha512-3EhFi1FU6YL8HTUJZ51imGJWEX//ajQPfqWLI3BQq4TlvHy4X0MOr5q3D2Zof/ka0d5FNdPwZXm3Yyib/UEd+w==",
       "cpu": [
         "x64"
       ],
@@ -986,9 +976,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.53.3.tgz",
-      "integrity": "sha512-arCGIcuNKjBoKAXD+y7XomR9gY6Mw7HnFBv5Rw7wQRvwYLR7gBAgV7Mb2QTyjXfTveBNFAtPt46/36vV9STLNg==",
+      "integrity": "sha512-eoROhjcc6HbZCJr+tvVT8X4fW3/5g/WkGvvmwz/88sDtSJzO7r/blvoBDgISDiCjDRZmHpwud7h+6Q9JxFwq1Q==",
       "cpu": [
         "x64"
       ],
@@ -1000,9 +990,9 @@
       ]
     },
     "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.53.3.tgz",
-      "integrity": "sha512-QoFqB6+/9Rly/RiPjaomPLmR/13cgkIGfA40LHly9zcH1S0bN2HVFYk3a1eAyHQyjs3ZJYlXvIGtcCs5tko9Cw==",
+      "integrity": "sha512-OueLAWgrNSPGAdUdIjSWXw+u/02BRTcnfw9PN41D2vq/JSEPnJnVuBgw18VkN8wcd4fjUs+jFHVM4t9+kBSNLw==",
       "cpu": [
         "arm64"
       ],
@@ -1014,9 +1004,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.53.3.tgz",
-      "integrity": "sha512-w0cDWVR6MlTstla1cIfOGyl8+qb93FlAVutcor14Gf5Md5ap5ySfQ7R9S/NjNaMLSFdUnKGEasmVnu3lCMqB7w==",
+      "integrity": "sha512-GOFuKpsxR/whszbF/bzydebLiXIHSgsEUp6M0JI8dWvi+fFa1TD6YQa4aSZHtpmh2/uAlj/Dy+nmby3TJ3pkTw==",
       "cpu": [
         "arm64"
       ],
@@ -1028,9 +1018,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.53.3.tgz",
-      "integrity": "sha512-Aufdpzp7DpOTULJCuvzqcItSGDH73pF3ko/f+ckJhxQyHtp67rHw3HMNxoIdDMUITJESNE6a8uh4Lo4SLouOUg==",
+      "integrity": "sha512-iah+THLcBJdpfZ1TstDFbKNznlzoxa8fmnFYK4V67HvmuNYkVdAywJSoteUszvBQ9/HqN2+9AZghbajMsFT+oA==",
       "cpu": [
         "ia32"
       ],
@@ -1042,9 +1032,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.53.3.tgz",
-      "integrity": "sha512-UGBUGPFp1vkj6p8wCRraqNhqwX/4kNQPS57BCFc8wYh0g94iVIW33wJtQAx3G7vrjjNtRaxiMUylM0ktp/TRSQ==",
+      "integrity": "sha512-J9QDiOIZlZLdcot5NXEepDkstocktoVjkaKUtqzgzpt2yWjGlbYiKyp05rWwk4nypbYUNoFAztEgixoLaSETkg==",
       "cpu": [
         "x64"
       ],
@@ -1056,9 +1046,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.53.3.tgz",
-      "integrity": "sha512-TAcgQh2sSkykPRWLrdyy2AiceMckNf5loITqXxFI5VuQjS5tSuw3WlwdN8qv8vzjLAUTvYaH/mVjSFpbkFbpTg==",
+      "integrity": "sha512-UhTd8u31dXadv0MopwGgNOBpUVROFKWVQgAg5N1ESyCz8AuBcMqm4AuTjrwgQKGDfoFuz02EuMRHQIw/frmYKQ==",
       "cpu": [
         "x64"
       ],
@@ -1129,14 +1119,14 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "18.3.26",
+      "version": "18.3.27",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.26.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
-      "integrity": "sha512-RFA/bURkcKzx/X9oumPG9Vp3D3JUgus/d0b67KB0t5S/raciymilkOa66olh78MUI92QLbEJevO7rvqU/kjwKA==",
+      "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
-        "csstype": "^3.0.2"
+        "csstype": "^3.2.2"
       }
     },
     "node_modules/@types/react-dom": {
@@ -1170,12 +1160,6 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
       }
     },
-    "node_modules/@xtr-dev/rondevu-client": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@xtr-dev/rondevu-client/-/rondevu-client-0.4.1.tgz",
-      "integrity": "sha512-8giBS48thHKoIiqD6hD2VpMer50cGg4iwVMRCaaTiC7Ci6ICHXyCorNj6lWgw7dwL56oWhzbZU+cWHlQw2dxyQ==",
-      "license": "MIT"
-    },
     "node_modules/@zxing/library": {
       "version": "0.21.3",
       "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.21.3.tgz",
@@ -1223,9 +1207,9 @@
       }
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.8.23",
+      "version": "2.9.3",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.23.tgz",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.3.tgz",
-      "integrity": "sha512-616V5YX4bepJFzNyOfce5Fa8fDJMfoxzOIzDCZwaGL8MKVpFrXqfNUoIpRn9YMI5pXf/VKgzjB4htFMsFKKdiQ==",
+      "integrity": "sha512-8QdH6czo+G7uBsNo0GiUfouPN1lRzKdJTGnKXwe12gkFbnnOUaUKGN55dMkfy+mnxmvjwl9zcI4VncczcVXDhA==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -1233,9 +1217,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.27.0",
+      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.27.0.tgz",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
-      "integrity": "sha512-AXVQwdhot1eqLihwasPElhX2tAZiBjWdJ9i/Zcj2S6QYIjkx62OKSfnobkriB81C3l4w0rVy3Nt4jaTBltYEpw==",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
       "dev": true,
       "funding": [
         {
@@ -1253,11 +1237,11 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "baseline-browser-mapping": "^2.8.19",
+        "baseline-browser-mapping": "^2.9.0",
-        "caniuse-lite": "^1.0.30001751",
+        "caniuse-lite": "^1.0.30001759",
-        "electron-to-chromium": "^1.5.238",
+        "electron-to-chromium": "^1.5.263",
-        "node-releases": "^2.0.26",
+        "node-releases": "^2.0.27",
-        "update-browserslist-db": "^1.1.4"
+        "update-browserslist-db": "^1.2.0"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -1276,9 +1260,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001753",
+      "version": "1.0.30001759",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001753.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001759.tgz",
-      "integrity": "sha512-Bj5H35MD/ebaOV4iDLqPEtiliTN29qkGtEHCwawWn4cYm+bPJM2NsaP30vtZcnERClMzp52J4+aw2UNbK4o+zw==",
+      "integrity": "sha512-Pzfx9fOKoKvevQf8oCXoyNRQ5QyxJj+3O0Rqx2V5oxT61KGx8+n6hV/IUyJeifUci2clnmmKVpvtiqRzgiWjSw==",
       "dev": true,
       "funding": [
         {
@@ -1333,9 +1317,9 @@
       "license": "MIT"
     },
     "node_modules/csstype": {
-      "version": "3.1.3",
+      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
     "node_modules/debug": {
@@ -1372,9 +1356,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.244",
+      "version": "1.5.266",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.244.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.266.tgz",
-      "integrity": "sha512-OszpBN7xZX4vWMPJwB9illkN/znA8M36GQqQxi6MNy9axWxhOfJyZZJtSLQCpEFLHP2xK33BiWx9aIuIEXVCcw==",
+      "integrity": "sha512-kgWEglXvkEfMH7rxP5OSZZwnaDWT7J9EoZCujhnpLbfi0bbNtRkgdX2E3gt0Uer11c61qCYktB3hwkAS325sJg==",
       "dev": true,
       "license": "ISC"
     },
@@ -1772,9 +1756,9 @@
       "license": "ISC"
     },
     "node_modules/rollup": {
-      "version": "4.52.5",
+      "version": "4.53.3",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.5.tgz",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.3.tgz",
-      "integrity": "sha512-3GuObel8h7Kqdjt0gxkEzaifHTqLVW56Y/bjN7PSQtkKr0w3V/QYSdt6QWYtd7A1xUtYQigtdUfgj1RvWVtorw==",
+      "integrity": "sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1788,28 +1772,28 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.52.5",
+        "@rollup/rollup-android-arm-eabi": "4.53.3",
-        "@rollup/rollup-android-arm64": "4.52.5",
+        "@rollup/rollup-android-arm64": "4.53.3",
-        "@rollup/rollup-darwin-arm64": "4.52.5",
+        "@rollup/rollup-darwin-arm64": "4.53.3",
-        "@rollup/rollup-darwin-x64": "4.52.5",
+        "@rollup/rollup-darwin-x64": "4.53.3",
-        "@rollup/rollup-freebsd-arm64": "4.52.5",
+        "@rollup/rollup-freebsd-arm64": "4.53.3",
-        "@rollup/rollup-freebsd-x64": "4.52.5",
+        "@rollup/rollup-freebsd-x64": "4.53.3",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.52.5",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.53.3",
-        "@rollup/rollup-linux-arm-musleabihf": "4.52.5",
+        "@rollup/rollup-linux-arm-musleabihf": "4.53.3",
-        "@rollup/rollup-linux-arm64-gnu": "4.52.5",
+        "@rollup/rollup-linux-arm64-gnu": "4.53.3",
-        "@rollup/rollup-linux-arm64-musl": "4.52.5",
+        "@rollup/rollup-linux-arm64-musl": "4.53.3",
-        "@rollup/rollup-linux-loong64-gnu": "4.52.5",
+        "@rollup/rollup-linux-loong64-gnu": "4.53.3",
-        "@rollup/rollup-linux-ppc64-gnu": "4.52.5",
+        "@rollup/rollup-linux-ppc64-gnu": "4.53.3",
-        "@rollup/rollup-linux-riscv64-gnu": "4.52.5",
+        "@rollup/rollup-linux-riscv64-gnu": "4.53.3",
-        "@rollup/rollup-linux-riscv64-musl": "4.52.5",
+        "@rollup/rollup-linux-riscv64-musl": "4.53.3",
-        "@rollup/rollup-linux-s390x-gnu": "4.52.5",
+        "@rollup/rollup-linux-s390x-gnu": "4.53.3",
-        "@rollup/rollup-linux-x64-gnu": "4.52.5",
+        "@rollup/rollup-linux-x64-gnu": "4.53.3",
-        "@rollup/rollup-linux-x64-musl": "4.52.5",
+        "@rollup/rollup-linux-x64-musl": "4.53.3",
-        "@rollup/rollup-openharmony-arm64": "4.52.5",
+        "@rollup/rollup-openharmony-arm64": "4.53.3",
-        "@rollup/rollup-win32-arm64-msvc": "4.52.5",
+        "@rollup/rollup-win32-arm64-msvc": "4.53.3",
-        "@rollup/rollup-win32-ia32-msvc": "4.52.5",
+        "@rollup/rollup-win32-ia32-msvc": "4.53.3",
-        "@rollup/rollup-win32-x64-gnu": "4.52.5",
+        "@rollup/rollup-win32-x64-gnu": "4.53.3",
-        "@rollup/rollup-win32-x64-msvc": "4.52.5",
+        "@rollup/rollup-win32-x64-msvc": "4.53.3",
         "fsevents": "~2.3.2"
       }
     },
@@ -1884,9 +1868,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.1.4",
+      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.4.tgz",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.2.tgz",
-      "integrity": "sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==",
+      "integrity": "sha512-E85pfNzMQ9jpKkA7+TJAi4TJN+tBCuWh5rUcS/sv6cFi+1q9LYDwDI5dpUL0u/73EElyQ8d3TEaeW4sPedBqYA==",
       "dev": true,
       "funding": [
         {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "rondevu-demo",
-  "version": "0.4.0",
+  "version": "2.0.0",
-  "description": "Demo application for Rondevu topic-based peer discovery and signaling",
+  "description": "Demo application for Rondevu DNS-like WebRTC with username claiming and service discovery",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -10,7 +10,6 @@
     "deploy": "npm run build && npx wrangler pages deploy dist --project-name=rondevu-demo"
   },
   "dependencies": {
-    "@xtr-dev/rondevu-client": "^0.4.1",
     "@zxing/library": "^0.21.3",
     "qrcode": "^1.5.4",
     "react": "^18.2.0",

src/index.css

@@ -997,3 +997,22 @@ input[type="text"]:disabled {
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(85, 104, 211, 0.4);
 }
+
+/* Topic cards grid for discovery */
+.topic-card-hover {
+  padding: 25px;
+  background: white;
+  border-radius: 12px;
+  border: 2px solid #e0e0e0;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.topic-card-hover:hover {
+  border-color: #667eea;
+  background: #fafbfc;
+  transform: translateY(-3px);
+  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.2);
+}