feat: optimize extension uninstall URL registration with anonymous token and startup hardening

- Bump all actions off the deprecated Node 20 runtime: checkout v4->v7,
  upload-artifact v4->v7, setup-node added@v6, action-gh-release v1->v3,
  docker build-push v5->v7, login v3->v4, metadata v5->v6, buildx v3->v4
  (verified latest majors via GitHub API; no breaking input/output changes)
- Add npm dependency caching via setup-node (cache: npm)
- Add GHA layer caching for the multi-arch Docker build (cache-from/to gha)
- Add concurrency group so a release run is never interrupted, only dedupes
  re-pushes of the same tag
- Tighten release-server permissions to contents: read (it never writes to the repo)

Version-injection and commit-back logic unchanged. First exercised on the next v* tag.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

.github/PULL_REQUEST_TEMPLATE.md

@@ -37,7 +37,7 @@ Closes #
 - [ ] I have performed a self-review of my code
 - [ ] I have added/updated tests if needed
 - [ ] I have updated documentation if needed (`docs/`, README, etc.)
-- [ ] Protocol changes: I ran `node scripts/build-extension.js` and updated relevant docs
+- [ ] Protocol changes: I ran `node scripts/build-extension.cjs` and updated relevant docs
 - [ ] No new warnings, secrets, or hardcoded credentials introduced
 
 ### Additional Context

.github/workflows/release.yml

@@ -5,23 +5,29 @@ on:
     tags:
       - 'v*'
 
+# A release run must never be interrupted (it commits back to main and publishes
+# artifacts). Only dedupe accidental re-pushes of the same tag.
+concurrency:
+  group: release-${{ github.ref_name }}
+  cancel-in-progress: false
+
 jobs:
   release-server:
     runs-on: ubuntu-latest
     permissions:
-      contents: write
+      contents: read
       packages: write
       id-token: write
       attestations: write
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v4
 
       - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
@@ -29,7 +35,7 @@ jobs:
 
       - name: Extract Docker metadata
         id: meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@v6
         with:
           images: ghcr.io/${{ github.repository }}
           tags: |
@@ -38,7 +44,7 @@ jobs:
 
       - name: Build and push Docker image
         id: build
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v7
         with:
           context: .
           file: server/Dockerfile
@@ -46,6 +52,9 @@ jobs:
           platforms: linux/amd64,linux/arm64
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+          # Reuse layers across releases to speed up the multi-arch build.
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
 
       - name: Generate artifact attestation
         uses: actions/attest@v4
@@ -62,7 +71,13 @@ jobs:
       attestations: write
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v7
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: '24'
+          cache: 'npm'
 
       - name: Extract version from tag
         id: version
@@ -79,7 +94,7 @@ jobs:
           echo "  ✓ manifest.base.json -> $VERSION"
 
           # 2. shared/constants.js — APP_VERSION
-          sed -i "s/export const APP_VERSION = '.*'/export const APP_VERSION = '$VERSION'/" shared/constants.js
+          sed -i "s/export const APP_VERSION = [\"'].*[\"']/export const APP_VERSION = \"$VERSION\"/" shared/constants.js
           echo "  ✓ shared/constants.js -> $VERSION"
 
           # 3. package.json
@@ -94,8 +109,9 @@ jobs:
           sed -i "s/\"softwareVersion\": \".*\"/\"softwareVersion\": \"$VERSION\"/" website/template.html
           echo "  ✓ website/template.html -> softwareVersion $VERSION"
 
-          # 6. README.md — version badge
-          sed -i "s/v[0-9]\+\.[0-9]\+\.[0-9]\+/v$VERSION/g" README.md
+          # 6. README.md — version badge & banner
+          sed -i "s|Release-v[0-9]\+\.[0-9]\+\.[0-9]\+-blue|Release-v$VERSION-blue|g" README.md
+          sed -i "s/New v[0-9]\+\.[0-9]\+\.[0-9]\+ Release/New v$VERSION Release/g" README.md
           echo "  ✓ README.md -> v$VERSION"
 
           # 7. website/sitemap.xml — lastmod dates
@@ -128,14 +144,14 @@ jobs:
         run: node website/build.cjs
 
       - name: Upload Website Artifacts
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         with:
           name: website-www
           path: website/www/
           if-no-files-found: error
 
       - name: Create GitHub Release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v3
         with:
           files: |
             dist/koalasync-chrome.zip

CONTRIBUTING.md

