Cross-Tab Paddle Duel

Build "Paddle Duel", a two-player Pong-style game where each player plays in a separate browser tab on the same machine. Use a single index.html plus game.js, vanilla JS and HTML5 Canvas, no build step and no server. Tabs communicate only through the BroadcastChannel API (channel name "paddle-duel").

Networking model:
- The first tab to open becomes HOST; the next becomes GUEST. Implement a tiny handshake: on load, post {type:"hello", id}; if no "host-here" reply arrives within 300ms, become host. A third tab becomes a SPECTATOR that only renders.
- The host is authoritative: it runs physics at a fixed 60Hz step and broadcasts a compact state snapshot {ball:{x,y,vx,vy}, paddles:[y1,y2], score:[a,b], tick} every tick.
- The guest only sends its input {type:"input", up, down, tick} and renders the latest snapshot, interpolating the ball between the last two snapshots.
- Handle disconnects: on "beforeunload" post {type:"bye"}; if the host disappears (no snapshot for 1s), the guest promotes itself to host and keeps the score.

Gameplay:
- 800x500 canvas, paddles on left (host) and right (guest), W/S or Up/Down to move.
- Ball speeds up 5% on each paddle hit and bounces at an angle based on where it hits the paddle.
- First to 7 wins; show a "Rematch" button that both players must click (ready-check over the channel).

UI:
- Top bar shows your role (HOST, GUEST or SPECTATOR), both scores, and a live "ping" in ms measured with timestamped ping/pong messages every second.
- A debug toggle (press D) that overlays tick number, snapshot rate and the last message received.

Keep the code clean with small functions (net.js-style section, physics section, render section) and explain how to test it: open index.html in two windows side by side. When done, list any edge cases you handled.