@@ -31,7 +31,7 @@ Please note that by participating in this project, you agree to abide by our [Co
 git clone https://github.com/Shik3i/KoalaSync.git
 cd KoalaSync
 npm install
-node scripts/build-extension.js
+node scripts/build-extension.cjs
 ```
 
 ---
@@ -62,7 +62,7 @@ node scripts/build-extension.js
 ### Website
 
 ```bash
-node website/build.js           # Compile static site → www/
+node website/build.cjs           # Compile static site → www/
 python3 -m http.server 8080 -d website/www  # Serve locally
 ```
 
@@ -77,7 +77,7 @@ KoalaSync uses a **single source of truth** for all protocol constants in `share
 > [!IMPORTANT]
 > After modifying `shared/constants.js`, you **must** run the build script to sync changes to the extension:
 > ```bash
-> node scripts/build-extension.js
+> node scripts/build-extension.cjs
 > ```
 > This automatically injects constants into `content.js` and regenerates browser bundles in `dist/`.
 
@@ -109,7 +109,7 @@ If you are new to open-source contributions, follow these steps to propose your
 3. **Create a Branch**: `git checkout -b my-new-feature` (e.g. `feature/dark-mode` or `fix/translation-de`)
 4. **Make your Changes**: Edit the files, then verify them locally.
    - *Extension/Server changes*: Test on Chrome/Firefox and check `npm run lint`.
-   - *Website/Translation changes*: Run `node website/build.js` and check the output in `www/`.
+   - *Website/Translation changes*: Run `node website/build.cjs` and check the output in `www/`.
 5. **Commit and Push**: `git commit -m "Add my feature"` and `git push origin my-new-feature`
 6. **Open a Pull Request (PR)**: Go to the original KoalaSync repository on GitHub and click "New Pull Request".
 
@@ -156,9 +156,9 @@ KoalaSync supports multiple languages. To add or improve translations:
 1. Read the **[Translation Guide](docs/TRANSLATION.md)** first. It explains how our localization system works.
 2. Edit the `.json` files in `website/locales/` (for the website) and `extension/locales/` (for the extension).
 3. Test your translations locally by running:
-   - `node scripts/test-locales.js` (for extension)
+   - `node scripts/test-locales.cjs` (for extension)
    - `node scripts/test-website-locales.mjs` (for website)
-   - `node website/build.js` (to build the site)
+   - `node website/build.cjs` (to build the site)
 4. Follow the **Open Source Workflow** above (Fork -> Branch -> Edit -> PR) to submit your translations.
 
 ---

README.md

@@ -6,15 +6,15 @@
 
 <p align="center">
   <a href="https://github.com/Shik3i/KoalaSync/actions/workflows/release.yml"><img src="https://github.com/Shik3i/KoalaSync/actions/workflows/release.yml/badge.svg" alt="Release Status"></a>
-  <a href="https://github.com/Shik3i/KoalaSync/releases"><img src="https://img.shields.io/github/v/release/Shik3i/KoalaSync" alt="GitHub release"></a>
-  <a href="LICENSE"><img src="https://img.shields.io/github/license/Shik3i/KoalaSync?color=blue" alt="License"></a>
+  <a href="https://github.com/Shik3i/KoalaSync/releases"><img src="https://img.shields.io/badge/Release-v2.4.1-blue?logo=github" alt="GitHub release"></a>
+  <a href="LICENSE"><img src="https://img.shields.io/badge/License-MIT-blue" alt="License"></a>
   <a href="https://addons.mozilla.org/de/firefox/addon/koalasync/"><img src="https://img.shields.io/badge/Firefox-Download-orange?logo=firefoxbrowser&logoColor=white" alt="Firefox Add-on"></a>
   <a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc"><img src="https://img.shields.io/badge/Chrome-Download-blue?logo=googlechrome&logoColor=white" alt="Chrome Extension"></a>
 </p>
 
 <p align="center"><i>KoalaSync is a lightweight Browser Extension and Relay Server for synchronized video playback on almost any website with a video element—YouTube, Twitch, Netflix, Emby, Jellyfin, and beyond. Built with a focus on <b>Data Sovereignty</b> and <b>Performance</b>.</i></p>
 
-<p align="center"><a href="docs/CHANGELOG.md"><b>New v2.3.2 Release!</b> — See what's changed</a></p>
+<p align="center"><a href="docs/CHANGELOG.md"><b>New v2.4.1 Release!</b> — See what's changed</a></p>
 
 ### 🌟 Why KoalaSync?
 
@@ -81,7 +81,7 @@ Both the official KoalaSync website and the **v2.0 Browser Extension** feature f
 To build the extension from source and synchronize protocol constants:
 ```bash
 npm install
-node scripts/build-extension.js
+npm run build:extension
 ```
 The compiled artifacts will be available in the `dist/` directory.
 
@@ -103,7 +103,7 @@ To connect your extension to a self-hosted server, open the popup → **Room** t
 
 To verify your relay is reachable from outside, visit `https://your-domain.com` in a browser — it should return `{"status":"online","service":"KoalaSync Relay"}`.
 
-#### Supply Chain Security (v2.3.2+)
+#### Supply Chain Security (v2.2.2+)
 
 All official release artifacts (Docker images and extension binaries) are published with signed [artifact attestations](https://docs.github.com/en/actions/how-tos/secure-your-work/use-artifact-attestations) to prove they were built from this repository's source code.
 

assets/StoreAssets/StoreDescription.md

@@ -40,7 +40,7 @@ KoalaSync is built for private watch parties without unnecessary data collection
 ⚙️ UNDER THE HOOD
 KoalaSync is lightweight, transparent, and built with privacy in mind.
 
-• Real-Time Relay: Playback state is synchronized through a custom WebSocket-based relay server for fast room updates.
+• On-Demand Relay: Playback state is synchronized through a custom WebSocket-based relay server. No persistent connection — the relay is only active while you're in a room. No background traffic, no idle connections.
 • No Media Streaming: KoalaSync does not stream, proxy, upload, download, or redistribute any video content. Everyone watches from their own browser on the original website.
 • Temporary Room State Only: The relay server only coordinates room state such as play, pause, seek position, active target, nickname, and readiness status.
 • Docker Self-Hosting: The relay server can be self-hosted with Docker if you prefer to run your own private instance.

docs/AI_INIT.md

@@ -21,14 +21,14 @@ KoalaSync is a specialized tool for **synchronized video playback** across multi
 - `extension/`: Browser Extension (Chrome & Firefox, Manifest V3). Contains background service worker, content scripts, and popup UI.
 - `server/`: Node.js Relay Server using Socket.IO (WebSocket-only).
 - `website/`: **Landing Page** & Invitation Bridge (Marketing, Tutorials, and Downloads).
-  - **`build.js`**: Zero-dependency static site compiler. Translates `template.html` + `locales/*.json` → `www/`. Also minifies CSS/JS automatically.
-  - **`www/` is auto-generated**: Never edit files in `www/` directly. Always edit source files (`template.html`, `style.css`, `app.js`, `lang-init.js`, `locales/*.json`) and run `node website/build.js` to regenerate. CSS/JS are output as `.min.*` files — a built-in cleanup step removes stale artifacts on each build.
+  - **`build.cjs`**: Zero-dependency static site compiler. Translates `template.html` + `locales/*.json` → `www/`. Also minifies CSS/JS automatically.
+  - **`www/` is auto-generated**: Never edit files in `www/` directly. Always edit source files (`template.html`, `style.css`, `app.js`, `lang-init.js`, `locales/*.json`) and run `node website/build.cjs` to regenerate. CSS/JS are output as `.min.*` files — a built-in cleanup step removes stale artifacts on each build.
 - `shared/`: **Single Source of Truth** for protocol constants and event names.
-- `scripts/`: Development utilities (e.g., `build-extension.js`).
+- `scripts/`: Development utilities (e.g., `build-extension.cjs`).
 - `docker-compose.yml`: Root-level orchestration for the relay server.
 
 > [!IMPORTANT]
-> **Single Source of Truth**: `shared/constants.js` and `shared/blacklist.js` are the master files. They must be synchronized to the `extension/shared/` directory using `node scripts/build-extension.js`. 
+> **Single Source of Truth**: `shared/constants.js` and `shared/blacklist.js` are the master files. They must be synchronized to the `extension/shared/` directory using `node scripts/build-extension.cjs`. 
 > - **Extension Modules** (`background.js`, `popup.js`) import directly from `./shared/constants.js`.
 > - **Content Scripts** (`content.js`) use a **marker-injected synchronous copy** of the constants. The build script automatically replaces the marked blocks — no manual mirroring needed.
 
@@ -41,7 +41,7 @@ Before touching any code, you MUST read the following documents in order:
 ## 4. The "Vanilla JS Mirror" Pattern
 To avoid boot-time race conditions in Manifest V3 without a bundler, the following architectural trade-off is enforced:
 - **Synchronous Execution**: `content.js` MUST execute synchronously to catch early media events. 
-- **Automated Injection**: The build script (`node scripts/build-extension.js`) automatically injects `EVENTS` and `HEARTBEAT_INTERVAL` into `content.js` using marker-based replacement (see `../scripts/README.md` for marker details).
+- **Automated Injection**: The build script (`node scripts/build-extension.cjs`) automatically injects `EVENTS` and `HEARTBEAT_INTERVAL` into `content.js` using marker-based replacement (see `../scripts/README.md` for marker details).
 - **Maintenance**: After modifying `shared/constants.js`, simply run the build script. No manual mirroring is required.
 
 ## 5. File Responsibility Map
@@ -137,18 +137,18 @@ Before starting any task, committing, or pushing, you **MUST** run `git pull --r
 
 ### Adding a Protocol Event
 1. Add the event name to `shared/constants.js`.
-2. Run the build script (`node scripts/build-extension.js`).
+2. Run the build script (`node scripts/build-extension.cjs`).
 3. Implement the handler in `server/index.js` and `background.js`.
 
 ### Making Website Changes
 1. Edit source files in `website/` (`template.html`, `style.css`, `app.js`, `lang-init.js`, or `locales/*.json`).
-2. Run the compiler: `node website/build.js`. This generates the multilingual pages in `www/` and minifies CSS/JS.
+2. Run the compiler: `node website/build.cjs`. This generates the multilingual pages in `www/` and minifies CSS/JS.
 3. Verify the output: `node --check website/www/app.js && node --check website/www/lang-init.js`.
 4. Test locally: `npx serve website/www` or `python3 -m http.server 8080 -d website/www`.
 5. Commit both source changes and the updated `www/` output.
 
 ### Testing Locally
-1. Run the build script: `node scripts/build-extension.js`.
+1. Run the build script: `node scripts/build-extension.cjs`.
 2. Load `dist/chrome/` as an "Unpacked Extension" in Chrome (or `dist/firefox/` in Firefox).
 3. Start the server from the root: `docker-compose up --build`.
 4. Use **different browser profiles** or vendors to test multi-peer logic.

docs/ARCHITECTURE.md

@@ -2,9 +2,10 @@
 
 This document describes the communication flows and internal logic of the KoalaSync system.
 
-## 1. Extension Startup & Connection
-- **Initialization**: On startup, `background.js` reads settings (Server URL, Username, Last Room) from `chrome.storage.sync`.
-- **WebSocket Handshake**:
+## 1. Extension Connection (Lazy Connect)
+- **Initialization**: On startup, `background.js` reads settings (Server URL, Username, Last Room) from `chrome.storage.sync`. No WebSocket connection is established at this point.
+- **On-Demand Connection**: The extension only connects when needed — either the user opens the popup with saved room credentials, or when actively in a room. When not in a room, no connection exists. This improves privacy (IP not exposed while idle) and reduces battery/network usage.
+- **WebSocket Handshake (when connecting)**:
   1. Background creates a `new WebSocket` to `/socket.io/?EIO=4&transport=websocket&version=1.0.0`.
   2. Server performs security checks:
      - **IP Rate Limit**: Checks if the IP has exceeded connection limits.
@@ -45,7 +46,7 @@ To maintain a clean room state and eliminate "Ghost Peers":
 - **Video Heartbeat (Content)**: Every 15 seconds, `content.js` sends current playback metadata (time, title, state) if a video is found.
 - **Server Pruning**: The server runs a "Reaper" every 2 minutes. If a peer has sent **zero** activity (no events and no heartbeats) for 5 minutes, they are forcefully disconnected.
 - **Immediate Cleanup**: Rooms are deleted instantly when the last peer leaves or disconnects.
-- **Reconnect Strategy**: Aggressive backoff — 500ms base, 1.5x multiplier, capped at 5s. Max 20 attempts before marking as failed. Events are queued during disconnect and flushed after namespace rejoin.
+- **Reconnect Strategy (while in room)**: Aggressive backoff — 500ms base, 1.5x multiplier, capped at 5s. Max 20 attempts before marking as failed. Events are queued during disconnect and flushed after namespace rejoin. When not in a room, no reconnection occurs.
 
 > [!CAUTION]
 > **Identity Rule**: Differentiate between `peerId` and `socket.id`. Use `socket.id` exclusively for ephemeral transport routing on the server. Use `peerId` exclusively for identity, state management, and room tracking across the stack.
@@ -70,5 +71,5 @@ KoalaSync uses a megaphone routing approach to minimize server logic:
 To maintain a "Single Source of Truth" across the server and extension without using a bundler:
 - **Relay Server & Extension Modules**: `background.js` and `popup.js` import constants directly from `shared/constants.js`.
 - **Content Scripts**: To ensure zero-latency execution, `content.js` uses a synchronized copy of `EVENTS` and constants.
-- **Automation**: The `node scripts/build-extension.js` script automatically injects these constants into `content.js` during the build process, eliminating the risk of manual mirror mismatch.
+- **Automation**: The `npm run build:extension` script automatically injects `EVENTS`, `HEARTBEAT_INTERVAL`, and `episode-utils.js` functions into `content.js` during the build process, eliminating the risk of manual mirror mismatch.
 - **Verification**: Any protocol change is automatically propagated across the stack by running the build script.

docs/CHANGELOG.md

@@ -4,6 +4,22 @@ All notable changes to the KoalaSync browser extension and relay server.
 
 ---
 
+## [v2.4.1] — 2026-06-19
+
+### Added
+- **Extension: Onboarding tour now has a closing step** — The first-run tour ends on a dedicated "You're all set!" card (the `ONBOARDING_5` copy that already existed in all 13 locales but was never shown). The tour no longer stops abruptly on the username step.
+- **Extension: One-click invite from the empty peer list** — The "No peers yet" state now shows a **📋 Invite Link** button that copies the invite link to the clipboard, so users can share it without hunting for the field.
+
+### Changed
+- **Extension: Cleaner onboarding welcome** — Step 1 is now a centered welcome card instead of spotlighting the logo title. Added a guard so target-less tour steps center cleanly.
+- **Website: Mobile comparison table** — The KoalaSync vs Teleparty table stacks into per-feature cards on phones instead of forcing horizontal scrolling; feature descriptions are shown again on mobile.
+
+### Fixed
+- **Extension: Onboarding step counter/progress placeholders** — Static `Step 1 of 3` / 33% fallbacks in `popup.html` corrected to match the actual 5-step tour (`Step 1 of 5` / 20%).
+- **Website: Mobile navigation restored** — The header hamburger menu was hidden by a `display:none !important` rule, leaving the nav links unreachable on phones. Re-enabled, with spacing kept comfortable down to ~320px.
+- **Website: Hero alignment on mobile** — A fixed-width extension mockup forced the hero grid column wider than the container, shifting all hero content off-center (larger left margin than right). The mockup is now responsive (`width:100%/max-width` + `minmax(0,1fr)` grid track).
+- **Website: Reveal-animation fallback** — Added a `<noscript>` style fallback and `IntersectionObserver` feature guards so scroll-revealed content can never stay invisible if JavaScript is disabled or unsupported.
+
 ## [v2.4.0] — 2026-06-16
 
 ### Added

docs/HOW_IT_WORKS.md

@@ -16,9 +16,9 @@ This guide walks through the complete user flow of KoalaSync, from creating a ro
 
 ## Step 2: Connecting to the Relay Server
 
-When you open the extension popup, the background service worker connects to the relay server:
+When you open the extension popup (with saved room credentials) or when a saved room configuration exists from a previous session, the background service worker connects to the relay server:
 
-1. **WebSocket Handshake**: `background.js` opens a WebSocket to `wss://syncserver.koalastuff.net/socket.io/?EIO=4&transport=websocket`.
+1. **WebSocket Handshake** (on demand): `background.js` opens a WebSocket to `wss://syncserver.koalastuff.net/socket.io/?EIO=4&transport=websocket` only when needed (popup opened or active room).
 2. **Security Checks** (server-side):
    - The server checks the client's **IP rate limit** (max 10 connections per 60 seconds).
    - The server validates the **authentication token** (hardcoded in `shared/constants.js`) to verify this is a legitimate KoalaSync client.
@@ -155,7 +155,7 @@ While in a room, two heartbeats keep the session alive:
 
 | Heartbeat | Interval | Source | Purpose |
 |:----------|:---------|:-------|:--------|
-| **Background** | 30 seconds | `background.js` | Signals "I'm still connected" and triggers aggressive reconnect (500ms base, max 5s) |
+| **Background** | 30 seconds | `background.js` | While connected, signals "I'm still connected" and triggers automatic reconnect (500ms base, max 5s). No heartbeats fire when idle (lazy connect). |
 | **Content** | 15 seconds | `content.js` | Sends video metadata: `currentTime`, `mediaTitle`, `playbackState`, `volume`, `muted` |
 
 - **Server Reaper**: Every 2 minutes, the server checks for peers with no activity for 5+ minutes and disconnects them ("dead peer pruning").

docs/PRIVACY.md

@@ -33,7 +33,7 @@ The browser extension requires the following permissions:
 - `storage`: To remember your local preferences (username, server URL, room settings).
 - `tabs` & `scripting`: To detect and control video elements on the pages you choose to sync.
 - `<all_urls>` (host permission): Required to detect `<video>` elements on any website the user chooses to synchronize. The extension only activates on the specific tab the user has actively selected — it does not scan, monitor, or interact with any other tabs or pages.
-- `alarms`: To keep the background service worker alive during active sync sessions.
+- `alarms`: To keep the background service worker alive during active sync sessions (the extension only stays connected while you are in a room).
 - `notifications`: To display sync status updates (e.g., "Peer joined", "Force Sync initiated").
 - **No History Access**: We do not read, store, or transmit your browsing history. We only interact with the specific tab you have actively selected for synchronization.
 

docs/ROADMAP.md

@@ -79,12 +79,4 @@
 |---|---|
 | *(none yet)* | |
 
----
 
-## ✅ Completed
-
-*Shipped milestones.*
-
-| Feature | Shipped |
-|---|---|
-| *(none yet)* | |

docs/SYNC_GUIDE.md

@@ -17,13 +17,15 @@ You MUST run the build script in any of the following scenarios:
 
 Run the Node.js build script from the repository root:
 ```bash
-node scripts/build-extension.js
+node scripts/build-extension.cjs
+# or simply:
+npm run build:extension
 ```
 
 ## What does it do?
 The build script performs the following actions:
 1. Synchronizes protocol constants by copying `shared/constants.js`, `shared/blacklist.js`, and `shared/README.md` into `extension/shared/`.
-2. Injects `EVENTS` and `HEARTBEAT_INTERVAL` into `content.js` via marker-based replacement.
+2. Injects `EVENTS`, `HEARTBEAT_INTERVAL`, and `episode-utils.js` functions (`extractEpisodeId`, `sameEpisode`) into `content.js` via marker-based replacement.
 3. Compiles browser-specific manifest files.
 4. Packages the final ready-to-publish extension artifacts for Chrome and Firefox into the `dist/` directory.
 

docs/TRANSLATION.md

@@ -69,19 +69,19 @@ The website hosts the landing page and invitation bridge.
      "LANG_TOGGLE_TEXT": "EN"
    }
    ```
-5. If creating a **brand new language**, register it in `website/build.js` by adding it to the `languages` array.
+5. If creating a **brand new language**, register it in `website/build.cjs` by adding it to the `languages` array.
 
 ### Step 4: Verify Locally
 Ensure your JSON files are valid and all keys match the English baseline. Open your terminal in the KoalaSync root folder and run:
 ```bash
 # Tests the extension locales for missing keys or syntax errors
-node scripts/test-locales.js
+node scripts/test-locales.cjs
 
 # Tests the website locales for missing keys or syntax errors
 node scripts/test-website-locales.mjs
 
 # Builds the website with your new translations
-node website/build.js
+node website/build.cjs
 ```
 *Note: If you receive any errors about missing keys or `TODO` placeholders, please fix them before submitting.*
 

extension/README.md

@@ -6,9 +6,9 @@ A Manifest V3 Browser Extension (Chrome & Firefox) for synchronized video playba
 - **Manifest V3**: Optimized Service Worker architecture with session persistence.
 - **Pure Vanilla JS**: No external dependencies or heavy libraries.
 - **Smart Peer IDs**: Hexadecimal IDs combined with customizable Usernames for easy identification.
-- **Dual Heartbeat**: Advanced session tracking (Background) and video synchronization (Content) to prevent ghost sessions.
+- **On-Demand Connection**: The service worker only maintains a WebSocket connection while you're in a room. No persistent background connections — privacy-first architecture. Based on `connectIntent` flag that gates all reconnect attempts.
 - **Live Diagnostics**: Built-in "Dev" tab for real-time video state debugging (ReadyState, CurrentTime, etc.).
-- **Dynamic i18n (Multi-Language)**: Fully localized in 6 languages (`en`, `de`, `fr`, `es`, `pt-BR`, `ru`) with auto-detected fallback and dynamic on-the-fly language selectors.
+- **Dynamic i18n (Multi-Language)**: Fully localized in 13 languages (`en`, `de`, `fr`, `es`, `it`, `pl`, `tr`, `nl`, `ja`, `ko`, `pt-BR`, `pt`, `ru`) with auto-detected fallback and dynamic on-the-fly language selectors.
 
 ## Tab Overview
 1. **Room**: Manage connections, view active peers, and share invitation links.
@@ -26,7 +26,7 @@ KoalaSync requires `<all_urls>` permission to detect and interact with video ele
 ## Installation
 1. **Prepare Extension**: From the repository root, run:
    ```bash
-   node scripts/build-extension.js
+   npm run build:extension
    ```
 2. Open Chrome and go to `chrome://extensions/`.
 3. Enable **Developer mode** (top right).
@@ -35,7 +35,7 @@ KoalaSync requires `<all_urls>` permission to detect and interact with video ele
 ## Development
 If you modify `shared/constants.js`, you must synchronize the changes by running the build script from the root:
 ```bash
-node scripts/build-extension.js
+npm run build:extension
 ```
 This ensures that the `extension/shared` folder is updated with the latest protocol constants.
 

extension/background.js

@@ -4,8 +4,14 @@ import { loadLocale, getMessage, getSystemLanguage } from './i18n.js';
 import { sameEpisode } from './episode-utils.js';
 
 // --- Uninstall URL Initialization ---
-chrome.runtime.onInstalled.addListener((details) => {
-    if (details.reason === 'install' || details.reason === 'update') {
+let uninstallURLInitPromise = null;
+
+async function initUninstallURL() {
+    if (uninstallURLInitPromise) {
+        return uninstallURLInitPromise;
+    }
+    
+    uninstallURLInitPromise = (async () => {
         // --- UNINSTALL_URL_INJECT_START ---
         const UNINSTALL_URL = ""; // Populated during build
         const BROWSER_TYPE = "unknown";
@@ -13,8 +19,24 @@ chrome.runtime.onInstalled.addListener((details) => {
         
         if (UNINSTALL_URL && UNINSTALL_URL.trim() !== '') {
             try {
+                if (typeof chrome === 'undefined' || !chrome.storage || !chrome.storage.local) {
+                    console.warn("Storage API not available, skipping uninstall URL token generation");
+                    return;
+                }
+
+                const data = await chrome.storage.local.get("koalaByeToken");
+                let token = data?.koalaByeToken;
+                
+                if (!token) {
+                    token = (typeof self.crypto !== 'undefined' && typeof self.crypto.randomUUID === 'function')
+                        ? self.crypto.randomUUID()
+                        : Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+                    await chrome.storage.local.set({ koalaByeToken: token });
+                }
+
                 const url = new URL(UNINSTALL_URL);
                 url.searchParams.set("browser", BROWSER_TYPE);
+                url.searchParams.set("t", token);
                 
                 const runtimeAPI = typeof browser !== 'undefined' ? browser.runtime : chrome.runtime;
                 if (runtimeAPI && runtimeAPI.setUninstallURL) {
@@ -25,12 +47,24 @@ chrome.runtime.onInstalled.addListener((details) => {
                     }
                 }
             } catch (err) {
-                console.error("Invalid uninstall URL provided:", err);
+                console.error("Failed to initialize uninstall URL:", err);
             }
         }
+    })();
+
+    return uninstallURLInitPromise;
+}
+
+chrome.runtime.onInstalled.addListener((details) => {
+    if (details.reason === 'install' || details.reason === 'update') {
+        initUninstallURL();
     }
 });
 
+chrome.runtime.onStartup.addListener(() => {
+    initUninstallURL();
+});
+
 // --- State Management ---
 let socket = null;
 let isConnecting = false;

extension/manifest.base.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "default_locale": "en",
   "name": "KoalaSync",
-  "version": "2.3.2",
+  "version": "2.4.1",
   "description": "Synchronize video playback on YouTube, Netflix, Emby, Jellyfin, and any HTML5 site in real-time with friends.",
   "permissions": [
     "storage",

extension/popup.html

@@ -659,14 +659,14 @@
         <div id="onboarding-card" style="position:fixed; background:var(--card); padding:16px 20px; border-radius:12px; width:280px; box-shadow:0 8px 32px rgba(0,0,0,0.5); z-index:1002; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-sizing:border-box; border:1px solid #334155; opacity:0; transform: scale(0.9); display:none;">
             <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
                 <span id="onboarding-icon" style="font-size:24px;">👋</span>
-                <span id="onboarding-step-indicator" style="font-size:10px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:0.5px;">Step 1 of 3</span>
+                <span id="onboarding-step-indicator" style="font-size:10px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:0.5px;">Step 1 of 5</span>
             </div>
             <h2 id="onboarding-title" style="color:var(--accent); margin:0 0 6px; font-size:14px; font-weight:700; text-align:left;">Welcome to KoalaSync!</h2>
             <p id="onboarding-text" style="color:var(--text-muted); font-size:12px; margin:0 0 16px; line-height:1.4; text-align:left;">Let's get you started.</p>
             
             <!-- Progress Bar -->
             <div id="onboarding-progress-container" style="height:4px; background:#334155; border-radius:2px; margin-bottom:16px; overflow:hidden;">
-                <div id="onboarding-progress-bar" style="height:100%; width:33%; background:var(--accent); transition:width 0.3s ease;"></div>
+                <div id="onboarding-progress-bar" style="height:100%; width:20%; background:var(--accent); transition:width 0.3s ease;"></div>
             </div>
             
             <div style="display:flex; gap:8px; justify-content:space-between; align-items:center;">

extension/popup.js

@@ -503,6 +503,24 @@ function renderEmpty(container, type) {
     wrapper.appendChild(iconDiv);
     wrapper.appendChild(titleDiv);
     wrapper.appendChild(hintDiv);
+
+    // "No peers yet" — turn the hint into a one-click action so the user can
+    // immediately copy and share the invite link instead of hunting for it.
+    if (type === 'peers' && elements.inviteLink && elements.inviteLink.value) {
+        const copyBtn = document.createElement('button');
+        copyBtn.type = 'button';
+        copyBtn.className = 'primary';
+        copyBtn.style.cssText = 'display:inline-block; width:auto; margin-top:12px; padding:6px 14px; font-size:11px;';
+        copyBtn.textContent = getMessage('BTN_COPY_INVITE');
+        copyBtn.title = getMessage('BTN_COPY_INVITE_TOOLTIP');
+        copyBtn.addEventListener('click', () => {
+            navigator.clipboard.writeText(elements.inviteLink.value)
+                .then(() => showToast(getMessage('TOAST_INVITE_COPIED'), 'success', 2000))
+                .catch(() => showToast(getMessage('TOAST_COPY_FAILED'), 'error'));
+        });
+        wrapper.appendChild(copyBtn);
+    }
+
     container.replaceChildren(wrapper);
 }
 
@@ -2119,9 +2137,9 @@ const onboardingSteps = [
     { 
         icon: '👋', 
         get title() { return getMessage('ONBOARDING_1_TITLE'); }, 
-        get text() { return getMessage('ONBOARDING_1_TEXT'); }, 
+        get text() { return getMessage('ONBOARDING_1_TEXT'); },
         targetTab: 'tab-room',
-        targetSelector: 'h1'
+        targetSelector: null
     },
     { 
         icon: '🏠', 
@@ -2140,9 +2158,16 @@ const onboardingSteps = [
     { 
         icon: '⚙️', 
         get title() { return getMessage('ONBOARDING_4_TITLE'); }, 
-        get text() { return getMessage('ONBOARDING_4_TEXT'); }, 
+        get text() { return getMessage('ONBOARDING_4_TEXT'); },
         targetTab: 'tab-settings',
         targetSelector: '#username'
+    },
+    {
+        icon: '🍿',
+        get title() { return getMessage('ONBOARDING_5_TITLE'); },
+        get text() { return getMessage('ONBOARDING_5_TEXT'); },
+        targetTab: 'tab-room',
+        targetSelector: null
     }
 ];
 
@@ -2316,7 +2341,7 @@ function renderOnboardingStep() {
     }
 
     onboardingTimeout = setTimeout(() => {
-        const targetEl = document.querySelector(step.targetSelector);
+        const targetEl = step.targetSelector ? document.querySelector(step.targetSelector) : null;
         if (targetEl && targetEl.offsetParent !== null) {
             positionSpotlightAndCard(targetEl);
         } else {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "koalasync",
-  "version": "2.3.2",
+  "version": "2.4.1",
   "description": "KoalaSync Build Scripts",
   "private": true,
   "type": "module",

scripts/README.md

@@ -2,7 +2,7 @@
 
 This directory contains utility scripts for the KoalaSync development workflow.
 
-## build-extension.js
+## build-extension.cjs
 
 The primary build tool for KoalaSync. This Node.js script automates two critical tasks:
 
@@ -15,7 +15,7 @@ The primary build tool for KoalaSync. This Node.js script automates two critical
 From the **repository root**, run:
 
 ```bash
-node scripts/build-extension.js
+node scripts/build-extension.cjs
 ```
 
 ### Why this script exists

scripts/build-extension.cjs

@@ -77,7 +77,7 @@ function copyExtensionFiles(targetDir, browserName) {
         const eStart = '// --- SHARED_EVENTS_INJECT_START ---';
         const eEnd = '// --- SHARED_EVENTS_INJECT_END ---';
         const ePattern = new RegExp(`${eStart}[\\s\\S]+?${eEnd}`);
-        const eRep = `${eStart}\n    // This block is automatically updated by /scripts/build-extension.js\n    const EVENTS = ${eventsObject};\n    ${eEnd}`;
+        const eRep = `${eStart}\n    // This block is automatically updated by /scripts/build-extension.cjs\n    const EVENTS = ${eventsObject};\n    ${eEnd}`;
         
         if (ePattern.test(content)) {
           content = content.replace(ePattern, eRep);
@@ -108,7 +108,7 @@ function copyExtensionFiles(targetDir, browserName) {
             .replace(/^\/\*\*[\s\S]*?\*\/\s*/m, '')
             .replace(/export function /g, 'function ')
             .trim();
-          const euRep = `${euStart}\n    // This block is automatically updated by /scripts/build-extension.js\n${stripped.split('\n').map(l => '    ' + l).join('\n')}\n    ${euEnd}`;
+          const euRep = `${euStart}\n    // This block is automatically updated by /scripts/build-extension.cjs\n${stripped.split('\n').map(l => '    ' + l).join('\n')}\n    ${euEnd}`;
           if (euPattern.test(content)) {
             content = content.replace(euPattern, euRep);
           } else {
@@ -127,7 +127,7 @@ function copyExtensionFiles(targetDir, browserName) {
         const uPattern = new RegExp(`${uStart}[\\s\\S]+?${uEnd}`);
         const placeholderUrl = "https://bye.koalastuff.net/c/camp_99ztjRVbK1BNN2RU";
         
-        let uRep = `${uStart}\n        // This block is automatically updated by /scripts/build-extension.js\n`;
+        let uRep = `${uStart}\n        // This block is automatically updated by /scripts/build-extension.cjs\n`;
         uRep += `        const UNINSTALL_URL = "${placeholderUrl}";\n`;
         uRep += `        const BROWSER_TYPE = "${browserName}";\n`;
         uRep += `        ${uEnd}`;

shared/README.md

@@ -4,7 +4,7 @@ This directory contains constants and protocol definitions used by both the exte
 
 ## Syncing with the Extension
 > [!IMPORTANT]
-> Every time this directory is modified, you must run `node scripts/build-extension.js` to keep the extension's copy up to date.
+> Every time this directory is modified, you must run `node scripts/build-extension.cjs` to keep the extension's copy up to date.
 
 Because Browser Extensions (Manifest V3) cannot load files outside their root directory, all files in this directory must be copied to `extension/shared/` whenever they are modified. The build script handles this automatically.
 

shared/blacklist.js

@@ -2,7 +2,7 @@
  * blacklist.js
  * 
  * ⚠️ WARNING: This is the SINGLE SOURCE OF TRUTH.
- * If you edit this file, you MUST run: node scripts/build-extension.js
+ * If you edit this file, you MUST run: node scripts/build-extension.cjs
  * to propagate changes to the extension and relay server.
  * 
  * Domains to be filtered out from the tab selection dropdown to reduce "noise".

shared/constants.js

@@ -2,12 +2,12 @@
  * KoalaSync Shared Constants & Protocol Definitions
  * 
  * ⚠️ WARNING: This is the SINGLE SOURCE OF TRUTH.
- * If you edit this file, you MUST run: node scripts/build-extension.js
+ * If you edit this file, you MUST run: node scripts/build-extension.cjs
  * to propagate changes to the extension and relay server.
  */
 
 export const PROTOCOL_VERSION = "1.0.0";
-export const APP_VERSION = "1.9.0";
+export const APP_VERSION = "2.4.1";
 
 export const OFFICIAL_SERVER_URL = 'wss://syncserver.koalastuff.net';
 export const OFFICIAL_LANDING_PAGE_URL = 'https://sync.koalastuff.net';

shared/names.js

@@ -2,7 +2,7 @@
  * KoalaSync Shared Name Generation & Emoji Mapping
  *
  * ⚠️ WARNING: This is the SINGLE SOURCE OF TRUTH.
- * If you edit this file, you MUST run: node scripts/build-extension.js
+ * If you edit this file, you MUST run: node scripts/build-extension.cjs
  * to propagate changes to the extension.
  *
  * The emoji map covers every animal/creature that has a Unicode emoji.

website/README.md

@@ -5,7 +5,7 @@ This directory contains the KoalaSync website. It serves a dual purpose: it is b
 ## Core Roles
 
 ### 1. Marketing & Onboarding
-Provides a premium, multi-language (EN/DE/FR/ES/PT-BR/RU) overview of features, setup instructions, and direct links to the extension stores.
+Provides a premium, multi-language (EN/DE/FR/ES/PT-BR/RU/IT/PL/TR/NL/JA/KO/PT) overview of features, setup instructions, and direct links to the extension stores.
 
 ### 2. The Invitation Bridge (`join.html`)
 The website handles incoming invitation links. When a user clicks a link like `sync.koalastuff.net/join.html#join:roomID:pass`, the website:
@@ -16,8 +16,8 @@ The website handles incoming invitation links. When a user clicks a link like `s
 ## Architecture
 
 The website is 100% **Static HTML, CSS, and JS**. 
-- **Static i18n Compiler**: The site uses a lightweight, zero-dependency Node.js compiler (`build.js`) to parse dictionary files inside `/locales/` against a single source-of-truth template (`template.html`), outputting the fully deployable static folder to `/www/`.
-- **Build-time Minification**: `build.js` automatically minifies CSS and JS during compilation using a built-in state-machine tokenizer (no npm dependencies). Source files are written unminified (`style.css`, `app.js`, `lang-init.js`) — always edit source files, never the generated `.min.*` files in `www/`.
+- **Static i18n Compiler**: The site uses a lightweight, zero-dependency Node.js compiler (`build.cjs`) to parse dictionary files inside `/locales/` against a single source-of-truth template (`template.html`), outputting the fully deployable static folder to `/www/`.
+- **Build-time Minification**: `build.cjs` automatically minifies CSS and JS during compilation using a built-in state-machine tokenizer (no npm dependencies). Source files are written unminified (`style.css`, `app.js`, `lang-init.js`) — always edit source files, never the generated `.min.*` files in `www/`.
 - **Zero Backend**: No Node.js, PHP, or databases are required to host the compiled website.
 - **Zero Tracking**: All assets (fonts, icons) are self-hosted to prevent third-party tracking.
 - **Responsive**: Fully optimized for mobile with a native-feel hamburger menu.
@@ -62,7 +62,7 @@ sync.koalastuff.net {
 
 1. Run the compilation script from the repository root to generate the `/website/www` folder:
    ```bash
-   node website/build.js
+   node website/build.cjs
    ```
 2. Serve the compiled `/www` directory using any local development server:
    ```bash
@@ -71,4 +71,4 @@ sync.koalastuff.net {
 3. To test the invitation flow locally, navigate to `http://localhost:5000/join.html#join:test-room:test-pass`.
 
 > [!IMPORTANT]
-> **Never edit files inside `website/www/` directly.** This directory is fully auto-generated by `build.js`. Always edit source files (`template.html`, `style.css`, `app.js`, `lang-init.js`, locale files in `locales/`) and re-run `node website/build.js` to apply changes. CSS and JS are output as `style.min.css`, `app.min.js`, and `lang-init.min.js` — the `.min.*` naming makes it visually obvious these are build artifacts. Editing minified files in `www/` will result in lost changes on the next build.
+> **Never edit files inside `website/www/` directly.** This directory is fully auto-generated by `build.cjs`. Always edit source files (`template.html`, `style.css`, `app.js`, `lang-init.js`, locale files in `locales/`) and re-run `node website/build.cjs` to apply changes. CSS and JS are output as `style.min.css`, `app.min.js`, and `lang-init.min.js` — the `.min.*` naming makes it visually obvious these are build artifacts. Editing minified files in `www/` will result in lost changes on the next build.

website/app.js

@@ -19,31 +19,39 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Scroll Reveal Logic (IntersectionObserver for performance)
     const revealElements = document.querySelectorAll('[data-reveal]');
-    
-    const revealObserver = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                entry.target.classList.add('revealed');
-                revealObserver.unobserve(entry.target);
-            }
-        });
-    }, {
-        rootMargin: '0px 0px -150px 0px',
-        threshold: 0.1
-    });
 
-    revealElements.forEach(el => revealObserver.observe(el));
+    if ('IntersectionObserver' in window) {
+        const revealObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('revealed');
+                    revealObserver.unobserve(entry.target);
+                }
+            });
+        }, {
+            rootMargin: '0px 0px -150px 0px',
+            threshold: 0.1
+        });
+
+        revealElements.forEach(el => revealObserver.observe(el));
+    } else {
+        // Fallback: without IntersectionObserver support, reveal everything
+        // immediately so no content can ever stay hidden.
+        revealElements.forEach(el => el.classList.add('revealed'));
+    }
 
     // Auto-update URL hash as user scrolls through sections
     // (preserves position across language switches)
-    const sectionObserver = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                history.replaceState(null, null, '#' + entry.target.id);
-            }
-        });
-    }, { threshold: 0.3 });
-    document.querySelectorAll('section[id], header[id]').forEach(el => sectionObserver.observe(el));
+    if ('IntersectionObserver' in window) {
+        const sectionObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    history.replaceState(null, null, '#' + entry.target.id);
+                }
+            });
+        }, { threshold: 0.3 });
+        document.querySelectorAll('section[id], header[id]').forEach(el => sectionObserver.observe(el));
+    }
 
     // Navbar scroll effect
     const nav = document.querySelector('nav');

website/privacy.html

@@ -113,6 +113,9 @@
                 <p>
                     To enable cross-device synchronization, the KoalaSync browser extension temporarily captures data from the currently active video tab (e.g., tab title, media metadata like the video title, and playback state). This data is exclusively sent to other participants in your room for synchronization. We explicitly <strong>do not read, store, or transmit your general browsing history</strong>.
                 </p>
+                <p style="margin-top: 0.5rem;">
+                    The extension only connects to the relay server while you are actively in a room. No persistent background connection is maintained — your IP address is not exposed to the server when you are not using the extension.
+                </p>
             </section>
 
             <section>

website/sitemap.xml

@@ -3,31 +3,31 @@
         xmlns:xhtml="http://www.w3.org/1999/xhtml">
   <url>
     <loc>https://sync.koalastuff.net/imprint</loc>
-    <lastmod>2026-06-16</lastmod>
+    <lastmod>2026-06-19</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.3</priority>
   </url>
   <url>
     <loc>https://sync.koalastuff.net/privacy</loc>
-    <lastmod>2026-06-16</lastmod>
+    <lastmod>2026-06-19</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.3</priority>
   </url>
   <url>
     <loc>https://sync.koalastuff.net/de/impressum</loc>
-    <lastmod>2026-06-16</lastmod>
+    <lastmod>2026-06-19</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.3</priority>
   </url>
   <url>
     <loc>https://sync.koalastuff.net/de/datenschutz</loc>
-    <lastmod>2026-06-16</lastmod>
+    <lastmod>2026-06-19</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.3</priority>
   </url>
   <url>
     <loc>https://sync.koalastuff.net/</loc>
-    <lastmod>2026-06-16</lastmod>
+    <lastmod>2026-06-19</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -47,7 +47,7 @@
   </url>
   <url>
     <loc>https://sync.koalastuff.net/de/</loc>
-    <lastmod>2026-06-16</lastmod>
+    <lastmod>2026-06-19</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -67,7 +67,7 @@
   </url>
   <url>
     <loc>https://sync.koalastuff.net/fr/</loc>
-    <lastmod>2026-06-16</lastmod>
+    <lastmod>2026-06-19</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -87,7 +87,7 @@
   </url>
   <url>
     <loc>https://sync.koalastuff.net/es/</loc>
-    <lastmod>2026-06-16</lastmod>
+    <lastmod>2026-06-19</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -107,7 +107,7 @@
   </url>
   <url>
     <loc>https://sync.koalastuff.net/pt-BR/</loc>
-    <lastmod>2026-06-16</lastmod>
+    <lastmod>2026-06-19</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -127,7 +127,7 @@
   </url>
   <url>
     <loc>https://sync.koalastuff.net/ru/</loc>
-    <lastmod>2026-06-16</lastmod>
+    <lastmod>2026-06-19</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -147,7 +147,7 @@
   </url>
   <url>
     <loc>https://sync.koalastuff.net/it/</loc>
-    <lastmod>2026-06-16</lastmod>
+    <lastmod>2026-06-19</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -167,7 +167,7 @@
   </url>
   <url>
     <loc>https://sync.koalastuff.net/pl/</loc>
-    <lastmod>2026-06-16</lastmod>
+    <lastmod>2026-06-19</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -187,7 +187,7 @@
   </url>
   <url>
     <loc>https://sync.koalastuff.net/tr/</loc>
-    <lastmod>2026-06-16</lastmod>
+    <lastmod>2026-06-19</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -207,7 +207,7 @@
   </url>
   <url>
     <loc>https://sync.koalastuff.net/nl/</loc>
-    <lastmod>2026-06-16</lastmod>
+    <lastmod>2026-06-19</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -227,7 +227,7 @@
   </url>
   <url>
     <loc>https://sync.koalastuff.net/ja/</loc>
-    <lastmod>2026-06-16</lastmod>
+    <lastmod>2026-06-19</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -247,7 +247,7 @@
   </url>
   <url>
     <loc>https://sync.koalastuff.net/ko/</loc>
-    <lastmod>2026-06-16</lastmod>
+    <lastmod>2026-06-19</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>
@@ -267,7 +267,7 @@
   </url>
   <url>
     <loc>https://sync.koalastuff.net/pt/</loc>
-    <lastmod>2026-06-16</lastmod>
+    <lastmod>2026-06-19</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.8</priority>
     <xhtml:link rel="alternate" hreflang="en" href="https://sync.koalastuff.net/"/>

website/style.css

@@ -358,7 +358,8 @@ nav {
 }
 
 .extension-mockup {
-    width: 320px;
+    width: 100%;
+    max-width: 320px;
     height: 520px;
     background: #0f172a;
     border-radius: 20px;
@@ -1900,7 +1901,7 @@ footer {
 
 @media (max-width: 768px) {
     .hero-grid, .step {
-        grid-template-columns: 1fr;
+        grid-template-columns: minmax(0, 1fr);
         text-align: center;
     }
     .hero-text h1 {
@@ -1931,7 +1932,7 @@ footer {
         margin-left: auto;
     }
     .hamburger {
-        display: none !important;
+        display: inline-flex !important;
     }
     nav .container {
         padding: 0 0.5rem;
@@ -1966,6 +1967,21 @@ footer {
     }
 }
 
+/* Extra-narrow phones: make sure logo, language picker and the menu button
+   never crowd each other in the header (kept comfortable down to ~320px). */
+@media (max-width: 380px) {
+    nav .container {
+        padding: 0 0.4rem;
+    }
+    .nav-right {
+        gap: 0.35rem;
+    }
+    .logo-area {
+        font-size: 1rem;
+        gap: 0.4rem;
+    }
+}
+
 /* --- Language Toggle --- */
 html.lang-de [lang="en"] {
     display: none !important;
@@ -2450,13 +2466,115 @@ html:not(.lang-de) [lang="de"] {
 }
 
 @media (max-width: 768px) {
-    .comparison-table th, 
+    .comparison-table th,
     .comparison-table td {
         padding: 1rem;
         font-size: 0.85rem;
     }
+}
+
+/* On phones the 3-column table is turned into stacked cards so there is
+   no horizontal scrolling — one card per feature, KoalaSync above Teleparty. */
+@media (max-width: 600px) {
+    .comparison-table-wrapper {
+        overflow-x: visible;
+        background: transparent;
+        border: none;
+        box-shadow: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+        margin-top: 0;
+    }
+
+    .comparison-table {
+        display: block;
+        font-size: 0.95rem;
+    }
+
+    /* Visually hide the header row but keep it for screen readers. */
+    .comparison-table thead {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+
+    .comparison-table tbody,
+    .comparison-table tr,
+    .comparison-table td {
+        display: block;
+        width: 100%;
+    }
+
+    .comparison-table tbody tr {
+        background: rgba(30, 41, 59, 0.35);
+        border: 1px solid var(--glass-border);
+        border-radius: 14px;
+        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
+        margin-bottom: 1rem;
+        overflow: hidden;
+    }
+
+    .comparison-table tbody tr:last-child {
+        margin-bottom: 0;
+    }
+
+    .comparison-table td {
+        padding: 0.85rem 1.1rem;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    }
+
+    .comparison-table tbody tr td:last-child {
+        border-bottom: none;
+    }
+
+    /* Feature name acts as the card header. */
+    .comparison-table td.feat-name {
+        background: rgba(15, 23, 42, 0.55);
+        padding: 0.9rem 1.1rem;
+    }
+
+    /* Room is back on the card, so show the description again. */
     .feat-desc {
-        display: none;
+        display: block;
+        margin-top: 0.15rem;
+    }
+
+    /* Label each value cell with the product it belongs to. */
+    .comparison-table td.check,
+    .comparison-table td.cross {
+        display: flex;
+        align-items: baseline;
+        gap: 0.4rem;
+    }
+
+    .comparison-table td.check::before,
+    .comparison-table td.cross::before {
+        flex: 0 0 5.5rem;
+        font-size: 0.7rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        color: var(--text-muted);
+        opacity: 0.85;
+    }
+
+    .comparison-table td.check::before {
+        content: "KoalaSync";
+    }
+
+    .comparison-table td.cross::before {
+        content: "Teleparty";
+    }
+
+    /* Keep the KoalaSync row subtly highlighted, like on desktop. */
+    .comparison-table td.check.highlight {
+        background: rgba(99, 102, 241, 0.08);
     }
 }
 

website/template.html

@@ -102,7 +102,7 @@
         "priceCurrency": "EUR"
       },
       "description": "Watch Netflix, YouTube, Twitch, Jellyfin, Emby and almost any HTML5 video in perfect sync with friends. Open source, privacy-first, free.",
-      "softwareVersion": "2.3.2",
+      "softwareVersion": "2.4.1",
       "license": "https://opensource.org/licenses/MIT",
       "sameAs": "https://github.com/Shik3i/KoalaSync",
       "image": "https://sync.koalastuff.net/assets/NewLogoIcon.webp",
@@ -183,6 +183,13 @@
       ]
     }
     </script>
+    <noscript>
+        <!-- Without JS the scroll-reveal observer never runs, so make all
+             reveal-animated content visible by default. -->
+        <style>
+            [data-reveal] { opacity: 1 !important; transform: none !important; }
+        </style>
+    </noscript>
 </head>
 <body>
 

website/version.json

@@ -1,4 +1,4 @@
 {
-  "version": "2.3.2",
-  "date": "2026-06-16T02:29:41Z"
+  "version": "2.4.1",
+  "date": "2026-06-19T08:50:27Z"
 }