fix: ru.json duplicate AUDIO_BACK, add dupe detection to locale tests

Add support badges and audio processing

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+# These are supported funding model platforms
+ko_fi: koaladev

README.md

@@ -12,10 +12,10 @@
   <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"><a href="CHANGELOG.md"><b>New v2.1.1 Release!</b> — See what's changed</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.2.0 Release!</b> — See what's changed</a></p>
+
 ### 🌟 Why KoalaSync?
 
 *   **🛡️ Security-First**: Volatile RAM-based relay with built-in brute-force protection and zero-persistence architecture. We keep no logs of your sessions or synchronizations. *We don't track you. We only track our server* (relying on the [aggregated, anonymous, non-personal metrics](https://syncserver.koalastuff.net/health) provided under `/health`).
@@ -33,6 +33,7 @@
 - **Dual Heartbeat Architecture**: Robust session tracking that prevents ghost rooms and stale connections.
 - **Efficient Relay**: Minimal overhead WebSocket message forwarding.
 - **Seamless Invitations**: Smart links that automatically configure server and room credentials for your friends.
+- **Audio Compressor**: Built-in Web Audio API dynamic range compression with presets (Recommended, Dynamic Range, Vocal Enhancement, Smooth) and fully customizable controls.
 
 ---
 
@@ -81,14 +82,14 @@ Deploy your own private relay server using our official image:
 docker pull ghcr.io/shik3i/koalasync:latest
 
 # Or use our example compose file
-cp docker-compose.caddy.example.yml docker-compose.yml
+cp examples/docker-compose.caddy.example.yml docker-compose.yml
 docker-compose up -d
 ```
-The server will be available at `ws://localhost:3000`. See [Docker network compose](docker-compose.caddy.example.yml) or [Static IP compose](docker-compose.ip.example.yml) for ready-to-use Docker Compose files.
+The server will be available at `ws://localhost:3000`. See [Docker network compose](examples/docker-compose.caddy.example.yml) or [Static IP compose](examples/docker-compose.ip.example.yml) for ready-to-use Docker Compose files.
 
 To connect your extension to a self-hosted server, open the popup → **Room** tab → select **Custom Server** → enter your server's WebSocket URL (e.g., `ws://localhost:3000`).
 
-> **⚠️ Note**: `ws://` only works for `localhost`. If you deploy to a real domain, you **must** use `wss://` (e.g., `wss://sync.yourdomain.com`). This requires a TLS-terminating reverse proxy (e.g., Caddy, Nginx, or Traefik) in front of the relay server. See [Caddyfile.example](Caddyfile.example) for a production-ready template.
+> **⚠️ Note**: `ws://` only works for `localhost`. If you deploy to a real domain, you **must** use `wss://` (e.g., `wss://sync.yourdomain.com`). This requires a TLS-terminating reverse proxy (e.g., Caddy, Nginx, or Traefik) in front of the relay server. See [Caddyfile.example](examples/Caddyfile.example) for a production-ready template.
 
 To verify your relay is reachable from outside, visit `https://your-domain.com` in a browser — it should return `{"status":"online","service":"KoalaSync Relay"}`.
 
@@ -106,19 +107,21 @@ Both the official KoalaSync website and the **v2.0 Browser Extension** feature f
 
 ### 📖 Documentation & Links
 
-- **[CHANGELOG.md](CHANGELOG.md)**: Full version history for the extension and relay server.
-- **[TESTED_SERVICES.md](TESTED_SERVICES.md)**: Detailed compatibility matrix of tested streaming platforms and known limitations.
+- **[CHANGELOG.md](docs/CHANGELOG.md)**: Full version history for the extension and relay server.
+- **[TESTED_SERVICES.md](docs/TESTED_SERVICES.md)**: Detailed compatibility matrix of tested streaming platforms and known limitations.
 - **[TRANSLATION.md](website/TRANSLATION.md)**: Translation and localization guide for contributors.
-- **[PRIVACY.md](PRIVACY.md)**: Data Handling and Privacy Policy.
+- **[PRIVACY.md](docs/PRIVACY.md)**: Data Handling and Privacy Policy.
 - **[CONTRIBUTING.md](CONTRIBUTING.md)**: How to help make KoalaSync better.
 - **[CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)**: Our community standards and expectations.
 - **[HOW_IT_WORKS.md](docs/HOW_IT_WORKS.md)**: Step-by-step walkthrough of the complete user flow.
 - **[ARCHITECTURE.md](docs/ARCHITECTURE.md)**: Deep-dive into the two-phase sync and heartbeat logic.
 - **[SECURITY.md](SECURITY.md)**: Disclosure policy and security practices.
-- **[Caddyfile.example](Caddyfile.example)**: Production Caddy configuration for website and relay.
+- **[Caddyfile.example](examples/Caddyfile.example)**: Production Caddy configuration for website and relay.
 
 ---
 
 <div align="center">
   <sub>Built with ❤️ by <a href="https://github.com/Shik3i">Shik3i</a>. KoalaSync is Open Source under the <a href="LICENSE">MIT License</a>.</sub>
+  <sub><a href="https://ko-fi.com/koaladev"><img src="https://img.shields.io/badge/Ko--Fi-Support-FF5E5B?logo=ko-fi&logoColor=white" alt="Ko-Fi"></a></sub>
+  <sub><a href="https://gitgem.org/github/Shik3i/KoalaSync"><img src="https://gitgem.org/api/badge/github/Shik3i/KoalaSync.svg" alt="GitGem Badge" /></a></sub>
 </div>

assets/StoreAssets/StoreDescription.md

@@ -1,33 +1,37 @@
-Synchronize video playback on YouTube, Netflix, Emby, Jellyfin, and any HTML5 site in real-time with friends.
-
 KoalaSync: The Privacy-First Watch Party Extension
 
-Synchronize movies, series, and videos in real-time with friends.
-100% free, secure, and no account required.
+Private watch parties for Emby, Jellyfin, Plex, Netflix, YouTube & more. No account needed. Real-time sync. Supports 13 languages. 100% free.
 
-Whether you're binge-watching Netflix, streaming from your own self-hosted Emby, Jellyfin, or Plex servers, or watching on virtually any other website with a video player — KoalaSync keeps everyone perfectly in sync. Lightweight, open-source, and built for absolute data sovereignty.
+Whether you're binge-watching Netflix, streaming from your own self-hosted Emby, Jellyfin, or Plex servers, or watching on virtually any other website with a video player — KoalaSync keeps everyone perfectly in sync.
+Lightweight, open-source, and built for absolute data sovereignty with a clean, minimalist UI.
 
-✨ CORE FEATURES
-• No Account Needed: Just create a room and share the link. No emails, no passwords, no hassle. A random nickname is assigned automatically, or pick your own.
-• Universal HTML5 Sync: Flawlessly synchronizes play, pause, and seeking on Netflix, Jellyfin, Emby, YouTube, and almost any website hosting a standard HTML5 <video> tag.
-• Smart Binge-Watching (Auto-Sync): When a new episode loads, KoalaSync automatically pauses playback in a smart lobby until everyone's video is ready. No spoilers, no one left behind.
-• One-Click Invitations: Generate a smart invite link. Once clicked, the extension instantly configures room credentials and server settings for your guests.
-• Zero-Latency Protocol: Powered by a custom WebSocket architecture designed for real-time coordination without buffering loops.
+✨ CORE FEATURES 
 
-🛡️ UNCOMPROMISING PRIVACY
-No data collection. No compromises.
-• 100% Anonymous: Zero tracking, zero analytics, zero telemetry.
-• Ready Out-Of-The-Box: No technical knowledge needed. Install and start watching immediately using the official public server.
-• RAM-Only Public Server: The official relay server operates entirely in volatile RAM. No databases, no logs, no watch history — nothing persists.
-• Self-Hostable: Take total control by deploying a private relay server in seconds via Docker. Optional, never required.
+ • No Account Needed: Just create a room and share the link. No emails, no passwords, no hassle. A random nickname is assigned automatically, or pick your own.
+ • Universal HTML5 Sync: Flawlessly synchronizes play, pause, and seeking on Netflix, Jellyfin, Emby, YouTube, and almost any website hosting a standard HTML5 <video> tag.
+ • Smart Binge-Watching (Auto-Sync): When a new episode loads, KoalaSync automatically pauses playback in a smart lobby until everyone's video is ready. No spoilers, no one left behind.
+ • Fully Localized: Enjoy a native experience with a user interface fully translated into 13 different languages.
+ • One-Click Invitations: Generate a smart invite link. Once clicked, the extension instantly configures room credentials and server settings for your guests.
+ • Zero-Latency Protocol: Powered by a custom WebSocket architecture designed for real-time coordination without buffering loops.
 
-🚀 HOW IT WORKS
-  1. Install KoalaSync and click "Create Room" to spin up a secure lobby.
-  2. Copy the invite link and send it to your friends.
-  3. Open your favorite streaming site and set the video tab as the active target.
-  4. Press play — everyone stays perfectly in sync.
+🛡️ UNCOMPROMISING PRIVACY & SECURITY 
 
-💻 OPEN SOURCE
-KoalaSync was built by a solo developer who needed a fast, secure way to watch movies with friends — and builds tools worth using. The code is fully transparent under the MIT license: audit it, fork it, improve it. Found a bug or have a feature idea? Open an issue on GitHub. Contributions and code reviews are always welcome.
-• Website: https://sync.koalastuff.net
-• GitHub: https://github.com/Shik3i/KoalaSync
+ No data collection. No compromises.
+ • 100% Anonymous: Zero tracking, zero analytics, zero telemetry.
+ • Ready Out-Of-The-Box: No technical knowledge needed. Install and start watching immediately using the official public server.
+ • RAM-Only Public Server: The official relay server operates entirely in volatile RAM. No databases, no logs, no watch history — nothing persists. It also features built-in rate-limiting and brute-force protection to prevent room-id spamming.
+ • Self-Hostable: Take total control by deploying a private relay server in seconds via Docker. Optional, never required.
+
+🚀 HOW IT WORKS 
+
+ 1. Install KoalaSync and click "Create Room" to spin up a secure lobby.
+ 2. Copy the invite link and send it to your friends.
+ 3. Open your favorite streaming site and set the video tab as the active target.
+ 4. Press play — everyone stays perfectly in sync.
+
+💻 OPEN SOURCE 
+
+ KoalaSync was built by a solo developer who needed a fast, secure way to watch movies with friends — and builds tools worth using. The code is fully transparent under the MIT license: audit it, fork it, improve it. Found a bug or have a feature idea? Open an issue on GitHub. Contributions and code reviews are always welcome.
+
+ • Website: https://sync.koalastuff.net
+ • GitHub: https://github.com/Shik3i/KoalaSync

docs/AI_INIT.md

@@ -34,14 +34,14 @@ KoalaSync is a specialized tool for **synchronized video playback** across multi
 
 ## 3. Mandatory Reading
 Before touching any code, you MUST read the following documents in order:
-1. [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md) – Detailed communication flows, Dual Heartbeat, and two-phase sync protocol.
-2. [extension/README.md](extension/README.md) – Extension components, tab structure, and loading process.
-3. [docs/SYNC_GUIDE.md](docs/SYNC_GUIDE.md) – Protocol constants and synchronization requirements.
+1. [ARCHITECTURE.md](ARCHITECTURE.md) – Detailed communication flows, Dual Heartbeat, and two-phase sync protocol.
+2. [extension/README.md](../extension/README.md) – Extension components, tab structure, and loading process.
+3. [SYNC_GUIDE.md](SYNC_GUIDE.md) – Protocol constants and synchronization requirements.
 
 ## 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.js`) 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
@@ -100,6 +100,15 @@ The following features are critical and must not be removed or fundamentally alt
 
 ## 10. Common Workflows
 
+## CRITICAL: Git & Release Rules
+
+- **NEVER** push, commit, tag, or release without explicit user instruction.
+- **NEVER** retag or force-push without explicit instruction.
+- **NEVER** create tags for documentation-only or README changes.
+- **NEVER** run `git push`, `git tag`, `git commit` unless the user says "push", "commit", or "tag".
+- Only the user decides when to commit, push, tag, or release.
+- Ask before any git write operation.
+
 ### ⚠️ Pre-Session Git Sync (MANDATORY)
 Before starting any task, committing, or pushing, you **MUST** run `git pull --rebase` to ensure your local branch is up-to-date with `origin/main`. CI pipelines and other agents may push commits concurrently. Skipping this step will cause merge conflicts and rejected pushes.
 

docs/CHANGELOG.md

@@ -4,10 +4,32 @@ All notable changes to the KoalaSync browser extension and relay server.
 
 ---
 
-## [v2.1.1] — 2026-06-04
+## [v2.2.0] — 2026-06-08
+
+### Added
+- **Web Audio API Compressor**: Built-in audio dynamic range compression with four presets (Recommended, Dynamic Range, Vocal Enhancement, Smooth) and fully customizable sliders (threshold, ratio, knee, attack, release, makeup gain). Uses dry/wet crossfade (40ms linear ramp) to avoid clicks. Configured via the new Audio Options page accessible from the Settings tab.
+- **Audio Options Page** (`audio-options.html`): Dedicated settings page with master toggle, compressor preset selector, real-time custom sliders, and equalizer placeholder. Dark theme matching the popup design.
+- **Feature Hint System**: Generic `dismissedHints` array in sync storage for announcing new features. First hint highlights the Audio Options entry in Settings. Extensible for future features.
 
 ### Changed
-- Added progressive enhancement using `appearance: base-select` to support styling of country flag emojis in expanded language selectors on newer Chromium browsers.
+- **Ko-Fi Support Links**: Static footer badges on the Settings and Status tabs linking to the developer's support page. README and website footer updated with Ko-Fi badge.
+
+### Fixed
+- **Portuguese (PT) locale**: Removed Italian contamination — "sincronizzazione" → "sincronização", "tempo reale" → "tempo real", "Link di Invito" → "Link de Convite", "Sair della Sala" → "Sair da Sala".
+- **Korean locale**: Fixed broken character in `HOWTO_STEP_2_TEXT` (`클rip보드` → `클립보드`).
+- **Website COMP_FEAT_6_KOALA**: Normalized from inconsistent "6 Languages" to "13 Languages" across all locale files (en, de, es, fr, pt-BR, ru).
+- **Debug report showing wrong logs**: Fixed `logs.slice(-50)` and `history.slice(-20)` in the "Copy Debug Report" feature. Since `addLog()` and `addToHistory()` use `unshift` (inserting entries at index 0), the arrays are ordered newest-first. `slice(-N)` took the N **oldest** entries instead of the N **newest**. Changed to `slice(0, N).reverse()` to correctly include the most recent logs and display them chronologically.
+
+---
+
+## [v2.1.2] — 2026-06-06
+
+### Fixed
+- **Episode guard regex**: Fixed `isDifferentEpisode()` not detecting episode changes when the MediaSession title uses `Sxx:Exx` format (colon separator, as used by Jellyfin/Emby). The regex character class `[\s\-\.]` was replaced with `[^a-zA-Z0-9]` to match **any** non-alphanumeric separator between season and episode numbers, preventing play/pause/seek commands from a different episode leaking through and incorrectly manipulating a peer's playback.
+- **Per-device storage isolation**: Migrated `username`, `roomId`, `password`, `serverUrl`, and `useCustomServer` from `chrome.storage.sync` (synced across Google account) to `chrome.storage.local` (per-device). This prevents the extension from automatically joining the same room with the same name on multiple devices. Existing user data is migrated silently on first run; all preferences (`filterNoise`, `autoSyncNextEpisode`, etc.) remain synced.
+
+### Changed
+- Added one-time migration fallback in `getSettings()` and popup `init()` to copy existing user settings from `storage.sync` to `storage.local` on first launch after the update.
 
 ---
 

docs/ROADMAP.md

@@ -1,22 +1,14 @@
 # KoalaSync Roadmap
 
-Dieses Dokument erfasst zukünftige technische Pläne und Optimierungen für das KoalaSync-System.
+This document tracks future technical plans and optimizations for the KoalaSync system.
 
 ---
 
-## Geplante Optimierungen & Technische Roadmap
+## Planned Optimizations & Technical Roadmap
 
-### 1. Behebung des synchronen Sortierungs-Flaschenhalses bei Auth-Failure LRU-Eviction
-* **Kategorie**: Performance / DoS-Prävention
-* **Hintergrund**: Der Server schützt Räume vor Brute-Force-Angriffen durch die Nachverfolgung fehlerhafter Anmeldeversuche (`failedAuthAttempts` Map). Bei Erreichen des Limits von 50.000 Einträgen wird ein Bereinigungsverfahren gestartet, das die gesamte Map in ein Array konvertiert und dieses per `Array.from().sort()` sortiert.
-* **Problem**: Dies blockiert den Node.js-Main-Thread für mehrere Millisekunden und stellt einen potenziellen Denial-of-Service-Vektor (DoS) dar, wenn ein Angreifer gezielt Fehlversuche spamt.
-* **Geplante Lösung**: 
-  - Umstellung auf eine echte, $O(1)$-basierte LRU-Cache-Datenstruktur (z. B. doppelt verkettete Liste in Kombination mit einer Map).
-  - Alternativ: Ein vereinfachtes zeitbasiertes Ablauf-Verfahren oder ein schrittweises Löschen von Segmenten (Chunk-Eviction), um Blockaden des Main-Threads vollständig auszuschließen.
-
-### 2. Aufteilung großer JavaScript-Dateien (> 800 Zeilen) in kleinere Module
-* **Kategorie**: Wartbarkeit / AI-Kontext-Optimierung
-* **Hintergrund**: Einige Kern-Dateien wie `background.js` und `popup.js` sind stark angewachsen und überschreiten 800 Zeilen. Dies erschwert das manuelle Debugging und verbraucht unnötig viel Kontextfenster bei AI-Modellen.
-* **Geplante Lösung**: 
-  - Strukturierte Aufteilung der Logik in separate, fokussierte Module (z. B. UI-Renderer, Message-Router, Storage-Manager, Socket-Client).
-  - Nutzung von ES-Modulen zur sauberen Strukturierung und besseren Wiederverwendbarkeit.
+### 1. Split large JavaScript files (> 800 lines) into smaller modules
+* **Category**: Maintainability / AI Context Optimization
+* **Background**: Core files like `background.js` and `popup.js` have grown large and exceed 800 lines. This makes manual debugging harder and wastes context window space for AI models.
+* **Planned solution**:
+  - Structurally split logic into separate focused modules (e.g., UI Renderer, Message Router, Storage Manager, Socket Client).
+  - Use ES modules for clean separation and better reusability.

examples/json_exporter.example.yml

@@ -1,5 +1,5 @@
 # Prometheus Community JSON Exporter Configuration Example
-# File: json_exporter.example.yml
+# File: examples/json_exporter.example.yml
 #
 # Use this configuration to map KoalaSync admin health metrics (JSON)
 # to native Prometheus metrics.

extension/audio-options.css

@@ -0,0 +1,247 @@
+:root {
+    --bg: #0f172a;
+    --card: #1e293b;
+    --panel: #172033;
+    --accent: #6366f1;
+    --accent-hover: #818cf8;
+    --text: #f8fafc;
+    --text-muted: #94a3b8;
+    --border: #334155;
+    --radius: 8px;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+    background: var(--bg);
+    color: var(--text);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    font-size: 14px;
+}
+
+.page-shell {
+    width: min(760px, calc(100vw - 32px));
+    margin: 0 auto;
+    padding: 32px 0;
+}
+
+.page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+    margin-bottom: 18px;
+}
+
+.back-link {
+    display: inline-block;
+    color: var(--text-muted);
+    text-decoration: none;
+    font-size: 12px;
+    margin-bottom: 6px;
+    transition: color 0.2s;
+}
+.back-link:hover {
+    color: var(--accent);
+}
+
+.eyebrow {
+    margin: 0 0 4px;
+    color: var(--text-muted);
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+h1,
+h2,
+p {
+    margin: 0;
+}
+
+h1 {
+    color: var(--accent-hover);
+    font-size: 28px;
+    font-weight: 800;
+}
+
+h2 {
+    font-size: 16px;
+}
+
+.panel {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 20px;
+    margin-bottom: 16px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+
+.muted-panel {
+    color: var(--text-muted);
+}
+
+.section-heading,
+.master-toggle,
+.inline-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+.master-toggle,
+.inline-toggle {
+    color: var(--text-muted);
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
+.preset-group {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
+    gap: 10px;
+    margin: 18px 0;
+}
+
+.preset-card {
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    color: var(--text);
+    cursor: pointer;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+.preset-card:hover {
+    border-color: rgba(99, 102, 241, 0.4);
+}
+
+.preset-card:has(input:checked) {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35);
+}
+
+.preset-card input {
+    accent-color: var(--accent);
+}
+
+.custom-grid {
+    display: grid;
+    gap: 12px;
+    padding: 16px;
+    background: rgba(15, 23, 42, 0.58);
+    border: 1px solid rgba(148, 163, 184, 0.16);
+    border-radius: var(--radius);
+    transition: opacity 0.3s;
+}
+
+.control-row {
+    display: grid;
+    grid-template-columns: 110px minmax(160px, 1fr) 78px 30px;
+    align-items: center;
+    gap: 10px;
+}
+
+.control-row label {
+    color: var(--text-muted);
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
+input[type="range"] {
+    width: 100%;
+    accent-color: var(--accent);
+}
+
+input[type="number"] {
+    width: 100%;
+    padding: 8px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    color: var(--text);
+    font: inherit;
+    transition: border-color 0.2s;
+}
+input[type="number"]:focus {
+    border-color: var(--accent);
+    outline: none;
+}
+
+.unit {
+    color: var(--text-muted);
+    font-size: 12px;
+}
+
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 38px;
+    height: 22px;
+    flex: 0 0 auto;
+}
+
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    inset: 0;
+    background-color: #334155;
+    transition: .3s;
+    border-radius: 22px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 16px;
+    width: 16px;
+    left: 3px;
+    bottom: 3px;
+    background-color: #94a3b8;
+    transition: .3s;
+    border-radius: 50%;
+}
+
+input:checked + .slider {
+    background-color: var(--accent);
+}
+
+input:checked + .slider:before {
+    transform: translateX(16px);
+    background-color: white;
+}
+
+@media (max-width: 620px) {
+    .page-header,
+    .section-heading {
+        align-items: flex-start;
+        flex-direction: column;
+    }
+
+    .control-row {
+        grid-template-columns: 1fr 74px 28px;
+    }
+
+    .control-row label {
+        grid-column: 1 / -1;
+    }
+}

extension/audio-options.html

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>KoalaSync Audio Settings</title>
+    <link rel="stylesheet" href="audio-options.css">
+</head>
+<body>
+    <main class="page-shell">
+        <header class="page-header">
+            <div>
+                <a id="backLink" href="#" class="back-link" data-i18n="AUDIO_BACK">← Back</a>
+                <p class="eyebrow">KoalaSync</p>
+                <h1 data-i18n="AUDIO_PAGE_TITLE">Audio Settings</h1>
+            </div>
+            <label class="master-toggle">
+                <span data-i18n="AUDIO_MASTER_TOGGLE">Audio Processing</span>
+                <span class="toggle-switch">
+                    <input type="checkbox" id="audioEnabled">
+                    <span class="slider"></span>
+                </span>
+            </label>
+        </header>
+
+        <section class="panel">
+            <div class="section-heading">
+                <h2 data-i18n="AUDIO_COMPRESSOR">Compressor</h2>
+                <label class="inline-toggle">
+                    <span data-i18n="AUDIO_COMPRESSOR_ENABLE">Enabled</span>
+                    <span class="toggle-switch">
+                        <input type="checkbox" id="compressorEnabled">
+                        <span class="slider"></span>
+                    </span>
+                </label>
+            </div>
+
+            <div class="preset-group" role="radiogroup" aria-label="Compressor preset">
+                <label class="preset-card">
+                    <input type="radio" name="preset" value="recommended">
+                    <span data-i18n="AUDIO_PRESET_RECOMMENDED">Recommended</span>
+                </label>
+                <label class="preset-card">
+                    <input type="radio" name="preset" value="dynamicRange">
+                    <span data-i18n="AUDIO_PRESET_DYNAMIC_RANGE">Dynamic Range</span>
+                </label>
+                <label class="preset-card">
+                    <input type="radio" name="preset" value="vocalEnhancement">
+                    <span data-i18n="AUDIO_PRESET_VOCAL_ENHANCEMENT">Vocal Enhancement</span>
+                </label>
+                <label class="preset-card">
+                    <input type="radio" name="preset" value="smooth">
+                    <span data-i18n="AUDIO_PRESET_SMOOTH">Smooth</span>
+                </label>
+                <label class="preset-card">
+                    <input type="radio" name="preset" value="custom">
+                    <span data-i18n="AUDIO_PRESET_CUSTOM">Custom</span>
+                </label>
+            </div>
+
+            <div class="custom-grid" id="customControls">
+                <div class="control-row" data-param="threshold">
+                    <label data-i18n="AUDIO_PARAM_THRESHOLD">Threshold</label>
+                    <input type="range" min="-60" max="0" step="1">
+                    <input type="number" min="-60" max="0" step="1">
+                    <span class="unit">dB</span>
+                </div>
+                <div class="control-row" data-param="knee">
+                    <label data-i18n="AUDIO_PARAM_KNEE">Knee</label>
+                    <input type="range" min="0" max="40" step="1">
+                    <input type="number" min="0" max="40" step="1">
+                    <span class="unit">dB</span>
+                </div>
+                <div class="control-row" data-param="ratio">
+                    <label data-i18n="AUDIO_PARAM_RATIO">Ratio</label>
+                    <input type="range" min="1" max="20" step="0.5">
+                    <input type="number" min="1" max="20" step="0.5">
+                    <span class="unit">:1</span>
+                </div>
+                <div class="control-row" data-param="attack">
+                    <label data-i18n="AUDIO_PARAM_ATTACK">Attack</label>
+                    <input type="range" min="0" max="1" step="0.001">
+                    <input type="number" min="0" max="1000" step="1" data-ms-input="true">
+                    <span class="unit">ms</span>
+                </div>
+                <div class="control-row" data-param="release">
+                    <label data-i18n="AUDIO_PARAM_RELEASE">Release</label>
+                    <input type="range" min="0" max="1" step="0.005">
+                    <input type="number" min="0" max="1000" step="5" data-ms-input="true">
+                    <span class="unit">ms</span>
+                </div>
+            </div>
+        </section>
+
+        <section class="panel muted-panel">
+            <div class="section-heading">
+                <h2 data-i18n="AUDIO_EQUALIZER">Equalizer</h2>
+            </div>
+            <p data-i18n="AUDIO_COMING_SOON">Coming soon</p>
+        </section>
+    </main>
+
+    <script src="audio-options.js" type="module"></script>
+</body>
+</html>

extension/audio-options.js

@@ -0,0 +1,196 @@
+import { loadLocale, translateDOM, getSystemLanguage } from './i18n.js';
+
+const PRESETS = {
+    recommended: { threshold: -24, ratio: 8, attack: 0.010, release: 0.300, knee: 15 },
+    dynamicRange: { threshold: -18, ratio: 4, attack: 0.020, release: 0.200, knee: 10 },
+    vocalEnhancement: { threshold: -12, ratio: 3, attack: 0.015, release: 0.150, knee: 5 },
+    smooth: { threshold: -30, ratio: 1.5, attack: 0.030, release: 0.250, knee: 20 },
+    custom: { threshold: -24, ratio: 12, attack: 0.003, release: 0.250, knee: 30 }
+};
+
+const DEFAULT_AUDIO_SETTINGS = {
+    enabled: false,
+    compressor: {
+        enabled: false,
+        preset: 'recommended',
+        customParams: { ...PRESETS.custom }
+    }
+};
+const PARAM_LIMITS = {
+    threshold: { min: -60, max: 0 },
+    knee: { min: 0, max: 40 },
+    ratio: { min: 1, max: 20 },
+    attack: { min: 0, max: 1 },
+    release: { min: 0, max: 1 }
+};
+
+const elements = {
+    audioEnabled: document.getElementById('audioEnabled'),
+    compressorEnabled: document.getElementById('compressorEnabled'),
+    presetInputs: Array.from(document.querySelectorAll('input[name="preset"]')),
+    controlRows: Array.from(document.querySelectorAll('.control-row')),
+    backLink: document.getElementById('backLink')
+};
+
+let saveTimer = null;
+let isRendering = false;
+
+function cloneDefaultSettings() {
+    return JSON.parse(JSON.stringify(DEFAULT_AUDIO_SETTINGS));
+}
+
+let currentSettings = cloneDefaultSettings();
+
+function mergeAudioSettings(settings = {}) {
+    const safeSettings = settings && typeof settings === 'object' ? settings : {};
+    const defaults = cloneDefaultSettings();
+    return {
+        ...defaults,
+        ...safeSettings,
+        compressor: {
+            ...defaults.compressor,
+            ...(safeSettings.compressor || {}),
+            customParams: {
+                ...defaults.compressor.customParams,
+                ...(safeSettings.compressor?.customParams || {})
+            }
+        }
+    };
+}
+
+function debounceSave() {
+    if (saveTimer) clearTimeout(saveTimer);
+    saveTimer = setTimeout(() => {
+        chrome.storage.local.set({ audioSettings: currentSettings });
+    }, 40);
+}
+
+function getParamValue(param, value, isMsInput = false) {
+    const parsed = Number(value);
+    const candidate = Number.isFinite(parsed)
+        ? (isMsInput ? parsed / 1000 : parsed)
+        : currentSettings.compressor.customParams[param];
+    const limits = PARAM_LIMITS[param];
+    if (!limits) return candidate;
+    return Math.min(limits.max, Math.max(limits.min, candidate));
+}
+
+function formatNumber(value, param, isMsInput = false) {
+    if (isMsInput) return Math.round(value * 1000);
+    if (param === 'ratio') return Number(value).toFixed(1).replace(/\.0$/, '');
+    return value;
+}
+
+function render() {
+    isRendering = true;
+    elements.audioEnabled.checked = currentSettings.enabled === true;
+    elements.compressorEnabled.checked = currentSettings.compressor.enabled === true;
+
+    const selectedPreset = currentSettings.compressor.preset || 'recommended';
+    elements.presetInputs.forEach(input => {
+        input.checked = input.value === selectedPreset;
+    });
+
+    const params = selectedPreset === 'custom'
+        ? currentSettings.compressor.customParams
+        : PRESETS[selectedPreset] || PRESETS.recommended;
+
+    elements.controlRows.forEach(row => {
+        const param = row.dataset.param;
+        const range = row.querySelector('input[type="range"]');
+        const number = row.querySelector('input[type="number"]');
+        const value = params[param];
+        range.value = value;
+        number.value = formatNumber(value, param, number.dataset.msInput === 'true');
+    });
+    isRendering = false;
+}
+
+function setPreset(preset) {
+    currentSettings.compressor.preset = preset;
+    if (preset === 'custom') {
+        currentSettings.compressor.customParams = {
+            ...PRESETS.custom,
+            ...currentSettings.compressor.customParams
+        };
+    }
+    render();
+    debounceSave();
+}
+
+function setCustomParam(param, value) {
+    currentSettings.compressor.preset = 'custom';
+    currentSettings.compressor.customParams[param] = getParamValue(param, value);
+    render();
+    debounceSave();
+}
+
+async function init() {
+    let audioData = (await chrome.storage.local.get(['audioSettings'])).audioSettings;
+    const syncData = await chrome.storage.sync.get(['audioSettings', 'locale']);
+    if (!audioData && syncData.audioSettings) {
+        audioData = syncData.audioSettings;
+        await chrome.storage.local.set({ audioSettings: audioData });
+    }
+    const lang = syncData.locale || getSystemLanguage();
+    await loadLocale(lang);
+    translateDOM();
+
+    currentSettings = mergeAudioSettings(audioData);
+    render();
+}
+
+elements.audioEnabled.addEventListener('change', () => {
+    currentSettings.enabled = elements.audioEnabled.checked;
+    if (currentSettings.enabled && !currentSettings.compressor.enabled) {
+        currentSettings.compressor.enabled = true;
+    }
+    render();
+    debounceSave();
+});
+
+elements.compressorEnabled.addEventListener('change', () => {
+    currentSettings.compressor.enabled = elements.compressorEnabled.checked;
+    if (currentSettings.compressor.enabled) currentSettings.enabled = true;
+    render();
+    debounceSave();
+});
+
+elements.presetInputs.forEach(input => {
+    input.addEventListener('change', () => {
+        if (input.checked) setPreset(input.value);
+    });
+});
+
+elements.controlRows.forEach(row => {
+    const param = row.dataset.param;
+    const range = row.querySelector('input[type="range"]');
+    const number = row.querySelector('input[type="number"]');
+
+    range.addEventListener('input', () => {
+        if (isRendering) return;
+        setCustomParam(param, getParamValue(param, range.value));
+    });
+
+    number.addEventListener('input', () => {
+        if (isRendering) return;
+        setCustomParam(param, getParamValue(param, number.value, number.dataset.msInput === 'true'));
+    });
+});
+
+chrome.storage.onChanged.addListener((changes, area) => {
+    if (area !== 'local' || !changes.audioSettings) return;
+    currentSettings = mergeAudioSettings(changes.audioSettings.newValue);
+    render();
+});
+
+if (elements.backLink) {
+    elements.backLink.addEventListener('click', (e) => {
+        e.preventDefault();
+        window.close();
+    });
+}
+
+init().catch(err => {
+    console.error('[AudioOptions] Failed to initialize:', err);
+});

extension/background.js

@@ -230,35 +230,38 @@ async function getPeerId() {
 }
 
 async function getSettings() {
-    return new Promise((resolve, reject) => {
-        chrome.storage.sync.get(['serverUrl', 'useCustomServer', 'roomId', 'password', 'username'], (data) => {
-            if (chrome.runtime.lastError) {
-                reject(new Error(chrome.runtime.lastError.message));
-                return;
-            }
-            let username = data.username;
-            if (!username) {
-                username = generateUsername();
-                chrome.storage.sync.set({ username }, () => {
-                    resolve({
-                        serverUrl: data.serverUrl || '',
-                        useCustomServer: data.useCustomServer || false,
-                        roomId: data.roomId || '',
-                        password: data.password || '',
-                        username: username
-                    });
-                });
-            } else {
-                resolve({
-                    serverUrl: data.serverUrl || '',
-                    useCustomServer: data.useCustomServer || false,
-                    roomId: data.roomId || '',
-                    password: data.password || '',
-                    username: username
-                });
-            }
+    // Try local (per-device) first, fall back to sync for migration
+    let data = await chrome.storage.local.get(['serverUrl', 'useCustomServer', 'roomId', 'password', 'username']);
+    let migrated = false;
+    if (!data.username) {
+        const syncData = await chrome.storage.sync.get(['serverUrl', 'useCustomServer', 'roomId', 'password', 'username']);
+        if (syncData.username || syncData.roomId) {
+            data = syncData;
+            migrated = true;
+        }
+    }
+    let username = data.username;
+    if (!username) {
+        username = generateUsername();
+    }
+    if (migrated) {
+        await chrome.storage.local.set({ 
+            serverUrl: data.serverUrl || '',
+            useCustomServer: data.useCustomServer || false,
+            roomId: data.roomId || '',
+            password: data.password || '',
+            username
         });
-    });
+    } else if (!data.username) {
+        await chrome.storage.local.set({ username });
+    }
+    return {
+        serverUrl: data.serverUrl || '',
+        useCustomServer: data.useCustomServer || false,
+        roomId: data.roomId || '',
+        password: data.password || '',
+        username
+    };
 }
 
 function addLog(message, type = 'info') {
@@ -382,7 +385,7 @@ async function leaveRoomAfterIdleGrace(reason) {
         lastContentHeartbeatAt: null,
         episodeLobby: null
     }).catch(() => {});
-    await chrome.storage.sync.set({ roomId: '', password: '' }).catch(() => {});
+    await chrome.storage.local.set({ roomId: '', password: '' }).catch(() => {});
     addLog(reason, 'info');
     chrome.runtime.sendMessage({ type: 'PEER_UPDATE', peers: [] }).catch(() => {});
     updateBadgeStatus();
@@ -588,7 +591,7 @@ function updateBadgeStatus() {
 }
 
 function showNotification(senderName, action) {
-    chrome.storage.sync.get(['browserNotifications', 'locale'], async (settings) => {
+    chrome.storage.local.get(['browserNotifications', 'locale'], async (settings) => {
         if (!settings.browserNotifications) return;
 
         const lang = settings.locale || getSystemLanguage();
@@ -761,7 +764,7 @@ function handleServerEvent(event, data) {
             isConnecting = false;
             broadcastConnectionStatus('disconnected');
             addLog(`Server Error: ${data.message}`, 'error');
-            chrome.storage.sync.get(['locale'], async (settings) => {
+            chrome.storage.local.get(['locale'], async (settings) => {
                 const lang = settings.locale || getSystemLanguage();
                 await loadLocale(lang);
                 chrome.notifications.create(`error_${Date.now()}`, {
@@ -1093,7 +1096,7 @@ function cancelEpisodeLobby(reason) {
     };
 
     // Chrome notification on failure (per Q2: only notify on failure)
-    chrome.storage.sync.get(['browserNotifications', 'locale'], async (settings) => {
+    chrome.storage.local.get(['browserNotifications', 'locale'], async (settings) => {
         if (!settings.browserNotifications) return;
 
         const lang = settings.locale || getSystemLanguage();
@@ -1289,6 +1292,27 @@ function leaveOldRoomIfSwitching(newRoomId) {
     }
 }
 
+function resetAudioProcessingInTab(tabId) {
+    if (!tabId) return;
+    chrome.tabs.sendMessage(tabId, { action: 'RESET_AUDIO_PROCESSING' }).catch(() => {});
+}
+
+async function applyAudioSettingsToTab(tabId) {
+    if (!tabId) return;
+    let data = (await chrome.storage.local.get(['audioSettings']));
+    if (!data.audioSettings) {
+        const syncData = await chrome.storage.sync.get(['audioSettings']);
+        if (syncData.audioSettings) {
+            data = syncData;
+            await chrome.storage.local.set({ audioSettings: syncData.audioSettings });
+        }
+    }
+    chrome.tabs.sendMessage(tabId, {
+        action: 'APPLY_AUDIO_SETTINGS',
+        settings: data.audioSettings
+    }).catch(() => {});
+}
+
 // --- Extension Message Listeners ---
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     handleAsyncMessage(message, sender, sendResponse);
@@ -1351,6 +1375,7 @@ async function handleAsyncMessage(message, sender, sendResponse) {
             roomPassword: currentRoom ? currentRoom.password : null
         });
     } else if (message.type === 'LEAVE_ROOM') {
+        resetAudioProcessingInTab(currentTabId);
         emit(EVENTS.LEAVE_ROOM, { peerId });
         currentRoom = null;
         currentTabId = null;
@@ -1396,7 +1421,7 @@ async function handleAsyncMessage(message, sender, sendResponse) {
     } else if (message.type === 'WEB_JOIN_REQUEST') {
         const { roomId: rawRoomId, password, useCustomServer, serverUrl } = message;
         const roomId = typeof rawRoomId === 'string' ? rawRoomId.replace(/[^a-zA-Z0-9\-]/g, '') : '';
-        chrome.storage.sync.set({ 
+        chrome.storage.local.set({ 
             roomId, 
             password,
             useCustomServer: !!useCustomServer,
@@ -1596,6 +1621,7 @@ async function handleAsyncMessage(message, sender, sendResponse) {
             sendResponse({ status: 'ok' });
         });
     } else if (message.type === 'SET_TARGET_TAB') {
+        const previousTabId = currentTabId;
         currentTabId = message.tabId;
         currentTabTitle = message.tabTitle;
         lastContentHeartbeatAt = null;
@@ -1604,14 +1630,21 @@ async function handleAsyncMessage(message, sender, sendResponse) {
         }
         chrome.storage.session.set({ currentTabId, currentTabTitle, roomIdleSince, lastContentHeartbeatAt });
         updateBadgeStatus();
+
+        if (previousTabId && previousTabId !== currentTabId) {
+            resetAudioProcessingInTab(previousTabId);
+        }
         
         if (currentTabId) {
+            const selectedTabId = currentTabId;
             chrome.scripting.executeScript({
-                target: { tabId: currentTabId },
+                target: { tabId: selectedTabId },
                 files: ['content.js']
-            }).catch(err => {
-                addLog(`Failed to inject into tab: ${err.message}`, 'warn');
-            });
+            })
+                .then(() => applyAudioSettingsToTab(selectedTabId))
+                .catch(err => {
+                    addLog(`Failed to inject into tab: ${err.message}`, 'warn');
+                });
         }
         
         sendResponse({ status: 'ok' });
@@ -1635,7 +1668,7 @@ async function handleAsyncMessage(message, sender, sendResponse) {
         }
 
         // Check setting
-        const epSettings = await chrome.storage.sync.get(['autoSyncNextEpisode']);
+        const epSettings = await chrome.storage.local.get(['autoSyncNextEpisode']);
         if (epSettings.autoSyncNextEpisode === false) {
             addLog(`Episode change detected ("${newTitle}") but Auto-Sync is disabled.`, 'info');
             sendResponse({ status: 'disabled' });
@@ -1721,6 +1754,17 @@ async function handleAsyncMessage(message, sender, sendResponse) {
     }
 }
 
+chrome.storage.onChanged.addListener(async (changes, area) => {
+    if (area !== 'sync' || !changes.audioSettings) return;
+    await ensureState();
+    if (!currentTabId) return;
+
+    chrome.tabs.sendMessage(currentTabId, {
+        action: 'APPLY_AUDIO_SETTINGS',
+        settings: changes.audioSettings.newValue
+    }).catch(() => {});
+});
+
 // Tab removal listener
 chrome.tabs.onRemoved.addListener(async (tabId) => {
     await ensureState();
@@ -1772,7 +1816,9 @@ chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, _tab) => {
         chrome.scripting.executeScript({
             target: { tabId },
             files: ['content.js']
-        }).catch(() => {});
+        })
+            .then(() => applyAudioSettingsToTab(tabId))
+            .catch(() => {});
     }
 });
 

extension/content.js

@@ -62,13 +62,35 @@
     let _pendingLobbyTitle = null; // Title we're waiting to match (from remote lobby)
     let lobbyPollTimer = null;
     let _autoSyncEnabled = true; // Cached setting, updated via storage.onChanged
+    let _audioSettings = null;
+    let _audioProcessingAllowed = true;
 
     // Cache the autoSyncNextEpisode setting
-    chrome.storage.sync.get(['autoSyncNextEpisode'], (data) => {
-        _autoSyncEnabled = data.autoSyncNextEpisode !== false; // default: enabled
+    chrome.storage.local.get(['autoSyncNextEpisode', 'audioSettings'], (data) => {
+        if (data.autoSyncNextEpisode === undefined || data.audioSettings === undefined) {
+            chrome.storage.sync.get(['autoSyncNextEpisode', 'audioSettings'], (syncData) => {
+                const migrate = {};
+                if (data.autoSyncNextEpisode === undefined && syncData.autoSyncNextEpisode !== undefined) {
+                    migrate.autoSyncNextEpisode = syncData.autoSyncNextEpisode;
+                }
+                if (data.audioSettings === undefined && syncData.audioSettings !== undefined) {
+                    migrate.audioSettings = syncData.audioSettings;
+                }
+                if (Object.keys(migrate).length) chrome.storage.local.set(migrate);
+                _autoSyncEnabled = syncData.autoSyncNextEpisode !== false;
+                _audioSettings = mergeAudioSettings(syncData.audioSettings);
+                const v = findVideo();
+                if (v && _audioProcessingAllowed) applyAudioSettings(v, _audioSettings);
+            });
+            return;
+        }
+        _autoSyncEnabled = data.autoSyncNextEpisode !== false;
+        _audioSettings = mergeAudioSettings(data.audioSettings);
+        const video = findVideo();
+        if (video && _audioProcessingAllowed) applyAudioSettings(video, _audioSettings);
     });
     chrome.storage.onChanged.addListener((changes, area) => {
-        if (area === 'sync' && changes.autoSyncNextEpisode) {
+        if (area === 'local' && changes.autoSyncNextEpisode) {
             _autoSyncEnabled = changes.autoSyncNextEpisode.newValue !== false;
         }
     });
@@ -114,6 +136,147 @@
         return best;
     }
 
+    // --- Audio Processing Module ---
+    const AUDIO_PRESETS = {
+        recommended: { threshold: -24, ratio: 8, attack: 0.010, release: 0.300, knee: 15 },
+        dynamicRange: { threshold: -18, ratio: 4, attack: 0.020, release: 0.200, knee: 10 },
+        vocalEnhancement: { threshold: -12, ratio: 3, attack: 0.015, release: 0.150, knee: 5 },
+        smooth: { threshold: -30, ratio: 1.5, attack: 0.030, release: 0.250, knee: 20 },
+        custom: { threshold: -24, ratio: 12, attack: 0.003, release: 0.250, knee: 30 }
+    };
+    const DEFAULT_AUDIO_SETTINGS = {
+        enabled: false,
+        compressor: {
+            enabled: false,
+            preset: 'recommended',
+            customParams: { ...AUDIO_PRESETS.custom }
+        }
+    };
+    let audioCtx = null;
+    let audioChains = new WeakMap();
+    let currentAudioVideo = null;
+
+    function mergeAudioSettings(settings = {}) {
+        const safeSettings = settings && typeof settings === 'object' ? settings : {};
+        return {
+            ...DEFAULT_AUDIO_SETTINGS,
+            ...safeSettings,
+            compressor: {
+                ...DEFAULT_AUDIO_SETTINGS.compressor,
+                ...(safeSettings.compressor || {}),
+                customParams: {
+                    ...DEFAULT_AUDIO_SETTINGS.compressor.customParams,
+                    ...(safeSettings.compressor?.customParams || {})
+                }
+            }
+        };
+    }
+
+    function initAudioContext() {
+        if (!audioCtx) {
+            try {
+                const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+                if (!AudioContextClass) return null;
+                audioCtx = new AudioContextClass({ latencyHint: 'interactive' });
+            } catch (e) {
+                reportLog(`Audio Processing unavailable: ${e.message}`, 'warn');
+                return null;
+            }
+        }
+        if (audioCtx.state === 'suspended') {
+            audioCtx.resume().catch(() => {});
+        }
+        return audioCtx;
+    }
+
+    function closeAudioContext() {
+        if (audioCtx) {
+            audioCtx.close().catch(() => {});
+            audioCtx = null;
+        }
+        audioChains = new WeakMap();
+        currentAudioVideo = null;
+    }
+
+    function setupAudioChain(videoEl) {
+        if (audioChains.has(videoEl)) return audioChains.get(videoEl);
+        const ctx = initAudioContext();
+        if (!ctx) return null;
+
+        try {
+            const src = ctx.createMediaElementSource(videoEl);
+            const compressor = ctx.createDynamicsCompressor();
+            const dryGain = ctx.createGain();
+            const compGain = ctx.createGain();
+
+            src.connect(dryGain);
+            dryGain.connect(ctx.destination);
+            src.connect(compressor);
+            compressor.connect(compGain);
+            compGain.connect(ctx.destination);
+
+            dryGain.gain.value = 1;
+            compGain.gain.value = 0;
+
+            const chain = { compressor, dryGain, compGain, active: false };
+            audioChains.set(videoEl, chain);
+            currentAudioVideo = videoEl;
+            return chain;
+        } catch (e) {
+            reportLog(`Audio Processing setup failed: ${e.message}`, 'warn');
+            return null;
+        }
+    }
+
+    function rampGain(node, value, t) {
+        const current = node.gain.value;
+        node.gain.cancelScheduledValues(t);
+        node.gain.setValueAtTime(current, t);
+        node.gain.linearRampToValueAtTime(value, t + 0.04);
+    }
+
+    function applyAudioBypass(videoEl) {
+        const chain = audioChains.get(videoEl);
+        if (!chain || !chain.active) return;
+        const t = chain.dryGain.context.currentTime;
+        rampGain(chain.dryGain, 1, t);
+        rampGain(chain.compGain, 0, t);
+        chain.active = false;
+    }
+
+    function bypassCurrentAudioProcessing() {
+        if (currentAudioVideo) applyAudioBypass(currentAudioVideo);
+    }
+
+    function applyAudioSettings(videoEl, settings) {
+        const mergedSettings = mergeAudioSettings(settings);
+        if (!mergedSettings.enabled || !mergedSettings.compressor?.enabled) {
+            applyAudioBypass(videoEl);
+            return;
+        }
+
+        const chain = setupAudioChain(videoEl);
+        if (!chain) return;
+
+        const cSettings = mergedSettings.compressor;
+        const params = cSettings.preset === 'custom'
+            ? cSettings.customParams
+            : AUDIO_PRESETS[cSettings.preset] || AUDIO_PRESETS.recommended;
+
+        chain.compressor.threshold.value = params.threshold ?? -24;
+        chain.compressor.knee.value = params.knee ?? 15;
+        chain.compressor.ratio.value = params.ratio ?? 8;
+        chain.compressor.attack.value = params.attack ?? 0.010;
+        chain.compressor.release.value = params.release ?? 0.300;
+
+        if (!chain.active) {
+            const t = chain.dryGain.context.currentTime;
+            rampGain(chain.dryGain, 0, t);
+            rampGain(chain.compGain, 1, t);
+            chain.active = true;
+        }
+    }
+
     // --- Episode Auto-Sync: Detection ---
     function getMediaTitle() {
         return (navigator.mediaSession && navigator.mediaSession.metadata)
@@ -126,8 +289,8 @@
     // Returns null if no episode pattern found.
     function extractEpisodeId(title) {
         if (!title || typeof title !== 'string') return null;
-        // S01E01 patterns (with optional spaces, dashes, dots between S and E)
-        const se = title.match(/S(?:eason\s*)?(\d+)[\s\-\.]*E(?:pisode\s*)?(\d+)/i);
+        // S01E01 patterns (with any non-alphanumeric separator between season and E)
+        const se = title.match(/S(?:eason\s*)?(\d+)[^a-zA-Z0-9]*E(?:pisode\s*)?(\d+)/i);
         if (se) return `S${String(se[1]).padStart(2, '0')}E${String(se[2]).padStart(2, '0')}`;
         // "Episode X", "Folge X", "Ep. X", "#X"
         const ep = title.match(/(?:Episode|Folge|Ep\.?|#)\s*(\d+)/i);
@@ -351,6 +514,22 @@
             return true;
         }
 
+        if (message.action === 'APPLY_AUDIO_SETTINGS') {
+            _audioProcessingAllowed = true;
+            _audioSettings = mergeAudioSettings(message.settings);
+            const video = findVideo();
+            if (video) applyAudioSettings(video, _audioSettings);
+            sendResponse({ ok: true });
+            return true;
+        }
+
+        if (message.action === 'RESET_AUDIO_PROCESSING') {
+            _audioProcessingAllowed = false;
+            bypassCurrentAudioProcessing();
+            sendResponse({ ok: true });
+            return true;
+        }
+
         if (message.type === 'SERVER_COMMAND') {
             const { action, payload } = message;
             let actionCompleted = false;
@@ -655,7 +834,10 @@
     });
 
     // Reset on page hide/show (bfcache, tab discard)
-    window.addEventListener('pagehide', () => { pageVisible = false; });
+    window.addEventListener('pagehide', () => {
+        pageVisible = false;
+        closeAudioContext();
+    });
     window.addEventListener('pageshow', (event) => {
         // event.persisted is true ONLY when restored from bfcache, not on initial load
         if (event.persisted && !pageVisible) {
@@ -722,6 +904,9 @@
     function setupListeners() {
         const video = findVideo();
         if (video) {
+            if (currentAudioVideo && currentAudioVideo !== video) {
+                bypassCurrentAudioProcessing();
+            }
             const existing = video._koalaHandlers;
             if (existing) {
                 video.removeEventListener('play', existing.play);
@@ -741,6 +926,8 @@
             if (!lastKnownMediaTitle) {
                 lastKnownMediaTitle = getMediaTitle();
             }
+
+            if (_audioSettings && _audioProcessingAllowed) applyAudioSettings(video, _audioSettings);
         }
     }
 
@@ -755,6 +942,7 @@
         if (!video && lastVideoSrc !== undefined) {
             reportLog('Video element removed from page', 'warn');
             lastVideoSrc = undefined;
+            closeAudioContext();
             return;
         }
 

extension/locales/de.json

@@ -91,6 +91,7 @@
   "BTN_REGEN_ID": "Peer-ID neu generieren",
   "BTN_REGEN_ID_TOOLTIP": "Generiere deine interne ID neu und verbinde dich erneut",
   "REGEN_ID_DESC": "Verwende dies, wenn du Fehler wegen doppelter Identität siehst.",
+  "REGEN_ID_OTHER_ISSUE": "Anderes Problem? Öffne ein GitHub Issue",
   "LABEL_CONN_STATUS": "Verbindungsstatus",
   "LABEL_CONN_STATUS_TOOLTIP": "Aktueller WebSocket-Verbindungsstatus",
   "CONN_STATUS_DISCONNECTED": "Getrennt",
@@ -179,5 +180,30 @@
   "LOBBY_CANCEL_PEERS_LEFT": "Alle anderen Teilnehmer haben den Raum verlassen",
   "LOBBY_CANCEL_TIMEOUT_PEERS_LOAD": "Zeitüberschreitung — nicht alle Teilnehmer haben die Episode geladen",
   "LOBBY_CANCEL_USER": "Vom Benutzer abgebrochen",
-  "NOTIF_ERROR_TITLE": "KoalaSync-Fehler"
+  "NOTIF_ERROR_TITLE": "KoalaSync-Fehler",
+  "FOOTER_SUPPORT": "☕ Kauf mir einen Kaffee",
+  "FOOTER_REVIEW": "★ Bewerten",
+  "FOOTER_SUPPORT_PROMPT": "Gefällt dir KoalaSync? Hinterlasse eine Bewertung!",
+  "LABEL_AUDIO_PROCESSING": "Audio-Verarbeitung",
+  "LABEL_AUDIO_PROCESSING_TOOLTIP": "Wendet Audioeffekte wie Kompression auf die Videowiedergabe an",
+  "AUDIO_OPEN_SETTINGS": "Öffnen",
+  "NEW_FEATURE_AUDIO": "Neu: Audio-Verarbeitung — probiere den Kompressor aus!",
+  "AUDIO_BACK": "← Zurück",
+  "AUDIO_PAGE_TITLE": "Audio-Einstellungen",
+  "AUDIO_MASTER_TOGGLE": "Audio-Verarbeitung",
+  "AUDIO_COMPRESSOR": "Kompressor",
+  "AUDIO_COMPRESSOR_ENABLE": "Aktiviert",
+  "AUDIO_PRESET": "Preset",
+  "AUDIO_PRESET_RECOMMENDED": "Empfohlen",
+  "AUDIO_PRESET_DYNAMIC_RANGE": "Dynamikumfang",
+  "AUDIO_PRESET_VOCAL_ENHANCEMENT": "Sprache verbessern",
+  "AUDIO_PRESET_SMOOTH": "Sanft",
+  "AUDIO_PRESET_CUSTOM": "Benutzerdefiniert",
+  "AUDIO_PARAM_THRESHOLD": "Schwellwert",
+  "AUDIO_PARAM_KNEE": "Knee",
+  "AUDIO_PARAM_RATIO": "Ratio",
+  "AUDIO_PARAM_ATTACK": "Attack",
+  "AUDIO_PARAM_RELEASE": "Release",
+  "AUDIO_EQUALIZER": "Equalizer",
+  "AUDIO_COMING_SOON": "Demnächst"
 }

extension/locales/en.json

@@ -91,6 +91,7 @@
   "BTN_REGEN_ID": "Regenerate Peer ID",
   "BTN_REGEN_ID_TOOLTIP": "Regenerate your internal ID and reconnect",
   "REGEN_ID_DESC": "Use this if you see \"Duplicate Identity\" errors.",
+  "REGEN_ID_OTHER_ISSUE": "Other issue? Open a GitHub Issue",
   "LABEL_CONN_STATUS": "Connection Status",
   "LABEL_CONN_STATUS_TOOLTIP": "Current WebSocket connection state",
   "CONN_STATUS_DISCONNECTED": "Disconnected",
@@ -179,5 +180,30 @@
   "LOBBY_CANCEL_PEERS_LEFT": "All other peers left",
   "LOBBY_CANCEL_TIMEOUT_PEERS_LOAD": "Timeout — not all peers loaded the episode",
   "LOBBY_CANCEL_USER": "Cancelled by user",
-  "NOTIF_ERROR_TITLE": "KoalaSync Error"
+  "NOTIF_ERROR_TITLE": "KoalaSync Error",
+  "FOOTER_SUPPORT": "☕ Buy me a coffee",
+  "FOOTER_REVIEW": "★ Rate us",
+  "FOOTER_SUPPORT_PROMPT": "Enjoying KoalaSync? Leave a review!",
+  "LABEL_AUDIO_PROCESSING": "Audio Processing",
+  "LABEL_AUDIO_PROCESSING_TOOLTIP": "Apply audio effects like compression to video playback",
+  "AUDIO_OPEN_SETTINGS": "Open",
+  "NEW_FEATURE_AUDIO": "New: Audio Processing — try the compressor!",
+  "AUDIO_BACK": "← Back",
+  "AUDIO_PAGE_TITLE": "Audio Settings",
+  "AUDIO_MASTER_TOGGLE": "Audio Processing",
+  "AUDIO_COMPRESSOR": "Compressor",
+  "AUDIO_COMPRESSOR_ENABLE": "Enabled",
+  "AUDIO_PRESET": "Preset",
+  "AUDIO_PRESET_RECOMMENDED": "Recommended",
+  "AUDIO_PRESET_DYNAMIC_RANGE": "Dynamic Range",
+  "AUDIO_PRESET_VOCAL_ENHANCEMENT": "Vocal Enhancement",
+  "AUDIO_PRESET_SMOOTH": "Smooth",
+  "AUDIO_PRESET_CUSTOM": "Custom",
+  "AUDIO_PARAM_THRESHOLD": "Threshold",
+  "AUDIO_PARAM_KNEE": "Knee",
+  "AUDIO_PARAM_RATIO": "Ratio",
+  "AUDIO_PARAM_ATTACK": "Attack",
+  "AUDIO_PARAM_RELEASE": "Release",
+  "AUDIO_EQUALIZER": "Equalizer",
+  "AUDIO_COMING_SOON": "Coming soon"
 }

extension/locales/es.json

@@ -91,6 +91,7 @@
   "BTN_REGEN_ID": "Regenerar ID de participante",
   "BTN_REGEN_ID_TOOLTIP": "Regenerar tu ID interno y volver a conectarte",
   "REGEN_ID_DESC": "Usa esto si ves errores de 'Identidad duplicada'.",
+  "REGEN_ID_OTHER_ISSUE": "¿Otro problema? Abre un Issue en GitHub",
   "LABEL_CONN_STATUS": "Estado de la conexión",
   "LABEL_CONN_STATUS_TOOLTIP": "Estado actual de la conexión WebSocket",
   "CONN_STATUS_DISCONNECTED": "Desconectado",
@@ -179,5 +180,30 @@
   "LOBBY_CANCEL_PEERS_LEFT": "Todos los demás participantes se han ido",
   "LOBBY_CANCEL_TIMEOUT_PEERS_LOAD": "Tiempo de espera agotado: no todos los participantes cargaron el episodio",
   "LOBBY_CANCEL_USER": "Cancelado por el usuario",
-  "NOTIF_ERROR_TITLE": "Error de KoalaSync"
+  "NOTIF_ERROR_TITLE": "Error de KoalaSync",
+  "FOOTER_SUPPORT": "☕ Invítame a un café",
+  "FOOTER_REVIEW": "★ Valorar",
+  "FOOTER_SUPPORT_PROMPT": "¿Te gusta KoalaSync? ¡Deja una reseña!",
+  "LABEL_AUDIO_PROCESSING": "Procesamiento de audio",
+  "LABEL_AUDIO_PROCESSING_TOOLTIP": "Aplica efectos de audio como compresión a la reproducción de video",
+  "AUDIO_OPEN_SETTINGS": "Abrir",
+  "NEW_FEATURE_AUDIO": "Nuevo: Procesamiento de audio — ¡prueba el compresor!",
+  "AUDIO_BACK": "← Volver",
+  "AUDIO_PAGE_TITLE": "Configuración de audio",
+  "AUDIO_MASTER_TOGGLE": "Procesamiento de audio",
+  "AUDIO_COMPRESSOR": "Compresor",
+  "AUDIO_COMPRESSOR_ENABLE": "Activado",
+  "AUDIO_PRESET": "Preajuste",
+  "AUDIO_PRESET_RECOMMENDED": "Recomendado",
+  "AUDIO_PRESET_DYNAMIC_RANGE": "Rango dinámico",
+  "AUDIO_PRESET_VOCAL_ENHANCEMENT": "Mejora de voz",
+  "AUDIO_PRESET_SMOOTH": "Suave",
+  "AUDIO_PRESET_CUSTOM": "Personalizado",
+  "AUDIO_PARAM_THRESHOLD": "Umbral",
+  "AUDIO_PARAM_KNEE": "Knee",
+  "AUDIO_PARAM_RATIO": "Ratio",
+  "AUDIO_PARAM_ATTACK": "Attack",
+  "AUDIO_PARAM_RELEASE": "Release",
+  "AUDIO_EQUALIZER": "Ecualizador",
+  "AUDIO_COMING_SOON": "Próximamente"
 }

extension/locales/fr.json

@@ -91,6 +91,7 @@
   "BTN_REGEN_ID": "Régénérer l'identifiant",
   "BTN_REGEN_ID_TOOLTIP": "Régénérer votre identifiant interne et vous reconnecter",
   "REGEN_ID_DESC": "Utilisez cette option si vous rencontrez des erreurs de 'Double identité'.",
+  "REGEN_ID_OTHER_ISSUE": "Autre problème? Ouvrez un Issue GitHub",
   "LABEL_CONN_STATUS": "Statut de la connexion",
   "LABEL_CONN_STATUS_TOOLTIP": "Statut actuel de la connexion WebSocket",
   "CONN_STATUS_DISCONNECTED": "Déconnecté",
@@ -179,5 +180,30 @@
   "LOBBY_CANCEL_PEERS_LEFT": "Tous les autres membres sont partis",
   "LOBBY_CANCEL_TIMEOUT_PEERS_LOAD": "Délai dépassé — tous les membres n'ont pas chargé l'épisode",
   "LOBBY_CANCEL_USER": "Annulé par l'utilisateur",
-  "NOTIF_ERROR_TITLE": "Erreur KoalaSync"
+  "NOTIF_ERROR_TITLE": "Erreur KoalaSync",
+  "FOOTER_SUPPORT": "☕ Offre-moi un café",
+  "FOOTER_REVIEW": "★ Évaluer",
+  "FOOTER_SUPPORT_PROMPT": "Tu aimes KoalaSync? Laisse un avis!",
+  "LABEL_AUDIO_PROCESSING": "Traitement audio",
+  "LABEL_AUDIO_PROCESSING_TOOLTIP": "Applique des effets audio comme la compression à la lecture vidéo",
+  "AUDIO_OPEN_SETTINGS": "Ouvrir",
+  "NEW_FEATURE_AUDIO": "Nouveau : Traitement audio — essayez le compresseur !",
+  "AUDIO_BACK": "← Retour",
+  "AUDIO_PAGE_TITLE": "Paramètres audio",
+  "AUDIO_MASTER_TOGGLE": "Traitement audio",
+  "AUDIO_COMPRESSOR": "Compresseur",
+  "AUDIO_COMPRESSOR_ENABLE": "Activé",
+  "AUDIO_PRESET": "Préréglage",
+  "AUDIO_PRESET_RECOMMENDED": "Recommandé",
+  "AUDIO_PRESET_DYNAMIC_RANGE": "Plage dynamique",
+  "AUDIO_PRESET_VOCAL_ENHANCEMENT": "Amélioration vocale",
+  "AUDIO_PRESET_SMOOTH": "Douce",
+  "AUDIO_PRESET_CUSTOM": "Personnalisé",
+  "AUDIO_PARAM_THRESHOLD": "Seuil",
+  "AUDIO_PARAM_KNEE": "Knee",
+  "AUDIO_PARAM_RATIO": "Ratio",
+  "AUDIO_PARAM_ATTACK": "Attack",
+  "AUDIO_PARAM_RELEASE": "Release",
+  "AUDIO_EQUALIZER": "Égaliseur",
+  "AUDIO_COMING_SOON": "Bientôt disponible"
 }

extension/locales/it.json

@@ -91,6 +91,7 @@
   "BTN_REGEN_ID": "Rigenera ID Peer",
   "BTN_REGEN_ID_TOOLTIP": "Rigenera il tuo ID interno e riconnettiti",
   "REGEN_ID_DESC": "Usa questo se riscontri errori di \"Identità Duplicata\".",
+  "REGEN_ID_OTHER_ISSUE": "Altro problema? Apri una Issue su GitHub",
   "LABEL_CONN_STATUS": "Stato Connessione",
   "LABEL_CONN_STATUS_TOOLTIP": "Stato corrente della connessione WebSocket",
   "CONN_STATUS_DISCONNECTED": "Disconnesso",
@@ -179,5 +180,30 @@
   "LOBBY_CANCEL_PEERS_LEFT": "Tutti gli altri partecipanti hanno lasciato la stanza",
   "LOBBY_CANCEL_TIMEOUT_PEERS_LOAD": "Timeout — non tutti i partecipanti hanno caricato l'episodio",
   "LOBBY_CANCEL_USER": "Annullato dall'utente",
-  "NOTIF_ERROR_TITLE": "Errore KoalaSync"
-}
+  "NOTIF_ERROR_TITLE": "Errore KoalaSync",
+  "FOOTER_SUPPORT": "☕ Offrimi un caffè",
+  "FOOTER_REVIEW": "★ Valuta",
+  "FOOTER_SUPPORT_PROMPT": "Ti piace KoalaSync? Lascia una recensione!",
+  "LABEL_AUDIO_PROCESSING": "Elaborazione audio",
+  "LABEL_AUDIO_PROCESSING_TOOLTIP": "Applica effetti audio come la compressione alla riproduzione video",
+  "AUDIO_OPEN_SETTINGS": "Apri",
+  "NEW_FEATURE_AUDIO": "Novità: Elaborazione audio — prova il compressore!",
+  "AUDIO_BACK": "← Indietro",
+  "AUDIO_PAGE_TITLE": "Impostazioni audio",
+  "AUDIO_MASTER_TOGGLE": "Elaborazione audio",
+  "AUDIO_COMPRESSOR": "Compressore",
+  "AUDIO_COMPRESSOR_ENABLE": "Attivato",
+  "AUDIO_PRESET": "Preimpostazione",
+  "AUDIO_PRESET_RECOMMENDED": "Consigliato",
+  "AUDIO_PRESET_DYNAMIC_RANGE": "Gamma dinamica",
+  "AUDIO_PRESET_VOCAL_ENHANCEMENT": "Miglioramento vocale",
+  "AUDIO_PRESET_SMOOTH": "Morbido",
+  "AUDIO_PRESET_CUSTOM": "Personalizzato",
+  "AUDIO_PARAM_THRESHOLD": "Soglia",
+  "AUDIO_PARAM_KNEE": "Knee",
+  "AUDIO_PARAM_RATIO": "Ratio",
+  "AUDIO_PARAM_ATTACK": "Attack",
+  "AUDIO_PARAM_RELEASE": "Release",
+  "AUDIO_EQUALIZER": "Equalizzatore",
+  "AUDIO_COMING_SOON": "Prossimamente"
+}

extension/locales/ja.json

@@ -91,6 +91,7 @@
   "BTN_REGEN_ID": "ピアIDの再生成",
   "BTN_REGEN_ID_TOOLTIP": "内部IDを再生成して再接続します",
   "REGEN_ID_DESC": "「Duplicate Identity」（ID重複）エラーが表示される場合に使用します。",
+  "REGEN_ID_OTHER_ISSUE": "他の問題？GitHub Issueを開く",
   "LABEL_CONN_STATUS": "接続状態",
   "LABEL_CONN_STATUS_TOOLTIP": "現在のWebSocket接続状態",
   "CONN_STATUS_DISCONNECTED": "切断されました",
@@ -179,5 +180,30 @@
   "LOBBY_CANCEL_PEERS_LEFT": "他のすべてのメンバーが退室しました",
   "LOBBY_CANCEL_TIMEOUT_PEERS_LOAD": "タイムアウト — 一部のメンバーがエピソードを読み込めませんでした",
   "LOBBY_CANCEL_USER": "ユーザーによってキャンセルされました",
-  "NOTIF_ERROR_TITLE": "KoalaSyncエラー"
-}
+  "NOTIF_ERROR_TITLE": "KoalaSyncエラー",
+  "FOOTER_SUPPORT": "☕ コーヒーをおごってね",
+  "FOOTER_REVIEW": "★ 評価する",
+  "FOOTER_SUPPORT_PROMPT": "KoalaSyncはいかが？レビューを書いてください！",
+  "LABEL_AUDIO_PROCESSING": "オーディオ処理",
+  "LABEL_AUDIO_PROCESSING_TOOLTIP": "動画再生に圧縮などのオーディオエフェクトを適用します",
+  "AUDIO_OPEN_SETTINGS": "開く",
+  "NEW_FEATURE_AUDIO": "新機能: オーディオ処理 — コンプレッサーを試してみよう！",
+  "AUDIO_BACK": "← 戻る",
+  "AUDIO_PAGE_TITLE": "オーディオ設定",
+  "AUDIO_MASTER_TOGGLE": "オーディオ処理",
+  "AUDIO_COMPRESSOR": "コンプレッサー",
+  "AUDIO_COMPRESSOR_ENABLE": "有効",
+  "AUDIO_PRESET": "プリセット",
+  "AUDIO_PRESET_RECOMMENDED": "推奨",
+  "AUDIO_PRESET_DYNAMIC_RANGE": "ダイナミックレンジ",
+  "AUDIO_PRESET_VOCAL_ENHANCEMENT": "ボーカル強調",
+  "AUDIO_PRESET_SMOOTH": "スムース",
+  "AUDIO_PRESET_CUSTOM": "カスタム",
+  "AUDIO_PARAM_THRESHOLD": "スレッショルド",
+  "AUDIO_PARAM_KNEE": "Knee",
+  "AUDIO_PARAM_RATIO": "Ratio",
+  "AUDIO_PARAM_ATTACK": "Attack",
+  "AUDIO_PARAM_RELEASE": "Release",
+  "AUDIO_EQUALIZER": "イコライザー",
+  "AUDIO_COMING_SOON": "近日公開"
+}

extension/locales/ko.json

@@ -91,6 +91,7 @@
   "BTN_REGEN_ID": "피어 ID 재생성",
   "BTN_REGEN_ID_TOOLTIP": "내부 ID를 재생성하고 다시 연결합니다",
   "REGEN_ID_DESC": "\"중복된 ID\" 오류가 발생할 경우에 사용하세요.",
+  "REGEN_ID_OTHER_ISSUE": "다른 문제? GitHub Issue 열기",
   "LABEL_CONN_STATUS": "연결 상태",
   "LABEL_CONN_STATUS_TOOLTIP": "현재 WebSocket 연결 상태",
   "CONN_STATUS_DISCONNECTED": "연결 끊김",
@@ -179,5 +180,30 @@
   "LOBBY_CANCEL_PEERS_LEFT": "다른 모든 피어가 나갔습니다",
   "LOBBY_CANCEL_TIMEOUT_PEERS_LOAD": "시간 초과 — 모든 피어가 에피소드를 로드하지 못했습니다",
   "LOBBY_CANCEL_USER": "사용자에 의해 취소됨",
-  "NOTIF_ERROR_TITLE": "KoalaSync 오류"
-}
+  "NOTIF_ERROR_TITLE": "KoalaSync 오류",
+  "FOOTER_SUPPORT": "☕ 커피 한 잔 사주세요",
+  "FOOTER_REVIEW": "★ 평가하기",
+  "FOOTER_SUPPORT_PROMPT": "KoalaSync가 마음에 드세요? 리뷰를 남겨주세요!",
+  "LABEL_AUDIO_PROCESSING": "오디오 처리",
+  "LABEL_AUDIO_PROCESSING_TOOLTIP": "비디오 재생에 압축과 같은 오디오 효과를 적용합니다",
+  "AUDIO_OPEN_SETTINGS": "열기",
+  "NEW_FEATURE_AUDIO": "신규: 오디오 처리 — 컴프레서를 사용해보세요!",
+  "AUDIO_BACK": "← 뒤로",
+  "AUDIO_PAGE_TITLE": "오디오 설정",
+  "AUDIO_MASTER_TOGGLE": "오디오 처리",
+  "AUDIO_COMPRESSOR": "컴프레서",
+  "AUDIO_COMPRESSOR_ENABLE": "활성화",
+  "AUDIO_PRESET": "프리셋",
+  "AUDIO_PRESET_RECOMMENDED": "추천",
+  "AUDIO_PRESET_DYNAMIC_RANGE": "다이내믹 레인지",
+  "AUDIO_PRESET_VOCAL_ENHANCEMENT": "음성 강화",
+  "AUDIO_PRESET_SMOOTH": "부드럽게",
+  "AUDIO_PRESET_CUSTOM": "사용자 정의",
+  "AUDIO_PARAM_THRESHOLD": "임계값",
+  "AUDIO_PARAM_KNEE": "Knee",
+  "AUDIO_PARAM_RATIO": "Ratio",
+  "AUDIO_PARAM_ATTACK": "Attack",
+  "AUDIO_PARAM_RELEASE": "Release",
+  "AUDIO_EQUALIZER": "이퀄라이저",
+  "AUDIO_COMING_SOON": "출시 예정"
+}

extension/locales/nl.json

@@ -91,6 +91,7 @@
   "BTN_REGEN_ID": "Peer-ID opnieuw genereren",
   "BTN_REGEN_ID_TOOLTIP": "Genereer uw interne ID opnieuw en maak opnieuw verbinding",
   "REGEN_ID_DESC": "Gebruik dit als u fouten ziet over 'Duplicate Identity'.",
+  "REGEN_ID_OTHER_ISSUE": "Ander probleem? Open een GitHub Issue",
   "LABEL_CONN_STATUS": "Verbindingsstatus",
   "LABEL_CONN_STATUS_TOOLTIP": "Huidige WebSocket-verbindingsstatus",
   "CONN_STATUS_DISCONNECTED": "Verbinding verbroken",
@@ -179,5 +180,30 @@
   "LOBBY_CANCEL_PEERS_LEFT": "Alle andere deelnemers zijn vertrokken",
   "LOBBY_CANCEL_TIMEOUT_PEERS_LOAD": "Time-out — niet alle deelnemers hebben de aflevering geladen",
   "LOBBY_CANCEL_USER": "Geannuleerd door gebruiker",
-  "NOTIF_ERROR_TITLE": "KoalaSync-fout"
-}
+  "NOTIF_ERROR_TITLE": "KoalaSync-fout",
+  "FOOTER_SUPPORT": "☕ Trakteer op een koffie",
+  "FOOTER_REVIEW": "★ Beoordelen",
+  "FOOTER_SUPPORT_PROMPT": "Vind je KoalaSync leuk? Laat een review achter!",
+  "LABEL_AUDIO_PROCESSING": "Audioverwerking",
+  "LABEL_AUDIO_PROCESSING_TOOLTIP": "Past audio-effecten zoals compressie toe op video-afspelen",
+  "AUDIO_OPEN_SETTINGS": "Openen",
+  "NEW_FEATURE_AUDIO": "Nieuw: Audioverwerking — probeer de compressor!",
+  "AUDIO_BACK": "← Terug",
+  "AUDIO_PAGE_TITLE": "Audio-instellingen",
+  "AUDIO_MASTER_TOGGLE": "Audioverwerking",
+  "AUDIO_COMPRESSOR": "Compressor",
+  "AUDIO_COMPRESSOR_ENABLE": "Ingeschakeld",
+  "AUDIO_PRESET": "Voorinstelling",
+  "AUDIO_PRESET_RECOMMENDED": "Aanbevolen",
+  "AUDIO_PRESET_DYNAMIC_RANGE": "Dynamisch bereik",
+  "AUDIO_PRESET_VOCAL_ENHANCEMENT": "Stemverbetering",
+  "AUDIO_PRESET_SMOOTH": "Zacht",
+  "AUDIO_PRESET_CUSTOM": "Aangepast",
+  "AUDIO_PARAM_THRESHOLD": "Drempel",
+  "AUDIO_PARAM_KNEE": "Knee",
+  "AUDIO_PARAM_RATIO": "Ratio",
+  "AUDIO_PARAM_ATTACK": "Attack",
+  "AUDIO_PARAM_RELEASE": "Release",
+  "AUDIO_EQUALIZER": "Equalizer",
+  "AUDIO_COMING_SOON": "Binnenkort beschikbaar"
+}

extension/locales/pl.json

@@ -91,6 +91,7 @@
   "BTN_REGEN_ID": "Wygeneruj ponownie ID",
   "BTN_REGEN_ID_TOOLTIP": "Wygeneruj ponownie swój identyfikator i połącz się ponownie",
   "REGEN_ID_DESC": "Użyj tego, jeśli widzisz błędy o zduplikowanej tożsamości.",
+  "REGEN_ID_OTHER_ISSUE": "Inny problem? Otwórz Issue na GitHub",
   "LABEL_CONN_STATUS": "Status połączenia",
   "LABEL_CONN_STATUS_TOOLTIP": "Bieżący stan połączenia WebSocket",
   "CONN_STATUS_DISCONNECTED": "Rozłączono",
@@ -179,5 +180,30 @@
   "LOBBY_CANCEL_PEERS_LEFT": "Wszyscy inni uczestnicy wyszli",
   "LOBBY_CANCEL_TIMEOUT_PEERS_LOAD": "Limit czasu — nie wszyscy uczestnicy załadowali odcinek",
   "LOBBY_CANCEL_USER": "Anulowane przez użytkownika",
-  "NOTIF_ERROR_TITLE": "Błąd KoalaSync"
-}
+  "NOTIF_ERROR_TITLE": "Błąd KoalaSync",
+  "FOOTER_SUPPORT": "☕ Postaw kawę",
+  "FOOTER_REVIEW": "★ Oceń",
+  "FOOTER_SUPPORT_PROMPT": "Podoba Ci się KoalaSync? Zostaw recenzję!",
+  "LABEL_AUDIO_PROCESSING": "Przetwarzanie dźwięku",
+  "LABEL_AUDIO_PROCESSING_TOOLTIP": "Stosuje efekty dźwiękowe, takie jak kompresja, do odtwarzania wideo",
+  "AUDIO_OPEN_SETTINGS": "Otwórz",
+  "NEW_FEATURE_AUDIO": "Nowość: Przetwarzanie dźwięku — wypróbuj kompresor!",
+  "AUDIO_BACK": "← Wstecz",
+  "AUDIO_PAGE_TITLE": "Ustawienia dźwięku",
+  "AUDIO_MASTER_TOGGLE": "Przetwarzanie dźwięku",
+  "AUDIO_COMPRESSOR": "Kompresor",
+  "AUDIO_COMPRESSOR_ENABLE": "Włączony",
+  "AUDIO_PRESET": "Preset",
+  "AUDIO_PRESET_RECOMMENDED": "Zalecany",
+  "AUDIO_PRESET_DYNAMIC_RANGE": "Zakres dynamiki",
+  "AUDIO_PRESET_VOCAL_ENHANCEMENT": "Wzmocnienie głosu",
+  "AUDIO_PRESET_SMOOTH": "Płynny",
+  "AUDIO_PRESET_CUSTOM": "Niestandardowy",
+  "AUDIO_PARAM_THRESHOLD": "Próg",
+  "AUDIO_PARAM_KNEE": "Knee",
+  "AUDIO_PARAM_RATIO": "Ratio",
+  "AUDIO_PARAM_ATTACK": "Attack",
+  "AUDIO_PARAM_RELEASE": "Release",
+  "AUDIO_EQUALIZER": "Korektor",
+  "AUDIO_COMING_SOON": "Wkrótce"
+}

extension/locales/pt-BR.json

@@ -91,6 +91,7 @@
   "BTN_REGEN_ID": "Regenerar ID de participante",
   "BTN_REGEN_ID_TOOLTIP": "Regenerar seu ID interno e conectar novamente",
   "REGEN_ID_DESC": "Use esta opção se notar erros de 'Identidade duplicada'.",
+  "REGEN_ID_OTHER_ISSUE": "Outro problema? Abra um Issue no GitHub",
   "LABEL_CONN_STATUS": "Status da conexão",
   "LABEL_CONN_STATUS_TOOLTIP": "Status atual da conexão WebSocket",
   "CONN_STATUS_DISCONNECTED": "Desconectado",
@@ -179,5 +180,30 @@
   "LOBBY_CANCEL_PEERS_LEFT": "Todos os outros participantes saíram",
   "LOBBY_CANCEL_TIMEOUT_PEERS_LOAD": "Tempo limite esgotado — nem todos os participantes carregaram o episódio",
   "LOBBY_CANCEL_USER": "Cancelado pelo usuário",
-  "NOTIF_ERROR_TITLE": "Erro do KoalaSync"
+  "NOTIF_ERROR_TITLE": "Erro do KoalaSync",
+  "FOOTER_SUPPORT": "☕ Me pague um café",
+  "FOOTER_REVIEW": "★ Avaliar",
+  "FOOTER_SUPPORT_PROMPT": "Gostou do KoalaSync? Deixe uma avaliação!",
+  "LABEL_AUDIO_PROCESSING": "Processamento de áudio",
+  "LABEL_AUDIO_PROCESSING_TOOLTIP": "Aplica efeitos de áudio como compressão à reprodução de vídeo",
+  "AUDIO_OPEN_SETTINGS": "Abrir",
+  "NEW_FEATURE_AUDIO": "Novo: Processamento de áudio — experimente o compressor!",
+  "AUDIO_BACK": "← Voltar",
+  "AUDIO_PAGE_TITLE": "Configurações de áudio",
+  "AUDIO_MASTER_TOGGLE": "Processamento de áudio",
+  "AUDIO_COMPRESSOR": "Compressor",
+  "AUDIO_COMPRESSOR_ENABLE": "Ativado",
+  "AUDIO_PRESET": "Predefinição",
+  "AUDIO_PRESET_RECOMMENDED": "Recomendado",
+  "AUDIO_PRESET_DYNAMIC_RANGE": "Faixa dinâmica",
+  "AUDIO_PRESET_VOCAL_ENHANCEMENT": "Aprimoramento de voz",
+  "AUDIO_PRESET_SMOOTH": "Suave",
+  "AUDIO_PRESET_CUSTOM": "Personalizado",
+  "AUDIO_PARAM_THRESHOLD": "Limiar",
+  "AUDIO_PARAM_KNEE": "Knee",
+  "AUDIO_PARAM_RATIO": "Ratio",
+  "AUDIO_PARAM_ATTACK": "Attack",
+  "AUDIO_PARAM_RELEASE": "Release",
+  "AUDIO_EQUALIZER": "Equalizador",
+  "AUDIO_COMING_SOON": "Em breve"
 }

extension/locales/pt.json

@@ -91,6 +91,7 @@
   "BTN_REGEN_ID": "Regerar ID do Peer",
   "BTN_REGEN_ID_TOOLTIP": "Regerar o seu ID interno e voltar a ligar",
   "REGEN_ID_DESC": "Use isto se vir erros de \"Identidade Duplicata\".",
+  "REGEN_ID_OTHER_ISSUE": "Outro problema? Abra um Issue no GitHub",
   "LABEL_CONN_STATUS": "Estado da Ligação",
   "LABEL_CONN_STATUS_TOOLTIP": "Estado atual da ligação WebSocket",
   "CONN_STATUS_DISCONNECTED": "Desligado",
@@ -179,5 +180,30 @@
   "LOBBY_CANCEL_PEERS_LEFT": "Todos os outros participantes saíram",
   "LOBBY_CANCEL_TIMEOUT_PEERS_LOAD": "Timeout — nem todos os participantes carregaram o episódio",
   "LOBBY_CANCEL_USER": "Cancelado pelo utilizador",
-  "NOTIF_ERROR_TITLE": "Erro do KoalaSync"
-}
+  "NOTIF_ERROR_TITLE": "Erro do KoalaSync",
+  "FOOTER_SUPPORT": "☕ Oferece um café",
+  "FOOTER_REVIEW": "★ Avaliar",
+  "FOOTER_SUPPORT_PROMPT": "Gostas do KoalaSync? Deixa uma avaliação!",
+  "LABEL_AUDIO_PROCESSING": "Processamento de áudio",
+  "LABEL_AUDIO_PROCESSING_TOOLTIP": "Aplica efeitos de áudio como compressão à reprodução de vídeo",
+  "AUDIO_OPEN_SETTINGS": "Abrir",
+  "NEW_FEATURE_AUDIO": "Novo: Processamento de áudio — experimente o compressor!",
+  "AUDIO_BACK": "← Voltar",
+  "AUDIO_PAGE_TITLE": "Configurações de áudio",
+  "AUDIO_MASTER_TOGGLE": "Processamento de áudio",
+  "AUDIO_COMPRESSOR": "Compressor",
+  "AUDIO_COMPRESSOR_ENABLE": "Ativado",
+  "AUDIO_PRESET": "Predefinição",
+  "AUDIO_PRESET_RECOMMENDED": "Recomendado",
+  "AUDIO_PRESET_DYNAMIC_RANGE": "Gama dinâmica",
+  "AUDIO_PRESET_VOCAL_ENHANCEMENT": "Melhoria vocal",
+  "AUDIO_PRESET_SMOOTH": "Suave",
+  "AUDIO_PRESET_CUSTOM": "Personalizado",
+  "AUDIO_PARAM_THRESHOLD": "Limiar",
+  "AUDIO_PARAM_KNEE": "Knee",
+  "AUDIO_PARAM_RATIO": "Ratio",
+  "AUDIO_PARAM_ATTACK": "Attack",
+  "AUDIO_PARAM_RELEASE": "Release",
+  "AUDIO_EQUALIZER": "Equalizador",
+  "AUDIO_COMING_SOON": "Em breve"
+}

extension/locales/ru.json

@@ -91,6 +91,7 @@
   "BTN_REGEN_ID": "Сбросить Peer ID",
   "BTN_REGEN_ID_TOOLTIP": "Сбросить ваш внутренний идентификатор и переподключиться",
   "REGEN_ID_DESC": "Используйте при появлении ошибок дублирования идентификации.",
+  "REGEN_ID_OTHER_ISSUE": "Другая проблема? Откройте Issue на GitHub",
   "LABEL_CONN_STATUS": "Статус подключения",
   "LABEL_CONN_STATUS_TOOLTIP": "Текущий статус WebSocket-соединения с сервером",
   "CONN_STATUS_DISCONNECTED": "Отключено",
@@ -179,5 +180,30 @@
   "LOBBY_CANCEL_PEERS_LEFT": "Все остальные участники вышли",
   "LOBBY_CANCEL_TIMEOUT_PEERS_LOAD": "Время ожидания истекло — не все участники загрузили серию",
   "LOBBY_CANCEL_USER": "Отменено пользователем",
-  "NOTIF_ERROR_TITLE": "Ошибка KoalaSync"
+  "NOTIF_ERROR_TITLE": "Ошибка KoalaSync",
+  "FOOTER_SUPPORT": "☕ Угости кофе",
+  "FOOTER_REVIEW": "★ Оценить",
+  "FOOTER_SUPPORT_PROMPT": "Нравится KoalaSync? Оставьте отзыв!",
+  "LABEL_AUDIO_PROCESSING": "Обработка звука",
+  "LABEL_AUDIO_PROCESSING_TOOLTIP": "Применяет аудиоэффекты, такие как сжатие, к воспроизведению видео",
+  "AUDIO_OPEN_SETTINGS": "Открыть",
+  "NEW_FEATURE_AUDIO": "Новое: Обработка звука — попробуйте компрессор!",
+  "AUDIO_BACK": "← Назад",
+  "AUDIO_PAGE_TITLE": "Настройки звука",
+  "AUDIO_MASTER_TOGGLE": "Обработка звука",
+  "AUDIO_COMPRESSOR": "Компрессор",
+  "AUDIO_COMPRESSOR_ENABLE": "Включено",
+  "AUDIO_PRESET": "Пресет",
+  "AUDIO_PRESET_RECOMMENDED": "Рекомендуемый",
+  "AUDIO_PRESET_DYNAMIC_RANGE": "Динамический диапазон",
+  "AUDIO_PRESET_VOCAL_ENHANCEMENT": "Улучшение голоса",
+  "AUDIO_PRESET_SMOOTH": "Плавный",
+  "AUDIO_PRESET_CUSTOM": "Пользовательский",
+  "AUDIO_PARAM_THRESHOLD": "Порог",
+  "AUDIO_PARAM_KNEE": "Knee",
+  "AUDIO_PARAM_RATIO": "Ratio",
+  "AUDIO_PARAM_ATTACK": "Attack",
+  "AUDIO_PARAM_RELEASE": "Release",
+  "AUDIO_EQUALIZER": "Эквалайзер",
+  "AUDIO_COMING_SOON": "Скоро"
 }

extension/locales/tr.json

@@ -91,6 +91,7 @@
   "BTN_REGEN_ID": "Bağlantı Kimliğini Yeniden Oluştur",
   "BTN_REGEN_ID_TOOLTIP": "Dahili kimliğinizi yeniden oluşturun ve tekrar bağlanın",
   "REGEN_ID_DESC": "\"Duplicate Identity\" (Mükerrer Kimlik) hataları görüyorsanız bunu kullanın.",
+  "REGEN_ID_OTHER_ISSUE": "Başka bir sorun? GitHub Issue açın",
   "LABEL_CONN_STATUS": "Bağlantı Durumu",
   "LABEL_CONN_STATUS_TOOLTIP": "Mevcut WebSocket bağlantı durumu",
   "CONN_STATUS_DISCONNECTED": "Bağlantı Kesildi",
@@ -179,5 +180,30 @@
   "LOBBY_CANCEL_PEERS_LEFT": "Diğer tüm bağlantılar ayrıldı",
   "LOBBY_CANCEL_TIMEOUT_PEERS_LOAD": "Zaman aşımı — tüm bağlantılar bölümü yüklemedi",
   "LOBBY_CANCEL_USER": "Kullanıcı tarafından iptal edildi",
-  "NOTIF_ERROR_TITLE": "KoalaSync Hatası"
-}
+  "NOTIF_ERROR_TITLE": "KoalaSync Hatası",
+  "FOOTER_SUPPORT": "☕ Bana kahve ısmarla",
+  "FOOTER_REVIEW": "★ Değerlendir",
+  "FOOTER_SUPPORT_PROMPT": "KoalaSync'i beğendin mi? Bir yorum bırak!",
+  "LABEL_AUDIO_PROCESSING": "Ses işleme",
+  "LABEL_AUDIO_PROCESSING_TOOLTIP": "Video oynatımına sıkıştırma gibi ses efektleri uygular",
+  "AUDIO_OPEN_SETTINGS": "Aç",
+  "NEW_FEATURE_AUDIO": "Yeni: Ses işleme — kompresörü deneyin!",
+  "AUDIO_BACK": "← Geri",
+  "AUDIO_PAGE_TITLE": "Ses ayarları",
+  "AUDIO_MASTER_TOGGLE": "Ses işleme",
+  "AUDIO_COMPRESSOR": "Kompresör",
+  "AUDIO_COMPRESSOR_ENABLE": "Etkin",
+  "AUDIO_PRESET": "Ön ayar",
+  "AUDIO_PRESET_RECOMMENDED": "Önerilen",
+  "AUDIO_PRESET_DYNAMIC_RANGE": "Dinamik aralık",
+  "AUDIO_PRESET_VOCAL_ENHANCEMENT": "Ses iyileştirme",
+  "AUDIO_PRESET_SMOOTH": "Yumuşak",
+  "AUDIO_PRESET_CUSTOM": "Özel",
+  "AUDIO_PARAM_THRESHOLD": "Eşik",
+  "AUDIO_PARAM_KNEE": "Knee",
+  "AUDIO_PARAM_RATIO": "Ratio",
+  "AUDIO_PARAM_ATTACK": "Attack",
+  "AUDIO_PARAM_RELEASE": "Release",
+  "AUDIO_EQUALIZER": "Ekolayzer",
+  "AUDIO_COMING_SOON": "Çok yakında"
+}

extension/manifest.base.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "KoalaSync",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Synchronize video playback on YouTube, Netflix, Emby, Jellyfin, and any HTML5 site in real-time with friends.",
   "permissions": [
     "storage",

extension/popup.html

@@ -331,6 +331,39 @@
             transform: translateX(16px);
             background-color: white;
         }
+        .popup-footer {
+            margin-top: 20px;
+            text-align: center;
+            border-top: 1px solid rgba(255,255,255,0.05);
+            padding-top: 10px;
+            color: var(--text-muted);
+            font-size: 10px;
+            opacity: 0.6;
+        }
+        .popup-footer a {
+            color: var(--text-muted);
+            text-decoration: none;
+            transition: color 0.2s, opacity 0.2s;
+        }
+        .popup-footer a:hover {
+            color: var(--accent);
+            opacity: 1;
+        }
+        .feature-hint {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: var(--accent);
+            margin-left: 4px;
+            animation: featurePulse 2s ease-in-out infinite;
+            cursor: help;
+            vertical-align: middle;
+        }
+        @keyframes featurePulse {
+            0%, 100% { opacity: 0.4; transform: scale(1); }
+            50% { opacity: 1; transform: scale(1.3); }
+        }
     </style>
 </head>
 <body>
@@ -516,6 +549,13 @@
             </label>
         </div>
 
+        <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
+            <div style="display: flex; align-items: center; gap: 8px;">
+                <label id="audioProcessingLabel" style="margin-bottom: 0; cursor: help; white-space: nowrap; font-size: 13px;" data-i18n="LABEL_AUDIO_PROCESSING" data-i18n-title="LABEL_AUDIO_PROCESSING_TOOLTIP">Audio Processing</label>
+            </div>
+            <a id="audioSettingsLink" href="#" style="font-size: 11px; color: var(--accent); text-decoration: none; white-space: nowrap; background: rgba(99,102,241,0.12); padding: 5px 12px; border-radius: 6px; font-weight: 600; transition: background 0.2s;" data-i18n="AUDIO_OPEN_SETTINGS">Open</a>
+        </div>
+
         <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #334155;">
             <label style="margin-bottom: 0;" data-i18n="LABEL_LANGUAGE" data-i18n-title="LABEL_LANGUAGE_TOOLTIP" title="Choose your preferred extension language">App Language</label>
             <select id="langSelector" style="width: 165px; background: var(--bg); border: 1px solid #334155; color: white; padding: 6px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; outline: none; font-family: inherit;">
@@ -539,6 +579,16 @@
             <label title="Tools for fixing connection issues" data-i18n="LABEL_TROUBLESHOOTING" data-i18n-title="LABEL_TROUBLESHOOTING_TOOLTIP">Troubleshooting</label>
             <button id="regenId" class="secondary" style="width: 100%; font-size: 11px;" title="Regenerate your internal ID and reconnect" data-i18n="BTN_REGEN_ID" data-i18n-title="BTN_REGEN_ID_TOOLTIP">Regenerate Peer ID</button>
             <p style="font-size: 9px; color: var(--text-muted); margin-top: 5px; text-align: center;" data-i18n="REGEN_ID_DESC">Use this if you see "Duplicate Identity" errors.</p>
+            <p style="font-size: 9px; text-align: center; margin-top: 6px;"><a href="https://github.com/Shik3i/KoalaSync/issues" target="_blank" style="color: var(--accent); text-decoration: none;" data-i18n="REGEN_ID_OTHER_ISSUE">Other issue? Open a GitHub Issue</a></p>
+        </div>
+
+        <div class="popup-footer">
+            <div style="font-size: 9px; color: var(--text-muted); opacity: 0.6; margin-bottom: 6px; line-height: 1.3;" data-i18n="FOOTER_SUPPORT_PROMPT">Enjoying KoalaSync? Leave a review!</div>
+            <a id="settingsReviewLink" href="#" target="_blank" data-i18n="FOOTER_REVIEW">★ Rate us</a>
+            <span> · </span>
+            <a id="settingsSupportLink" href="#" target="_blank" data-i18n="FOOTER_SUPPORT">☕ Buy me a coffee</a>
+            <span> · </span>
+            <span id="settingsVersion">v0.0.0</span>
         </div>
     </div>
 
@@ -570,9 +620,16 @@
         </div>
         <div id="logList"></div>
         
-        <div style="margin-top: 20px; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px;">
+        <div class="popup-footer">
             <a href="https://github.com/Shik3i/KoalaSync" target="_blank" style="color: var(--text-muted); text-decoration: none; font-size: 10px; opacity: 0.6; display: block;" data-i18n="LABEL_GITHUB">GitHub Repository</a>
-            <div id="appVersion" style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;">v0.0.0</div>
+            <div style="margin-top: 4px;">
+                <div style="font-size: 9px; color: var(--text-muted); opacity: 0.6; margin-bottom: 6px; line-height: 1.3;" data-i18n="FOOTER_SUPPORT_PROMPT">Enjoying KoalaSync? Leave a review!</div>
+                <a id="devReviewLink" href="#" target="_blank" data-i18n="FOOTER_REVIEW">★ Rate us</a>
+                <span> · </span>
+                <a id="devSupportLink" href="#" target="_blank" data-i18n="FOOTER_SUPPORT">☕ Buy me a coffee</a>
+                <span> · </span>
+                <span id="appVersion">v0.0.0</span>
+            </div>
         </div>
     </div>
 

extension/popup.js

@@ -1,4 +1,4 @@
-import { EVENTS, OFFICIAL_LANDING_PAGE_URL } from './shared/constants.js';
+import { EVENTS, OFFICIAL_LANDING_PAGE_URL, SUPPORT_URL, getReviewUrl } from './shared/constants.js';
 import { BLACKLIST_DOMAINS } from './shared/blacklist.js';
 import { getAvatarForName, generateUsername, USERNAME_ADJECTIVES, USERNAME_NOUNS } from './shared/names.js';
 import { loadLocale, translateDOM, getMessage, getSystemLanguage } from './i18n.js';
@@ -50,9 +50,16 @@ const elements = {
     lobbyPeerStatus: document.getElementById('lobbyPeerStatus'),
     browserNotifications: document.getElementById('browserNotifications'),
     autoCopyInvite: document.getElementById('autoCopyInvite'),
-    syncTabCopyInvite: document.getElementById('syncTabCopyInvite'),
     cancelLobbyBtn: document.getElementById('cancelLobbyBtn'),
-    langSelector: document.getElementById('langSelector')
+    langSelector: document.getElementById('langSelector'),
+
+    audioSettingsLink: document.getElementById('audioSettingsLink'),
+    settingsSupportLink: document.getElementById('settingsSupportLink'),
+    settingsReviewLink: document.getElementById('settingsReviewLink'),
+    settingsVersion: document.getElementById('settingsVersion'),
+    devSupportLink: document.getElementById('devSupportLink'),
+    devReviewLink: document.getElementById('devReviewLink'),
+    syncTabCopyInvite: document.getElementById('syncTabCopyInvite')
 };
 
 let localPeerId = null;
@@ -71,8 +78,65 @@ let pendingConnectionErrorMsg = null;
 let roomListRefreshTimer = null;
 let roomListRefreshInterval = null;
 const ROOM_LIST_REFRESH_COOLDOWN_MS = 11000;
+const FEATURE_HINTS = [
+    {
+        key: 'audio_processing',
+        selector: '#audioProcessingLabel',
+        position: 'beforebegin',
+        i18nTooltip: 'NEW_FEATURE_AUDIO'
+    }
+];
 
 // --- Helpers ---
+function configureFooterLinks() {
+    const reviewUrl = getReviewUrl();
+    [elements.settingsSupportLink, elements.devSupportLink].forEach(link => {
+        if (link) link.href = SUPPORT_URL;
+    });
+    [elements.settingsReviewLink, elements.devReviewLink].forEach(link => {
+        if (link) link.href = reviewUrl;
+    });
+}
+
+function openAudioSettingsPage() {
+    chrome.tabs.create({ url: chrome.runtime.getURL('audio-options.html') });
+}
+
+async function updateFeatureHints() {
+    const data = await chrome.storage.sync.get(['dismissedHints']);
+    const dismissed = Array.isArray(data.dismissedHints) ? data.dismissedHints : [];
+
+    FEATURE_HINTS.forEach(feature => {
+        const target = document.querySelector(feature.selector);
+        if (!target) return;
+
+        const existing = target.parentElement?.querySelector(`.feature-hint[data-feature="${feature.key}"]`);
+        if (dismissed.includes(feature.key)) {
+            if (existing) existing.remove();
+            return;
+        }
+
+        if (!existing) {
+            const hint = document.createElement('span');
+            hint.className = 'feature-hint';
+            hint.dataset.feature = feature.key;
+            hint.title = getMessage(feature.i18nTooltip);
+            target.insertAdjacentElement(feature.position || 'afterend', hint);
+        } else {
+            existing.title = getMessage(feature.i18nTooltip);
+        }
+    });
+}
+
+async function dismissFeatureHint(featureKey) {
+    const data = await chrome.storage.sync.get(['dismissedHints']);
+    const dismissed = Array.isArray(data.dismissedHints) ? data.dismissedHints : [];
+    if (!dismissed.includes(featureKey)) {
+        await chrome.storage.sync.set({ dismissedHints: [...dismissed, featureKey] });
+    }
+    await updateFeatureHints();
+}
+
 function clearConnectionErrorTimer() {
     if (connectionErrorTimer) {
         clearTimeout(connectionErrorTimer);
@@ -108,13 +172,24 @@ function setRoomRefreshCooldown() {
 
 // --- Initialization ---
 async function init() {
-    // Load Settings
-    const data = await chrome.storage.sync.get(['serverUrl', 'useCustomServer', 'roomId', 'password', 'filterNoise', 'username', 'autoSyncNextEpisode', 'forceSyncMode', 'browserNotifications', 'autoCopyInvite', 'locale']);
+    const localData = await chrome.storage.local.get(['serverUrl', 'useCustomServer', 'roomId', 'password', 'username', 'filterNoise', 'autoSyncNextEpisode', 'forceSyncMode', 'browserNotifications', 'autoCopyInvite', 'locale', 'audioSettings']);
+    // Migrate preferences from sync → local for existing users
+    const oldSync = await chrome.storage.sync.get(['serverUrl', 'useCustomServer', 'roomId', 'password', 'username', 'filterNoise', 'autoSyncNextEpisode', 'forceSyncMode', 'browserNotifications', 'autoCopyInvite', 'locale', 'audioSettings']);
+    const toMigrate = {};
+    for (const key of ['serverUrl', 'useCustomServer', 'roomId', 'password', 'username', 'filterNoise', 'autoSyncNextEpisode', 'forceSyncMode', 'browserNotifications', 'autoCopyInvite', 'locale', 'audioSettings']) {
+        if (localData[key] === undefined && oldSync[key] !== undefined) {
+            toMigrate[key] = oldSync[key];
+            localData[key] = oldSync[key];
+        }
+    }
+    if (Object.keys(toMigrate).length) {
+        await chrome.storage.local.set(toMigrate);
+    }
 
-    let activeLang = data.locale;
+    let activeLang = localData.locale;
     if (!activeLang) {
         activeLang = getSystemLanguage();
-        chrome.storage.sync.set({ locale: activeLang });
+        chrome.storage.local.set({ locale: activeLang });
     }
 
     await loadLocale(activeLang);
@@ -122,21 +197,21 @@ async function init() {
     
     if (elements.langSelector) elements.langSelector.value = activeLang;
     
-    let username = data.username;
+    let username = localData.username;
     if (!username) {
         username = generateUsername();
-        chrome.storage.sync.set({ username });
+        await chrome.storage.local.set({ username });
     }
     
-    elements.serverUrl.value = data.serverUrl || '';
-    elements.roomId.value = data.roomId || '';
-    elements.password.value = data.password || '';
+    elements.serverUrl.value = localData.serverUrl || '';
+    elements.roomId.value = localData.roomId || '';
+    elements.password.value = localData.password || '';
     elements.username.value = username;
-    if (elements.filterNoise) elements.filterNoise.checked = data.filterNoise !== false;
-    if (elements.autoSyncNextEpisode) elements.autoSyncNextEpisode.checked = data.autoSyncNextEpisode !== false;
-    if (elements.forceSyncMode) elements.forceSyncMode.value = data.forceSyncMode || 'jump-to-others';
-    if (elements.browserNotifications) elements.browserNotifications.checked = data.browserNotifications === true;
-    if (elements.autoCopyInvite) elements.autoCopyInvite.checked = data.autoCopyInvite !== false;
+    if (elements.filterNoise) elements.filterNoise.checked = localData.filterNoise !== false;
+    if (elements.autoSyncNextEpisode) elements.autoSyncNextEpisode.checked = localData.autoSyncNextEpisode !== false;
+    if (elements.forceSyncMode) elements.forceSyncMode.value = localData.forceSyncMode || 'jump-to-others';
+    if (elements.browserNotifications) elements.browserNotifications.checked = localData.browserNotifications === true;
+    if (elements.autoCopyInvite) elements.autoCopyInvite.checked = localData.autoCopyInvite !== false;
     
     // Set Version Info
     const versionTxt = `v${chrome.runtime.getManifest().version}`;
@@ -144,15 +219,18 @@ async function init() {
     if (versionEl) versionEl.textContent = versionTxt;
     const popupVerEl = document.getElementById('popupVersion');
     if (popupVerEl) popupVerEl.textContent = versionTxt;
+    if (elements.settingsVersion) elements.settingsVersion.textContent = versionTxt;
+    configureFooterLinks();
+    await updateFeatureHints();
 
-    if (data.useCustomServer) {
+    if (localData.useCustomServer) {
         setServerMode(true);
     } else {
         setServerMode(false);
     }
 
-    toggleUIState(!!data.roomId);
-    updateUI(data.roomId, data.password, data.useCustomServer, data.serverUrl);
+    toggleUIState(!!localData.roomId);
+    updateUI(localData.roomId, localData.password, localData.useCustomServer, localData.serverUrl);
     refreshLogs();
     refreshHistory();
 
@@ -573,7 +651,7 @@ async function populateTabs(providedPeers = null, providedTargetTabId = null) {
     const token = {};
     populateTabsToken = token;
 
-    const data = await chrome.storage.sync.get(['filterNoise']);
+    const data = await chrome.storage.local.get(['filterNoise']);
     const isFilterActive = data.filterNoise !== false;
     
     let currentTargetTabId = providedTargetTabId;
@@ -881,7 +959,7 @@ function checkInviteLink() {
                     if (serverUrl || useCustomServer) {
                         elements.serverUrl.value = serverUrl;
                         setServerMode(useCustomServer);
-                        chrome.storage.sync.set({ serverUrl, useCustomServer });
+                        chrome.storage.local.set({ serverUrl, useCustomServer });
                     }
 
                     elements.joinBtn.style.boxShadow = '0 0 15px var(--accent)';
@@ -898,9 +976,9 @@ function setServerMode(custom) {
     elements.serverOfficial.classList.toggle('active', !custom);
     elements.serverCustom.classList.toggle('active', custom);
     elements.serverUrl.style.display = custom ? 'block' : 'none';
-    chrome.storage.sync.get(['useCustomServer', 'serverUrl'], (data) => {
+    chrome.storage.local.get(['useCustomServer', 'serverUrl'], (data) => {
         if (data.useCustomServer !== custom) {
-            chrome.storage.sync.set({ useCustomServer: custom });
+            chrome.storage.local.set({ useCustomServer: custom });
             if (!custom || data.serverUrl) {
                 chrome.runtime.sendMessage({ type: 'RETRY_CONNECT' });
             }
@@ -912,43 +990,57 @@ elements.serverOfficial.addEventListener('click', () => setServerMode(false));
 elements.serverCustom.addEventListener('click', () => setServerMode(true));
 
 elements.filterNoise.addEventListener('change', () => {
-    chrome.storage.sync.set({ filterNoise: elements.filterNoise.checked }, () => {
+    chrome.storage.local.set({ filterNoise: elements.filterNoise.checked }, () => {
         populateTabs();
     });
 });
 
 elements.autoSyncNextEpisode.addEventListener('change', () => {
-    chrome.storage.sync.set({ autoSyncNextEpisode: elements.autoSyncNextEpisode.checked });
+    chrome.storage.local.set({ autoSyncNextEpisode: elements.autoSyncNextEpisode.checked });
 });
 
 elements.browserNotifications.addEventListener('change', () => {
-    chrome.storage.sync.set({ browserNotifications: elements.browserNotifications.checked });
+    chrome.storage.local.set({ browserNotifications: elements.browserNotifications.checked });
 });
 
 if (elements.autoCopyInvite) {
     elements.autoCopyInvite.addEventListener('change', () => {
-        chrome.storage.sync.set({ autoCopyInvite: elements.autoCopyInvite.checked });
+        chrome.storage.local.set({ autoCopyInvite: elements.autoCopyInvite.checked });
     });
 }
 
+if (elements.audioSettingsLink) {
+    elements.audioSettingsLink.addEventListener('click', async (event) => {
+        event.preventDefault();
+        await dismissFeatureHint('audio_processing');
+        openAudioSettingsPage();
+    });
+}
+
+chrome.storage.onChanged.addListener((changes, area) => {
+    if (area !== 'sync' || !changes.audioSettings) return;
+});
+
 elements.forceSyncMode.addEventListener('change', () => {
-    chrome.storage.sync.set({ forceSyncMode: elements.forceSyncMode.value });
+    chrome.storage.local.set({ forceSyncMode: elements.forceSyncMode.value });
 });
 
 elements.serverUrl.addEventListener('input', () => {
-    chrome.storage.sync.set({ serverUrl: elements.serverUrl.value });
+    chrome.storage.local.set({ serverUrl: elements.serverUrl.value });
 });
 
 elements.username.addEventListener('change', () => {
-    chrome.storage.sync.set({ username: elements.username.value });
+    chrome.storage.local.set({ username: elements.username.value });
 });
 
 if (elements.langSelector) {
     elements.langSelector.addEventListener('change', async () => {
         const selectedLang = elements.langSelector.value;
-        await chrome.storage.sync.set({ locale: selectedLang });
+        await chrome.storage.local.set({ locale: selectedLang });
         await loadLocale(selectedLang);
         translateDOM();
+        configureFooterLinks();
+        await updateFeatureHints();
         
         // Re-apply connection and room UI state since translateDOM may overwrite dynamic elements
         chrome.runtime.sendMessage({ type: 'GET_STATUS' }, async (res) => {
@@ -961,14 +1053,14 @@ if (elements.langSelector) {
                 lastKnownPeers = res.peers || [];
                 if (res.lastActionState) updateLastActionUI(res.lastActionState, res.peers);
                 
-                const data = await chrome.storage.sync.get(['roomId', 'password', 'useCustomServer', 'serverUrl']);
+                const data = await chrome.storage.local.get(['roomId', 'password', 'useCustomServer', 'serverUrl']);
                 updateUI(data.roomId, data.password, data.useCustomServer, data.serverUrl);
                 
                 await populateTabs(res.peers, res.targetTabId);
                 if (res.episodeLobby) updateLobbyUI(res.episodeLobby, res.peers);
             } else {
                 applyConnectionStatus('disconnected');
-                const data = await chrome.storage.sync.get(['roomId', 'password', 'useCustomServer', 'serverUrl']);
+                const data = await chrome.storage.local.get(['roomId', 'password', 'useCustomServer', 'serverUrl']);
                 updateUI(data.roomId, data.password, data.useCustomServer, data.serverUrl);
                 await populateTabs();
             }
@@ -984,7 +1076,7 @@ elements.serverUrl.addEventListener('change', () => {
     if (url && !url.includes('://')) {
         url = 'ws://' + url;
         elements.serverUrl.value = url;
-        chrome.storage.sync.set({ serverUrl: url });
+        chrome.storage.local.set({ serverUrl: url });
     }
     if (elements.serverCustom.classList.contains('active') && url) {
         chrome.runtime.sendMessage({ type: 'RETRY_CONNECT' });
@@ -1098,7 +1190,7 @@ elements.joinBtn.addEventListener('click', async () => {
         window.justCreatedRoom = true;
     }
 
-    await chrome.storage.sync.set({ serverUrl, roomId, password, useCustomServer: useCustom });
+    await chrome.storage.local.set({ serverUrl, roomId, password, useCustomServer: useCustom });
     elements.roomId.value = roomId;
 
     // Tell background to connect
@@ -1111,7 +1203,7 @@ elements.joinBtn.addEventListener('click', async () => {
 elements.leaveBtn.addEventListener('click', async () => {
     clearConnectionErrorTimer();
     chrome.runtime.sendMessage({ type: 'LEAVE_ROOM' });
-    await chrome.storage.sync.set({ roomId: '', password: '' });
+    await chrome.storage.local.set({ roomId: '', password: '' });
     elements.roomId.value = '';
     elements.password.value = '';
     lastKnownPeers = [];
@@ -1501,7 +1593,7 @@ chrome.runtime.onMessage.addListener((msg) => {
 
         if (msg.success) {
             // Final confirmation of join from background
-            chrome.storage.sync.get(['roomId', 'password', 'useCustomServer', 'serverUrl'], (data) => {
+            chrome.storage.local.get(['roomId', 'password', 'useCustomServer', 'serverUrl'], (data) => {
                 updateUI(data.roomId, data.password, data.useCustomServer, data.serverUrl);
             });
         } else {
@@ -1656,7 +1748,7 @@ elements.copyLogs.addEventListener('click', () => {
         // ── Action History (last 20) ──
         lines.push('## Action History (last 20)');
         if (history && history.length > 0) {
-            const recent = history.slice(-20);
+            const recent = history.slice(0, 20).reverse();
             lines.push('```');
             for (const h of recent) {
                 if (!h) continue;
@@ -1675,7 +1767,7 @@ elements.copyLogs.addEventListener('click', () => {
         // ── Logs (last 50) ──
         lines.push('## Logs (last 50)');
         if (logs && logs.length > 0) {
-            const recent = logs.slice(-50);
+            const recent = logs.slice(0, 50).reverse();
             lines.push('```');
             for (const l of recent) {
                 if (!l) continue;

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "koalasync",
-  "version": "2.0.5",
+  "version": "2.1.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "koalasync",
-      "version": "2.0.5",
+      "version": "2.1.3",
       "devDependencies": {
         "archiver": "^7.0.1",
         "esbuild": "^0.28.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "koalasync",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "KoalaSync Build Scripts",
   "private": true,
   "scripts": {

scripts/test-audio-settings.mjs

@@ -0,0 +1,98 @@
+#!/usr/bin/env node
+
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+import vm from 'node:vm';
+import { fileURLToPath } from 'node:url';
+
+const repoRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const sourcePath = path.join(repoRoot, 'extension/audio-options.js');
+const source = fs.readFileSync(sourcePath, 'utf8')
+    .replace("import { loadLocale, translateDOM, getSystemLanguage } from './i18n.js';", '')
+    .replace(/init\(\)\.catch[\s\S]*?;\n?$/, '');
+
+function makeInput(overrides = {}) {
+    return {
+        checked: false,
+        value: '',
+        dataset: {},
+        addEventListener() {},
+        ...overrides
+    };
+}
+
+const rows = [
+    ['threshold', '-60', '0', '1', false],
+    ['knee', '0', '40', '1', false],
+    ['ratio', '1', '20', '0.5', false],
+    ['attack', '0', '1', '0.001', true],
+    ['release', '0', '1', '0.005', true]
+].map(([param, min, max, step, ms]) => {
+    const range = makeInput({ value: '0', min, max, step });
+    const number = makeInput({ value: '0', min: ms ? '0' : min, max: ms ? '1000' : max, step, dataset: ms ? { msInput: 'true' } : {} });
+    return {
+        dataset: { param },
+        querySelector(selector) {
+            return selector === 'input[type="range"]' ? range : number;
+        }
+    };
+});
+
+const sandbox = {
+    console,
+    loadLocale: async () => {},
+    translateDOM: () => {},
+    getSystemLanguage: () => 'en',
+    chrome: {
+        storage: {
+            sync: {
+                get: async () => ({}),
+                set: () => {},
+            },
+            local: {
+                get: async () => ({}),
+                set: () => {},
+            },
+            onChanged: {
+                addListener: () => {}
+            }
+        }
+    },
+    document: {
+        getElementById: () => makeInput(),
+        querySelectorAll: (selector) => selector === '.control-row' ? rows : [makeInput({ value: 'recommended' })]
+    },
+    setTimeout,
+    clearTimeout
+};
+
+vm.createContext(sandbox);
+vm.runInContext(`${source}
+globalThis.__audioSettingsTest = {
+    mergeAudioSettings,
+    getParamValue,
+    setCustomParam,
+    get currentSettings() { return currentSettings; }
+};`, sandbox, { filename: sourcePath });
+
+const helpers = sandbox.__audioSettingsTest;
+
+assert.doesNotThrow(() => helpers.mergeAudioSettings(null), 'mergeAudioSettings tolerates null storage values');
+assert.doesNotThrow(() => helpers.mergeAudioSettings('bad'), 'mergeAudioSettings tolerates non-object storage values');
+
+assert.equal(helpers.getParamValue('threshold', '-999'), -60, 'threshold clamps to minimum');
+assert.equal(helpers.getParamValue('threshold', '999'), 0, 'threshold clamps to maximum');
+assert.equal(helpers.getParamValue('knee', '-1'), 0, 'knee clamps to minimum');
+assert.equal(helpers.getParamValue('knee', '100'), 40, 'knee clamps to maximum');
+assert.equal(helpers.getParamValue('ratio', '0'), 1, 'ratio clamps to minimum');
+assert.equal(helpers.getParamValue('ratio', '999'), 20, 'ratio clamps to maximum');
+assert.equal(helpers.getParamValue('attack', '-1', true), 0, 'attack ms input clamps to minimum seconds');
+assert.equal(helpers.getParamValue('attack', '5000', true), 1, 'attack ms input clamps to maximum seconds');
+assert.equal(helpers.getParamValue('release', '-1', true), 0, 'release ms input clamps to minimum seconds');
+assert.equal(helpers.getParamValue('release', '5000', true), 1, 'release ms input clamps to maximum seconds');
+
+helpers.setCustomParam('threshold', 999);
+assert.equal(helpers.currentSettings.compressor.customParams.threshold, 0, 'setCustomParam stores clamped values');
+
+console.log('audio settings tests passed');

scripts/test-locales.js

@@ -55,7 +55,26 @@ console.log(`Auditing i18n locales using ${enKeys.length} baseline keys from en.
 for (const file of localeFiles) {
   const filePath = path.join(localesDir, file);
   try {
-    const dict = JSON.parse(fs.readFileSync(filePath, 'utf8'));
+    const raw = fs.readFileSync(filePath, 'utf8');
+
+    // Check for duplicate keys in raw JSON before parsing
+    const keyRe = /"(\w+)"\s*:/g;
+    const seenKeys = {};
+    let dupes = [];
+    let m;
+    while ((m = keyRe.exec(raw)) !== null) {
+      if (seenKeys[m[1]]) {
+        dupes.push(m[1]);
+      }
+      seenKeys[m[1]] = true;
+    }
+    if (dupes.length > 0) {
+      hasError = true;
+      console.error(`❌ ${file} has duplicate keys: ${[...new Set(dupes)].join(', ')}`);
+      continue;
+    }
+
+    const dict = JSON.parse(raw);
     const keys = Object.keys(dict);
 
     const missingKeys = enKeys.filter(k => !keys.includes(k));

scripts/test-website-locales.mjs

@@ -0,0 +1,80 @@
+#!/usr/bin/env node
+
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const localesDir = path.join(__dirname, '..', 'website', 'locales');
+const enPath = path.join(localesDir, 'en.json');
+
+if (!fs.existsSync(enPath)) {
+  console.error('CRITICAL: website/locales/en.json is missing!');
+  process.exit(1);
+}
+
+const enDict = JSON.parse(fs.readFileSync(enPath, 'utf8'));
+const enKeys = Object.keys(enDict).sort();
+
+const localeFiles = fs.readdirSync(localesDir)
+  .filter(file => file.endsWith('.json') && file !== 'en.json')
+  .sort();
+
+let hasError = false;
+
+console.log(`Auditing website i18n locales using ${enKeys.length} baseline keys from en.json...\n`);
+
+for (const file of localeFiles) {
+  const filePath = path.join(localesDir, file);
+  try {
+    const raw = fs.readFileSync(filePath, 'utf8');
+
+    // Check for duplicate keys in raw JSON before parsing
+    const keyRe = /"(\w+)"\s*:/g;
+    const seenKeys = {};
+    let dupes = [];
+    let m;
+    while ((m = keyRe.exec(raw)) !== null) {
+      if (seenKeys[m[1]]) {
+        dupes.push(m[1]);
+      }
+      seenKeys[m[1]] = true;
+    }
+    if (dupes.length > 0) {
+      hasError = true;
+      console.error(`❌ ${file} has duplicate keys: ${[...new Set(dupes)].join(', ')}`);
+      continue;
+    }
+
+    const dict = JSON.parse(raw);
+    const keys = Object.keys(dict).sort();
+
+    const missingKeys = enKeys.filter(k => !keys.includes(k));
+    const extraKeys = keys.filter(k => !enKeys.includes(k));
+
+    if (missingKeys.length > 0 || extraKeys.length > 0) {
+      hasError = true;
+      console.error(`❌ ${file} has inconsistencies:`);
+      if (missingKeys.length > 0) {
+        console.error(`  Missing keys (${missingKeys.length}):`, missingKeys);
+      }
+      if (extraKeys.length > 0) {
+        console.error(`  Extra keys (${extraKeys.length}):`, extraKeys);
+      }
+    } else {
+      console.log(`✓ ${file} is fully consistent (matches all keys).`);
+    }
+  } catch (err) {
+    hasError = true;
+    console.error(`❌ Failed to parse ${file}:`, err.message);
+  }
+}
+
+console.log('');
+if (hasError) {
+  console.error('❌ Website locale consistency check failed! Fix the errors above.');
+  process.exit(1);
+} else {
+  console.log('🎉 All website locale files are perfectly synchronized and consistent!');
+  process.exit(0);
+}

scripts/verify-release.mjs

@@ -12,6 +12,7 @@ const checks = [
     env: { ADMIN_METRICS_TOKEN: 'verify-admin-token-with-more-than-32-chars' }
   }],
   ['content video finder', 'node', ['scripts/test-content-video-finder.js']],
+  ['audio settings', 'node', ['scripts/test-audio-settings.mjs']],
   ['popup refresh cooldown', 'node', ['scripts/test-popup-refresh-cooldown.mjs']],
   ['server syntax index', 'node', ['-c', 'server/index.js']],
   ['server syntax ops', 'node', ['-c', 'server/ops.js']],
@@ -19,6 +20,7 @@ const checks = [
   ['popup syntax', 'node', ['-c', 'extension/popup.js']],
   ['background syntax', 'node', ['-c', 'extension/background.js']],
   ['locale coverage', 'node', ['scripts/test-locales.js']],
+  ['website locale coverage', 'node', ['scripts/test-website-locales.mjs']],
   ['lint', 'npm', ['run', 'lint']],
   ['root production audit', 'npm', ['audit', '--omit=dev']],
   ['server production audit', 'npm', ['audit', '--omit=dev'], { cwd: path.join(repoRoot, 'server') }],

server/README.md

@@ -54,7 +54,7 @@ docker pull ghcr.io/shik3i/koalasync:latest
 # Or build from the repository root
 docker build -t koala-sync-server -f server/Dockerfile .
 ```
-See [Docker network compose](../docker-compose.caddy.example.yml) or [Static IP compose](../docker-compose.ip.example.yml) in the root directory for ready-to-use Docker Compose files.
+See [Docker network compose](../examples/docker-compose.caddy.example.yml) or [Static IP compose](../examples/docker-compose.ip.example.yml) in the root directory for ready-to-use Docker Compose files.
 
 ### Manual Setup
 ```bash

shared/constants.js

@@ -12,6 +12,20 @@ export const APP_VERSION = "1.9.0";
 export const OFFICIAL_SERVER_URL = 'wss://syncserver.koalastuff.net';
 export const OFFICIAL_LANDING_PAGE_URL = 'https://sync.koalastuff.net';
 export const OFFICIAL_SERVER_TOKEN = '62170b705234c4f4807a9b22420bb93cf1a2aacfa4c5d3b47804482babb8eb50';
+export const SUPPORT_URL = 'https://support.koalastuff.net';
+export const KOFI_URL = 'https://ko-fi.com/koaladev';
+export const GITHUB_URL = 'https://github.com/Shik3i/KoalaSync';
+
+export function isFirefox() {
+    const manifest = chrome.runtime.getManifest();
+    return !!manifest.browser_specific_settings?.gecko?.id;
+}
+
+export function getReviewUrl() {
+    return isFirefox()
+        ? 'https://addons.mozilla.org/firefox/addon/koalasync/reviews/'
+        : 'https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc/reviews';
+}
 
 export const EVENTS = {
     // Connection & Room

website/README.md

@@ -28,7 +28,7 @@ Caddy is the recommended web server. It provides automatic HTTPS and high-perfor
 
 ### Recommended Caddyfile
 
-For a more comprehensive configuration that includes the Relay Server reverse proxy, see the root [Caddyfile.example](../Caddyfile.example).
+For a more comprehensive configuration that includes the Relay Server reverse proxy, see the root [Caddyfile.example](../examples/Caddyfile.example).
 
 ```caddy
 sync.koalastuff.net {

website/datenschutz-de.html

@@ -52,7 +52,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="globe-icon"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en">🇬🇧 English</option>
                         <option value="de">🇩🇪 Deutsch</option>

website/impressum-de.html

@@ -52,7 +52,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="globe-icon"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en">🇬🇧 English</option>
                         <option value="de">🇩🇪 Deutsch</option>

website/imprint.html

@@ -52,7 +52,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="globe-icon"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en">🇬🇧 English</option>
                         <option value="de">🇩🇪 Deutsch</option>

website/join.html

@@ -56,7 +56,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="globe-icon"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en">🇬🇧 English</option>
                         <option value="de">🇩🇪 Deutsch</option>

website/locales/de.json

@@ -71,7 +71,7 @@
   "COMP_FEAT_5_TELE": "Nur unterstützte Seiten",
   "COMP_FEAT_6_NAME": "Lokalisierung / Übersetzung",
   "COMP_FEAT_6_DESC": "Verfügbare Oberflächensprachen und Übersetzungsunterstützung.",
-  "COMP_FEAT_6_KOALA": "6 Sprachen (wachsend)",
+  "COMP_FEAT_6_KOALA": "13 Sprachen (wachsend)",
   "COMP_FEAT_6_TELE": "Nur Englisch",
   "COMP_FOOTNOTE_1": "Stand des Vergleichs: Mai 2026.",
   "COMP_FOOTNOTE_2": "Details zu Preisen und unterstützten Netzwerken von Teleparty Premium:",
@@ -163,5 +163,6 @@
   "MOCK_31": "Protokoll (Letzte 50)",
   "MOCK_32": "LÖSCHEN",
   "FOOTER_LEGAL_LINK": "de/impressum",
-  "FOOTER_PRIVACY_LINK": "de/datenschutz"
+  "FOOTER_PRIVACY_LINK": "de/datenschutz",
+  "FOOTER_SUPPORT": "Kauf mir einen Kaffee auf Ko-Fi"
 }

website/locales/en.json

@@ -71,7 +71,7 @@
   "COMP_FEAT_5_TELE": "Supported sites only",
   "COMP_FEAT_6_NAME": "Localization / Translation",
   "COMP_FEAT_6_DESC": "Available interface languages and translation support.",
-  "COMP_FEAT_6_KOALA": "6 Languages (and growing)",
+  "COMP_FEAT_6_KOALA": "13 Languages (and growing)",
   "COMP_FEAT_6_TELE": "English only",
   "COMP_FOOTNOTE_1": "Comparison state: May 2026.",
   "COMP_FOOTNOTE_2": "Official Teleparty Premium pricing and supported networks details:",
@@ -163,5 +163,6 @@
   "MOCK_31": "Logs (Last 50)",
   "MOCK_32": "CLEAR",
   "FOOTER_LEGAL_LINK": "imprint",
-  "FOOTER_PRIVACY_LINK": "privacy"
+  "FOOTER_PRIVACY_LINK": "privacy",
+  "FOOTER_SUPPORT": "Buy me a coffee on Ko-Fi"
 }

website/locales/es.json

@@ -71,7 +71,7 @@
   "COMP_FEAT_5_TELE": "Solo sitios compatibles",
   "COMP_FEAT_6_NAME": "Localización / Traducción",
   "COMP_FEAT_6_DESC": "Idiomas de interfaz disponibles y soporte de traducción.",
-  "COMP_FEAT_6_KOALA": "6 idiomas (y creciendo)",
+  "COMP_FEAT_6_KOALA": "13 idiomas (y creciendo)",
   "COMP_FEAT_6_TELE": "Solo inglés",
   "COMP_FOOTNOTE_1": "Estado de la comparación: mayo de 2026.",
   "COMP_FOOTNOTE_2": "Detalles oficiales de precios de Teleparty Premium y redes compatibles:",
@@ -163,5 +163,6 @@
   "MOCK_31": "BORRAR",
   "MOCK_32": "CLEAR",
   "FOOTER_LEGAL_LINK": "imprint",
-  "FOOTER_PRIVACY_LINK": "privacy"
+  "FOOTER_PRIVACY_LINK": "privacy",
+  "FOOTER_SUPPORT": "Invítame a un café en Ko-Fi"
 }

website/locales/fr.json

@@ -71,7 +71,7 @@
   "COMP_FEAT_5_TELE": "Sites pris en charge uniquement",
   "COMP_FEAT_6_NAME": "Localisation / Traduction",
   "COMP_FEAT_6_DESC": "Langues d'interface disponibles et support de traduction.",
-  "COMP_FEAT_6_KOALA": "6 langues (et plus à venir)",
+  "COMP_FEAT_6_KOALA": "13 langues (et plus à venir)",
   "COMP_FEAT_6_TELE": "Anglais uniquement",
   "COMP_FOOTNOTE_1": "État de la comparaison : mai 2026.",
   "COMP_FOOTNOTE_2": "Détails sur les tarifs officiels de Teleparty Premium et les réseaux pris en charge :",
@@ -163,5 +163,6 @@
   "MOCK_31": "EFFACER",
   "MOCK_32": "CLEAR",
   "FOOTER_LEGAL_LINK": "imprint",
-  "FOOTER_PRIVACY_LINK": "privacy"
+  "FOOTER_PRIVACY_LINK": "privacy",
+  "FOOTER_SUPPORT": "Offre-moi un café sur Ko-Fi"
 }

website/locales/it.json

@@ -163,5 +163,6 @@
   "MOCK_31": "Log (Ultimi 50)",
   "MOCK_32": "PULISCI",
   "FOOTER_LEGAL_LINK": "imprint",
-  "FOOTER_PRIVACY_LINK": "privacy"
+  "FOOTER_PRIVACY_LINK": "privacy",
+  "FOOTER_SUPPORT": "Offrimi un caffè su Ko-Fi"
 }

website/locales/ja.json

@@ -163,5 +163,6 @@
   "MOCK_31": "ログ（直近50件）",
   "MOCK_32": "消去",
   "FOOTER_LEGAL_LINK": "imprint",
-  "FOOTER_PRIVACY_LINK": "privacy"
+  "FOOTER_PRIVACY_LINK": "privacy",
+  "FOOTER_SUPPORT": "Ko-Fiでコーヒーをおごる"
 }

website/locales/ko.json

@@ -123,7 +123,7 @@
   "HOWTO_STEP_1_NAME": "브라우저 확장 프로그램 설치",
   "HOWTO_STEP_1_TEXT": "Chrome 웹 스토어 또는 Firefox 부가 기능에서 KoalaSync를 브라우저에 추가하세요. 비디오 요소가 있는 모든 웹사이트에서 작동합니다.",
   "HOWTO_STEP_2_NAME": "방 만들기",
-  "HOWTO_STEP_2_TEXT": "확장 프로그램 팝업을 열고 '새 방 만들기'를 클릭하세요. 초대 링크가 클rip보드에 자동으로 복사됩니다.",
+  "HOWTO_STEP_2_TEXT": "확장 프로그램 팝업을 열고 '새 방 만들기'를 클릭하세요. 초대 링크가 클립보드에 자동으로 복사됩니다.",
   "HOWTO_STEP_3_NAME": "공유 및 동기화",
   "HOWTO_STEP_3_TEXT": "친구들에게 초대 링크를 보내세요. 비디오 탭을 선택하고 실시간으로 동기화된 재생을 즐기세요.",
   "FOOTER_MIT": "MIT 라이선스에 따른 오픈 소스.",
@@ -163,5 +163,6 @@
   "MOCK_31": "로그 (최근 50개)",
   "MOCK_32": "지우기",
   "FOOTER_LEGAL_LINK": "imprint",
-  "FOOTER_PRIVACY_LINK": "privacy"
+  "FOOTER_PRIVACY_LINK": "privacy",
+  "FOOTER_SUPPORT": "Ko-Fi에서 커피 한 잔 사주세요"
 }

website/locales/nl.json

@@ -163,5 +163,6 @@
   "MOCK_31": "Logs (Laatste 50)",
   "MOCK_32": "WISSEN",
   "FOOTER_LEGAL_LINK": "imprint",
-  "FOOTER_PRIVACY_LINK": "privacy"
+  "FOOTER_PRIVACY_LINK": "privacy",
+  "FOOTER_SUPPORT": "Trakteer op een koffie via Ko-Fi"
 }

website/locales/pl.json

@@ -163,5 +163,6 @@
   "MOCK_31": "Logi (ostatnie 50)",
   "MOCK_32": "WYCZYŚĆ",
   "FOOTER_LEGAL_LINK": "imprint",
-  "FOOTER_PRIVACY_LINK": "privacy"
+  "FOOTER_PRIVACY_LINK": "privacy",
+  "FOOTER_SUPPORT": "Postaw kawę na Ko-Fi"
 }

website/locales/pt-BR.json

@@ -71,7 +71,7 @@
   "COMP_FEAT_5_TELE": "Apenas sites suportados",
   "COMP_FEAT_6_NAME": "Localização / Tradução",
   "COMP_FEAT_6_DESC": "Idiomas de interface disponíveis e suporte a tradução.",
-  "COMP_FEAT_6_KOALA": "6 idiomas (e crescendo)",
+  "COMP_FEAT_6_KOALA": "13 idiomas (e crescendo)",
   "COMP_FEAT_6_TELE": "Apenas inglês",
   "COMP_FOOTNOTE_1": "Estado da comparação: maio de 2026.",
   "COMP_FOOTNOTE_2": "Preços oficiais do Teleparty Premium e detalhes das redes suportadas:",
@@ -163,5 +163,6 @@
   "MOCK_31": "LIMPAR",
   "MOCK_32": "CLEAR",
   "FOOTER_LEGAL_LINK": "imprint",
-  "FOOTER_PRIVACY_LINK": "privacy"
+  "FOOTER_PRIVACY_LINK": "privacy",
+  "FOOTER_SUPPORT": "Me pague um café no Ko-Fi"
 }

website/locales/pt.json

@@ -33,9 +33,9 @@
   "USE_CASE_3_TITLE": "Relacionamentos à Distância",
   "USE_CASE_3_DESC": "Ponte para a distância e aproveite as noites de encontros. Experimente cada reviravolta, ria das mesmas piadas e partilhe momentos emocionantes exatamente no mesmo milissegundo.",
   "WHY_TITLE": "Porquê KoalaSync?",
-  "WHY_SUBTITLE": "Construído para uma sincronizzazione fiável, design focado na privacidade e configuração simples.",
+  "WHY_SUBTITLE": "Construído para uma sincronização fiável, design focado na privacidade e configuração simples.",
   "FEATURE_1_TITLE": "Controlo Total / Sincronização Instantânea",
-  "FEATURE_1_DESC": "Um pausa, todos pausam. Um avança, todos seguem. O nosso protocolo di sincronizzazione a duas fases coordena a reprodução em tempo reale em todos os participantes.",
+  "FEATURE_1_DESC": "Um pausa, todos pausam. Um avança, todos seguem. O nosso protocolo de sincronização a duas fases coordena a reprodução em tempo real em todos os participantes.",
   "FEATURE_2_TITLE": "Binge-Watching Infinito",
   "FEATURE_2_DESC": "Reprodução automática em sincronia. O KoalaSync deteta automaticamente as transições de episódios e aguarda até que todos os peers tenham carregado o vídeo seguinte.",
   "FEATURE_3_TITLE": "Zero Contas / Privacidade Pura",
@@ -132,12 +132,12 @@
   "FOOTER_PRIVACY": "Política de Privacidade",
   "MOCK_01": "Sala Ativa",
   "MOCK_02": "Servidor Oficial",
-  "MOCK_03": "Link de Invito",
+  "MOCK_03": "Link de Convite",
   "MOCK_04": "Participantes na Sala",
   "MOCK_05": "YOU",
   "MOCK_06": "Playing",
   "MOCK_07": "Peer",
-  "MOCK_08": "Sair della Sala",
+  "MOCK_08": "Sair da Sala",
   "MOCK_09": "Selecionar Vídeo",
   "MOCK_10": "Controlo Remoto",
   "MOCK_11": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"14\" height=\"14\" aria-hidden=\"true\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg> Play",
@@ -163,5 +163,6 @@
   "MOCK_31": "Registos (Últimos 50)",
   "MOCK_32": "LIMPAR",
   "FOOTER_LEGAL_LINK": "imprint",
-  "FOOTER_PRIVACY_LINK": "privacy"
+  "FOOTER_PRIVACY_LINK": "privacy",
+  "FOOTER_SUPPORT": "Oferece um café no Ko-Fi"
 }

website/locales/ru.json

@@ -71,7 +71,7 @@
   "COMP_FEAT_5_TELE": "Только поддерживаемые сайты",
   "COMP_FEAT_6_NAME": "Локализация / Перевод",
   "COMP_FEAT_6_DESC": "Доступные языки интерфейса и поддержка перевода.",
-  "COMP_FEAT_6_KOALA": "6 языков (и расширяется)",
+  "COMP_FEAT_6_KOALA": "13 языков (и расширяется)",
   "COMP_FEAT_6_TELE": "Только английский",
   "COMP_FOOTNOTE_1": "Состояние сравнения: май 2026.",
   "COMP_FOOTNOTE_2": "Официальные цены Teleparty Premium и поддерживаемые сети:",
@@ -163,5 +163,6 @@
   "MOCK_31": "ОЧИСТИТЬ",
   "MOCK_32": "CLEAR",
   "FOOTER_LEGAL_LINK": "imprint",
-  "FOOTER_PRIVACY_LINK": "privacy"
+  "FOOTER_PRIVACY_LINK": "privacy",
+  "FOOTER_SUPPORT": "Угости кофе на Ko-Fi"
 }

website/locales/tr.json

@@ -163,5 +163,6 @@
   "MOCK_31": "Günlükler (Son 50)",
   "MOCK_32": "TEMİZLE",
   "FOOTER_LEGAL_LINK": "imprint",
-  "FOOTER_PRIVACY_LINK": "privacy"
+  "FOOTER_PRIVACY_LINK": "privacy",
+  "FOOTER_SUPPORT": "Ko-Fi'de bana kahve ısmarla"
 }

website/privacy.html

@@ -52,7 +52,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="globe-icon"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en">🇬🇧 English</option>
                         <option value="de">🇩🇪 Deutsch</option>

website/style.css

@@ -1936,7 +1936,7 @@ footer {
         margin: 0;
     }
     .lang-select-container {
-        padding: 4px 10px 4px 8px;
+        padding: 4px 10px;
         gap: 4px;
     }
     .lang-select-container .globe-icon {
@@ -1975,7 +1975,7 @@ html:not(.lang-de) [lang="de"] {
     -webkit-backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 9999px;
-    padding: 6px 14px 6px 12px;
+    padding: 6px 14px;
     transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     color: var(--text-muted);
 }

website/template.html

@@ -224,7 +224,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="globe-icon"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en" {{SELECTED_EN}}>🇬🇧 English</option>
                         <option value="de" {{SELECTED_DE}}>🇩🇪 Deutsch</option>
@@ -252,7 +251,7 @@
     <header class="hero" id="main-content">
         <div class="container hero-grid">
             <div class="hero-text">
-                <a href="https://github.com/Shik3i/KoalaSync/blob/main/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
+                <a href="https://github.com/Shik3i/KoalaSync/blob/main/docs/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
                     <span class="version-text-en" lang="en">v2.1.0 OUT NOW</span>
                     <span class="version-text-de" lang="de">v2.1.0 JETZT VERFÜGBAR</span>
                 </a>
@@ -1209,6 +1208,10 @@
             <div style="margin-top: 1.5rem; font-size: 0.8rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
                 <a href="{{ASSET_PATH}}{{FOOTER_LEGAL_LINK}}" style="color: var(--text-muted); text-decoration: none;"><span>{{FOOTER_LEGAL}}</span></a>
                 <a href="{{ASSET_PATH}}{{FOOTER_PRIVACY_LINK}}" style="color: var(--text-muted); text-decoration: none;"><span>{{FOOTER_PRIVACY}}</span></a>
+                <a href="https://ko-fi.com/koaladev" target="_blank" title="{{FOOTER_SUPPORT}}" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #ff5e5b; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
+                    <span aria-hidden="true">♥</span>
+                    <span>Ko-Fi</span>
+                </a>
                 <a href="https://mastodon.social/@koalastuff" rel="me" target="_blank" style="color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="14" height="14" aria-hidden="true" style="display: block;"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg>
                     Mastodon

website/version.json

@@ -1,4 +1,4 @@
 {
-  "version": "2.1.0",
-  "date": "2026-06-04T13:20:10Z"
+  "version": "2.2.0",
+  "date": "2026-06-08T19:11:56Z"
 }

website/www/de/datenschutz.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Datenschutz | KoalaSync</title>
-    <link rel="preload" href="../style.512d0dfc.min.css" as="style">
-    <link rel="stylesheet" href="../style.512d0dfc.min.css">
+    <link rel="preload" href="../style.b511a1d2.min.css" as="style">
+    <link rel="stylesheet" href="../style.b511a1d2.min.css">
     <link rel="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
     <meta name="robots" content="noindex">
 
@@ -52,7 +52,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="globe-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en">🇬🇧 English</option>
                         <option value="de">🇩🇪 Deutsch</option>

website/www/de/impressum.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Impressum | KoalaSync</title>
-    <link rel="preload" href="../style.512d0dfc.min.css" as="style">
-    <link rel="stylesheet" href="../style.512d0dfc.min.css">
+    <link rel="preload" href="../style.b511a1d2.min.css" as="style">
+    <link rel="stylesheet" href="../style.b511a1d2.min.css">
     <link rel="icon" type="image/webp" href="../assets/NewLogoIcon_64.webp">
     <meta name="robots" content="noindex">
 
@@ -52,7 +52,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="globe-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en">🇬🇧 English</option>
                         <option value="de">🇩🇪 Deutsch</option>

website/www/de/index.html

@@ -6,9 +6,9 @@
     <title>KoalaSync | Netflix, YouTube & jedes Video mit Freunden synchronisieren</title>
     <meta name="description" content="Schaue Netflix, YouTube, Twitch und jedes HTML5-Video synchron mit Freunden. Kostenlose, quelloffene Browser-Erweiterung. Keine Anmeldung erforderlich.">
     
-    <link rel="preload" href="../style.512d0dfc.min.css" as="style">
+    <link rel="preload" href="../style.b511a1d2.min.css" as="style">
     <link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
-    <link rel="stylesheet" href="../style.512d0dfc.min.css">
+    <link rel="stylesheet" href="../style.b511a1d2.min.css">
     <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16x16.png">
     <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32x32.png">
     <link rel="apple-touch-icon" sizes="180x180" href="../assets/icon-192x192.png">
@@ -224,7 +224,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="globe-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en" >🇬🇧 English</option>
                         <option value="de" selected>🇩🇪 Deutsch</option>
@@ -252,7 +251,7 @@
     <header class="hero" id="main-content">
         <div class="container hero-grid">
             <div class="hero-text">
-                <a href="https://github.com/Shik3i/KoalaSync/blob/main/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
+                <a href="https://github.com/Shik3i/KoalaSync/blob/main/docs/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
                     <span class="version-text-en" lang="en">v2.1.0 OUT NOW</span>
                     <span class="version-text-de" lang="de">v2.1.0 JETZT VERFÜGBAR</span>
                 </a>
@@ -284,7 +283,7 @@
                         <div class="mock-header-title"><picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo"></picture>KoalaSync</div>
                         <a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="mock-version-link" title="Visit GitHub Repository">
                             <svg fill="currentColor" style="width:12px;height:12px;display:block" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/></svg>
-                            <span class="mockup-version">2.1.0</span>
+                            <span class="mockup-version">2.2.0</span>
                         </a>
                     </div>
                     <div class="mock-tabs">
@@ -547,7 +546,7 @@
 
                             <div style="margin-top: 16px; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; flex-shrink: 0;">
                                 <a href="https://github.com/Shik3i/KoalaSync" target="_blank" style="color: var(--text-muted); text-decoration: none; font-size: 10px; opacity: 0.6; display: block;">GitHub Repository</a>
-                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.1.0</div>
+                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.2.0</div>
                             </div>
                         </div>
                     </div>
@@ -797,7 +796,7 @@
                                 <strong><span>Lokalisierung / Übersetzung</span></strong>
                                 <span class="feat-desc"><span>Verfügbare Oberflächensprachen und Übersetzungsunterstützung.</span></span>
                             </td>
-                            <td class="check highlight">✔ <span>6 Sprachen (wachsend)</span></td>
+                            <td class="check highlight">✔ <span>13 Sprachen (wachsend)</span></td>
                             <td class="cross">
                                 ✘ <span>Nur Englisch</span>
                             </td>
@@ -915,7 +914,7 @@
                                     <picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="14" height="14"></picture>
                                     <span>KoalaSync</span>
                                 </div>
-                                <div class="illus-popup-version mockup-version">2.1.0</div>
+                                <div class="illus-popup-version mockup-version">2.2.0</div>
                             </div>
                             <div class="illus-popup-tabs">
                                 <div class="illus-popup-tab active">
@@ -1209,6 +1208,10 @@
             <div style="margin-top: 1.5rem; font-size: 0.8rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
                 <a href="../de/impressum" style="color: var(--text-muted); text-decoration: none;"><span>Impressum</span></a>
                 <a href="../de/datenschutz" style="color: var(--text-muted); text-decoration: none;"><span>Datenschutz</span></a>
+                <a href="https://ko-fi.com/koaladev" target="_blank" title="Kauf mir einen Kaffee auf Ko-Fi" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #ff5e5b; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
+                    <span aria-hidden="true">♥</span>
+                    <span>Ko-Fi</span>
+                </a>
                 <a href="https://mastodon.social/@koalastuff" rel="me" target="_blank" style="color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" style="display:block" viewBox="0 0 24 24"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38q.398-.092.786-.213c.585-.184 1.27-.39 1.774-.753a.06.06 0 0 0 .023-.043v-1.809a.05.05 0 0 0-.02-.041.05.05 0 0 0-.046-.01 20.3 20.3 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.6 5.6 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422q.059-.011.11-.024c2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545m-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102q0-1.965 1.011-3.12c.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164q1.012 1.155 1.012 3.12z"/></svg>
                     Mastodon

website/www/es/index.html

@@ -6,9 +6,9 @@
     <title>KoalaSync | Sincroniza Netflix, YouTube y cualquier video con amigos</title>
     <meta name="description" content="Mira Netflix, YouTube, Twitch y cualquier video HTML5 en perfecta sincronización con amigos. Extensión de navegador gratuita y de código abierto. Sin registro.">
     
-    <link rel="preload" href="../style.512d0dfc.min.css" as="style">
+    <link rel="preload" href="../style.b511a1d2.min.css" as="style">
     <link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
-    <link rel="stylesheet" href="../style.512d0dfc.min.css">
+    <link rel="stylesheet" href="../style.b511a1d2.min.css">
     <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16x16.png">
     <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32x32.png">
     <link rel="apple-touch-icon" sizes="180x180" href="../assets/icon-192x192.png">
@@ -224,7 +224,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="globe-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en" >🇬🇧 English</option>
                         <option value="de" >🇩🇪 Deutsch</option>
@@ -252,7 +251,7 @@
     <header class="hero" id="main-content">
         <div class="container hero-grid">
             <div class="hero-text">
-                <a href="https://github.com/Shik3i/KoalaSync/blob/main/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
+                <a href="https://github.com/Shik3i/KoalaSync/blob/main/docs/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
                     <span class="version-text-en" lang="en">v2.1.0 OUT NOW</span>
                     <span class="version-text-de" lang="de">v2.1.0 JETZT VERFÜGBAR</span>
                 </a>
@@ -284,7 +283,7 @@
                         <div class="mock-header-title"><picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo"></picture>KoalaSync</div>
                         <a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="mock-version-link" title="Visit GitHub Repository">
                             <svg fill="currentColor" style="width:12px;height:12px;display:block" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/></svg>
-                            <span class="mockup-version">2.1.0</span>
+                            <span class="mockup-version">2.2.0</span>
                         </a>
                     </div>
                     <div class="mock-tabs">
@@ -547,7 +546,7 @@
 
                             <div style="margin-top: 16px; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; flex-shrink: 0;">
                                 <a href="https://github.com/Shik3i/KoalaSync" target="_blank" style="color: var(--text-muted); text-decoration: none; font-size: 10px; opacity: 0.6; display: block;">GitHub Repository</a>
-                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.1.0</div>
+                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.2.0</div>
                             </div>
                         </div>
                     </div>
@@ -797,7 +796,7 @@
                                 <strong><span>Localización / Traducción</span></strong>
                                 <span class="feat-desc"><span>Idiomas de interfaz disponibles y soporte de traducción.</span></span>
                             </td>
-                            <td class="check highlight">✔ <span>6 idiomas (y creciendo)</span></td>
+                            <td class="check highlight">✔ <span>13 idiomas (y creciendo)</span></td>
                             <td class="cross">
                                 ✘ <span>Solo inglés</span>
                             </td>
@@ -915,7 +914,7 @@
                                     <picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="14" height="14"></picture>
                                     <span>KoalaSync</span>
                                 </div>
-                                <div class="illus-popup-version mockup-version">2.1.0</div>
+                                <div class="illus-popup-version mockup-version">2.2.0</div>
                             </div>
                             <div class="illus-popup-tabs">
                                 <div class="illus-popup-tab active">
@@ -1209,6 +1208,10 @@
             <div style="margin-top: 1.5rem; font-size: 0.8rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
                 <a href="../imprint" style="color: var(--text-muted); text-decoration: none;"><span>Legal Notice</span></a>
                 <a href="../privacy" style="color: var(--text-muted); text-decoration: none;"><span>Privacy Policy</span></a>
+                <a href="https://ko-fi.com/koaladev" target="_blank" title="Invítame a un café en Ko-Fi" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #ff5e5b; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
+                    <span aria-hidden="true">♥</span>
+                    <span>Ko-Fi</span>
+                </a>
                 <a href="https://mastodon.social/@koalastuff" rel="me" target="_blank" style="color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" style="display:block" viewBox="0 0 24 24"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38q.398-.092.786-.213c.585-.184 1.27-.39 1.774-.753a.06.06 0 0 0 .023-.043v-1.809a.05.05 0 0 0-.02-.041.05.05 0 0 0-.046-.01 20.3 20.3 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.6 5.6 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422q.059-.011.11-.024c2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545m-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102q0-1.965 1.011-3.12c.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164q1.012 1.155 1.012 3.12z"/></svg>
                     Mastodon

website/www/fr/index.html

@@ -6,9 +6,9 @@
     <title>KoalaSync | Synchronisez Netflix, YouTube et n'importe quelle vidéo avec vos amis</title>
     <meta name="description" content="Regardez Netflix, YouTube, Twitch et des vidéos HTML5 en synchro avec vos amis. Extension de navigateur gratuite et open-source. Aucune inscription requise.">
     
-    <link rel="preload" href="../style.512d0dfc.min.css" as="style">
+    <link rel="preload" href="../style.b511a1d2.min.css" as="style">
     <link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
-    <link rel="stylesheet" href="../style.512d0dfc.min.css">
+    <link rel="stylesheet" href="../style.b511a1d2.min.css">
     <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16x16.png">
     <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32x32.png">
     <link rel="apple-touch-icon" sizes="180x180" href="../assets/icon-192x192.png">
@@ -224,7 +224,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="globe-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en" >🇬🇧 English</option>
                         <option value="de" >🇩🇪 Deutsch</option>
@@ -252,7 +251,7 @@
     <header class="hero" id="main-content">
         <div class="container hero-grid">
             <div class="hero-text">
-                <a href="https://github.com/Shik3i/KoalaSync/blob/main/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
+                <a href="https://github.com/Shik3i/KoalaSync/blob/main/docs/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
                     <span class="version-text-en" lang="en">v2.1.0 OUT NOW</span>
                     <span class="version-text-de" lang="de">v2.1.0 JETZT VERFÜGBAR</span>
                 </a>
@@ -284,7 +283,7 @@
                         <div class="mock-header-title"><picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo"></picture>KoalaSync</div>
                         <a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="mock-version-link" title="Visit GitHub Repository">
                             <svg fill="currentColor" style="width:12px;height:12px;display:block" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/></svg>
-                            <span class="mockup-version">2.1.0</span>
+                            <span class="mockup-version">2.2.0</span>
                         </a>
                     </div>
                     <div class="mock-tabs">
@@ -547,7 +546,7 @@
 
                             <div style="margin-top: 16px; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; flex-shrink: 0;">
                                 <a href="https://github.com/Shik3i/KoalaSync" target="_blank" style="color: var(--text-muted); text-decoration: none; font-size: 10px; opacity: 0.6; display: block;">GitHub Repository</a>
-                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.1.0</div>
+                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.2.0</div>
                             </div>
                         </div>
                     </div>
@@ -797,7 +796,7 @@
                                 <strong><span>Localisation / Traduction</span></strong>
                                 <span class="feat-desc"><span>Langues d'interface disponibles et support de traduction.</span></span>
                             </td>
-                            <td class="check highlight">✔ <span>6 langues (et plus à venir)</span></td>
+                            <td class="check highlight">✔ <span>13 langues (et plus à venir)</span></td>
                             <td class="cross">
                                 ✘ <span>Anglais uniquement</span>
                             </td>
@@ -915,7 +914,7 @@
                                     <picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="14" height="14"></picture>
                                     <span>KoalaSync</span>
                                 </div>
-                                <div class="illus-popup-version mockup-version">2.1.0</div>
+                                <div class="illus-popup-version mockup-version">2.2.0</div>
                             </div>
                             <div class="illus-popup-tabs">
                                 <div class="illus-popup-tab active">
@@ -1209,6 +1208,10 @@
             <div style="margin-top: 1.5rem; font-size: 0.8rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
                 <a href="../imprint" style="color: var(--text-muted); text-decoration: none;"><span>Legal Notice</span></a>
                 <a href="../privacy" style="color: var(--text-muted); text-decoration: none;"><span>Privacy Policy</span></a>
+                <a href="https://ko-fi.com/koaladev" target="_blank" title="Offre-moi un café sur Ko-Fi" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #ff5e5b; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
+                    <span aria-hidden="true">♥</span>
+                    <span>Ko-Fi</span>
+                </a>
                 <a href="https://mastodon.social/@koalastuff" rel="me" target="_blank" style="color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" style="display:block" viewBox="0 0 24 24"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38q.398-.092.786-.213c.585-.184 1.27-.39 1.774-.753a.06.06 0 0 0 .023-.043v-1.809a.05.05 0 0 0-.02-.041.05.05 0 0 0-.046-.01 20.3 20.3 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.6 5.6 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422q.059-.011.11-.024c2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545m-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102q0-1.965 1.011-3.12c.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164q1.012 1.155 1.012 3.12z"/></svg>
                     Mastodon

website/www/imprint.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Legal Notice | KoalaSync</title>
-    <link rel="preload" href="style.512d0dfc.min.css" as="style">
-    <link rel="stylesheet" href="style.512d0dfc.min.css">
+    <link rel="preload" href="style.b511a1d2.min.css" as="style">
+    <link rel="stylesheet" href="style.b511a1d2.min.css">
     <link rel="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
     <meta name="robots" content="noindex">
 
@@ -52,7 +52,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="globe-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en">🇬🇧 English</option>
                         <option value="de">🇩🇪 Deutsch</option>

website/www/index.html

@@ -6,9 +6,9 @@
     <title>KoalaSync | Sync Netflix, YouTube & Any Video with Friends</title>
     <meta name="description" content="Watch Netflix, YouTube, Twitch & any HTML5 video in perfect sync with friends. Free, open-source browser extension for Chrome and Firefox. No sign-up needed.">
     
-    <link rel="preload" href="style.512d0dfc.min.css" as="style">
+    <link rel="preload" href="style.b511a1d2.min.css" as="style">
     <link rel="preload" as="image" href="assets/LookDownKoala.webp" imagesrcset="assets/LookDownKoala-1x.webp 90w, assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
-    <link rel="stylesheet" href="style.512d0dfc.min.css">
+    <link rel="stylesheet" href="style.b511a1d2.min.css">
     <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
     <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
     <link rel="apple-touch-icon" sizes="180x180" href="assets/icon-192x192.png">
@@ -224,7 +224,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="globe-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en" selected>🇬🇧 English</option>
                         <option value="de" >🇩🇪 Deutsch</option>
@@ -252,7 +251,7 @@
     <header class="hero" id="main-content">
         <div class="container hero-grid">
             <div class="hero-text">
-                <a href="https://github.com/Shik3i/KoalaSync/blob/main/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
+                <a href="https://github.com/Shik3i/KoalaSync/blob/main/docs/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
                     <span class="version-text-en" lang="en">v2.1.0 OUT NOW</span>
                     <span class="version-text-de" lang="de">v2.1.0 JETZT VERFÜGBAR</span>
                 </a>
@@ -284,7 +283,7 @@
                         <div class="mock-header-title"><picture><source srcset="assets/NewLogoIcon.avif" type="image/avif"><img src="assets/NewLogoIcon.webp" alt="KoalaSync Logo"></picture>KoalaSync</div>
                         <a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="mock-version-link" title="Visit GitHub Repository">
                             <svg fill="currentColor" style="width:12px;height:12px;display:block" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/></svg>
-                            <span class="mockup-version">2.1.0</span>
+                            <span class="mockup-version">2.2.0</span>
                         </a>
                     </div>
                     <div class="mock-tabs">
@@ -547,7 +546,7 @@
 
                             <div style="margin-top: 16px; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; flex-shrink: 0;">
                                 <a href="https://github.com/Shik3i/KoalaSync" target="_blank" style="color: var(--text-muted); text-decoration: none; font-size: 10px; opacity: 0.6; display: block;">GitHub Repository</a>
-                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.1.0</div>
+                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.2.0</div>
                             </div>
                         </div>
                     </div>
@@ -797,7 +796,7 @@
                                 <strong><span>Localization / Translation</span></strong>
                                 <span class="feat-desc"><span>Available interface languages and translation support.</span></span>
                             </td>
-                            <td class="check highlight">✔ <span>6 Languages (and growing)</span></td>
+                            <td class="check highlight">✔ <span>13 Languages (and growing)</span></td>
                             <td class="cross">
                                 ✘ <span>English only</span>
                             </td>
@@ -915,7 +914,7 @@
                                     <picture><source srcset="assets/NewLogoIcon.avif" type="image/avif"><img src="assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="14" height="14"></picture>
                                     <span>KoalaSync</span>
                                 </div>
-                                <div class="illus-popup-version mockup-version">2.1.0</div>
+                                <div class="illus-popup-version mockup-version">2.2.0</div>
                             </div>
                             <div class="illus-popup-tabs">
                                 <div class="illus-popup-tab active">
@@ -1209,6 +1208,10 @@
             <div style="margin-top: 1.5rem; font-size: 0.8rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
                 <a href="imprint" style="color: var(--text-muted); text-decoration: none;"><span>Legal Notice</span></a>
                 <a href="privacy" style="color: var(--text-muted); text-decoration: none;"><span>Privacy Policy</span></a>
+                <a href="https://ko-fi.com/koaladev" target="_blank" title="Buy me a coffee on Ko-Fi" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #ff5e5b; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
+                    <span aria-hidden="true">♥</span>
+                    <span>Ko-Fi</span>
+                </a>
                 <a href="https://mastodon.social/@koalastuff" rel="me" target="_blank" style="color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" style="display:block" viewBox="0 0 24 24"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38q.398-.092.786-.213c.585-.184 1.27-.39 1.774-.753a.06.06 0 0 0 .023-.043v-1.809a.05.05 0 0 0-.02-.041.05.05 0 0 0-.046-.01 20.3 20.3 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.6 5.6 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422q.059-.011.11-.024c2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545m-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102q0-1.965 1.011-3.12c.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164q1.012 1.155 1.012 3.12z"/></svg>
                     Mastodon

website/www/it/index.html

@@ -6,9 +6,9 @@
     <title>KoalaSync | Sincronizza Netflix, YouTube e qualsiasi video con gli amici</title>
     <meta name="description" content="Guarda Netflix, YouTube, Twitch e qualsiasi video HTML5 in perfetta sincronia con gli amici. Estensione del browser gratuita e open source per Chrome e Firefox. Nessuna registrazione richiesta.">
     
-    <link rel="preload" href="../style.512d0dfc.min.css" as="style">
+    <link rel="preload" href="../style.b511a1d2.min.css" as="style">
     <link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
-    <link rel="stylesheet" href="../style.512d0dfc.min.css">
+    <link rel="stylesheet" href="../style.b511a1d2.min.css">
     <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16x16.png">
     <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32x32.png">
     <link rel="apple-touch-icon" sizes="180x180" href="../assets/icon-192x192.png">
@@ -224,7 +224,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="globe-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en" >🇬🇧 English</option>
                         <option value="de" >🇩🇪 Deutsch</option>
@@ -252,7 +251,7 @@
     <header class="hero" id="main-content">
         <div class="container hero-grid">
             <div class="hero-text">
-                <a href="https://github.com/Shik3i/KoalaSync/blob/main/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
+                <a href="https://github.com/Shik3i/KoalaSync/blob/main/docs/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
                     <span class="version-text-en" lang="en">v2.1.0 OUT NOW</span>
                     <span class="version-text-de" lang="de">v2.1.0 JETZT VERFÜGBAR</span>
                 </a>
@@ -284,7 +283,7 @@
                         <div class="mock-header-title"><picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo"></picture>KoalaSync</div>
                         <a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="mock-version-link" title="Visit GitHub Repository">
                             <svg fill="currentColor" style="width:12px;height:12px;display:block" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/></svg>
-                            <span class="mockup-version">2.1.0</span>
+                            <span class="mockup-version">2.2.0</span>
                         </a>
                     </div>
                     <div class="mock-tabs">
@@ -547,7 +546,7 @@
 
                             <div style="margin-top: 16px; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; flex-shrink: 0;">
                                 <a href="https://github.com/Shik3i/KoalaSync" target="_blank" style="color: var(--text-muted); text-decoration: none; font-size: 10px; opacity: 0.6; display: block;">GitHub Repository</a>
-                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.1.0</div>
+                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.2.0</div>
                             </div>
                         </div>
                     </div>
@@ -915,7 +914,7 @@
                                     <picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="14" height="14"></picture>
                                     <span>KoalaSync</span>
                                 </div>
-                                <div class="illus-popup-version mockup-version">2.1.0</div>
+                                <div class="illus-popup-version mockup-version">2.2.0</div>
                             </div>
                             <div class="illus-popup-tabs">
                                 <div class="illus-popup-tab active">
@@ -1209,6 +1208,10 @@
             <div style="margin-top: 1.5rem; font-size: 0.8rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
                 <a href="../imprint" style="color: var(--text-muted); text-decoration: none;"><span>Note Legali</span></a>
                 <a href="../privacy" style="color: var(--text-muted); text-decoration: none;"><span>Informativa sulla Privacy</span></a>
+                <a href="https://ko-fi.com/koaladev" target="_blank" title="Offrimi un caffè su Ko-Fi" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #ff5e5b; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
+                    <span aria-hidden="true">♥</span>
+                    <span>Ko-Fi</span>
+                </a>
                 <a href="https://mastodon.social/@koalastuff" rel="me" target="_blank" style="color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" style="display:block" viewBox="0 0 24 24"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38q.398-.092.786-.213c.585-.184 1.27-.39 1.774-.753a.06.06 0 0 0 .023-.043v-1.809a.05.05 0 0 0-.02-.041.05.05 0 0 0-.046-.01 20.3 20.3 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.6 5.6 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422q.059-.011.11-.024c2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545m-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102q0-1.965 1.011-3.12c.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164q1.012 1.155 1.012 3.12z"/></svg>
                     Mastodon

website/www/ja/index.html

@@ -6,9 +6,9 @@
     <title>KoalaSync | Netflix、YouTube、あらゆる動画を友達と同期視聴</title>
     <meta name="description" content="Netflix、YouTube、Twitch、およびあらゆるHTML5動画を友達と完全に同期して視聴。ChromeおよびFirefox用の無料のオープンソースブラウザ拡張機能。登録不要。">
     
-    <link rel="preload" href="../style.512d0dfc.min.css" as="style">
+    <link rel="preload" href="../style.b511a1d2.min.css" as="style">
     <link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
-    <link rel="stylesheet" href="../style.512d0dfc.min.css">
+    <link rel="stylesheet" href="../style.b511a1d2.min.css">
     <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16x16.png">
     <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32x32.png">
     <link rel="apple-touch-icon" sizes="180x180" href="../assets/icon-192x192.png">
@@ -224,7 +224,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="globe-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en" >🇬🇧 English</option>
                         <option value="de" >🇩🇪 Deutsch</option>
@@ -252,7 +251,7 @@
     <header class="hero" id="main-content">
         <div class="container hero-grid">
             <div class="hero-text">
-                <a href="https://github.com/Shik3i/KoalaSync/blob/main/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
+                <a href="https://github.com/Shik3i/KoalaSync/blob/main/docs/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
                     <span class="version-text-en" lang="en">v2.1.0 OUT NOW</span>
                     <span class="version-text-de" lang="de">v2.1.0 JETZT VERFÜGBAR</span>
                 </a>
@@ -284,7 +283,7 @@
                         <div class="mock-header-title"><picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo"></picture>KoalaSync</div>
                         <a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="mock-version-link" title="Visit GitHub Repository">
                             <svg fill="currentColor" style="width:12px;height:12px;display:block" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/></svg>
-                            <span class="mockup-version">2.1.0</span>
+                            <span class="mockup-version">2.2.0</span>
                         </a>
                     </div>
                     <div class="mock-tabs">
@@ -547,7 +546,7 @@
 
                             <div style="margin-top: 16px; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; flex-shrink: 0;">
                                 <a href="https://github.com/Shik3i/KoalaSync" target="_blank" style="color: var(--text-muted); text-decoration: none; font-size: 10px; opacity: 0.6; display: block;">GitHub Repository</a>
-                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.1.0</div>
+                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.2.0</div>
                             </div>
                         </div>
                     </div>
@@ -915,7 +914,7 @@
                                     <picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="14" height="14"></picture>
                                     <span>KoalaSync</span>
                                 </div>
-                                <div class="illus-popup-version mockup-version">2.1.0</div>
+                                <div class="illus-popup-version mockup-version">2.2.0</div>
                             </div>
                             <div class="illus-popup-tabs">
                                 <div class="illus-popup-tab active">
@@ -1209,6 +1208,10 @@
             <div style="margin-top: 1.5rem; font-size: 0.8rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
                 <a href="../imprint" style="color: var(--text-muted); text-decoration: none;"><span>法的通知</span></a>
                 <a href="../privacy" style="color: var(--text-muted); text-decoration: none;"><span>プライバシーポリシー</span></a>
+                <a href="https://ko-fi.com/koaladev" target="_blank" title="Ko-Fiでコーヒーをおごる" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #ff5e5b; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
+                    <span aria-hidden="true">♥</span>
+                    <span>Ko-Fi</span>
+                </a>
                 <a href="https://mastodon.social/@koalastuff" rel="me" target="_blank" style="color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" style="display:block" viewBox="0 0 24 24"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38q.398-.092.786-.213c.585-.184 1.27-.39 1.774-.753a.06.06 0 0 0 .023-.043v-1.809a.05.05 0 0 0-.02-.041.05.05 0 0 0-.046-.01 20.3 20.3 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.6 5.6 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422q.059-.011.11-.024c2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545m-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102q0-1.965 1.011-3.12c.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164q1.012 1.155 1.012 3.12z"/></svg>
                     Mastodon

website/www/join.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Join Room | KoalaSync</title>
-    <link rel="preload" href="style.512d0dfc.min.css" as="style">
-    <link rel="stylesheet" href="style.512d0dfc.min.css">
+    <link rel="preload" href="style.b511a1d2.min.css" as="style">
+    <link rel="stylesheet" href="style.b511a1d2.min.css">
     <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
     <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
     <link rel="apple-touch-icon" sizes="180x180" href="assets/icon-192x192.png">
@@ -56,7 +56,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="globe-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en">🇬🇧 English</option>
                         <option value="de">🇩🇪 Deutsch</option>

website/www/ko/index.html

@@ -6,9 +6,9 @@
     <title>KoalaSync | Netflix, YouTube 및 모든 비디오를 친구와 실시간 동기화 시청</title>
     <meta name="description" content="Netflix, YouTube, Twitch 및 모든 HTML5 비디오를 친구들과 완벽하게 동기화하여 시청하세요. Chrome 및 Firefox용 무료 오픈 소스 브라우저 확장 프로그램. 가입 필요 없음.">
     
-    <link rel="preload" href="../style.512d0dfc.min.css" as="style">
+    <link rel="preload" href="../style.b511a1d2.min.css" as="style">
     <link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
-    <link rel="stylesheet" href="../style.512d0dfc.min.css">
+    <link rel="stylesheet" href="../style.b511a1d2.min.css">
     <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16x16.png">
     <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32x32.png">
     <link rel="apple-touch-icon" sizes="180x180" href="../assets/icon-192x192.png">
@@ -127,7 +127,7 @@
           "@type": "HowToStep",
           "position": 2,
           "name": "방 만들기",
-          "text": "확장 프로그램 팝업을 열고 '새 방 만들기'를 클릭하세요. 초대 링크가 클rip보드에 자동으로 복사됩니다.",
+          "text": "확장 프로그램 팝업을 열고 '새 방 만들기'를 클릭하세요. 초대 링크가 클립보드에 자동으로 복사됩니다.",
           "url": "https://sync.koalastuff.net/#how-it-works"
         },
         {
@@ -224,7 +224,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="globe-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en" >🇬🇧 English</option>
                         <option value="de" >🇩🇪 Deutsch</option>
@@ -252,7 +251,7 @@
     <header class="hero" id="main-content">
         <div class="container hero-grid">
             <div class="hero-text">
-                <a href="https://github.com/Shik3i/KoalaSync/blob/main/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
+                <a href="https://github.com/Shik3i/KoalaSync/blob/main/docs/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
                     <span class="version-text-en" lang="en">v2.1.0 OUT NOW</span>
                     <span class="version-text-de" lang="de">v2.1.0 JETZT VERFÜGBAR</span>
                 </a>
@@ -284,7 +283,7 @@
                         <div class="mock-header-title"><picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo"></picture>KoalaSync</div>
                         <a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="mock-version-link" title="Visit GitHub Repository">
                             <svg fill="currentColor" style="width:12px;height:12px;display:block" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/></svg>
-                            <span class="mockup-version">2.1.0</span>
+                            <span class="mockup-version">2.2.0</span>
                         </a>
                     </div>
                     <div class="mock-tabs">
@@ -547,7 +546,7 @@
 
                             <div style="margin-top: 16px; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; flex-shrink: 0;">
                                 <a href="https://github.com/Shik3i/KoalaSync" target="_blank" style="color: var(--text-muted); text-decoration: none; font-size: 10px; opacity: 0.6; display: block;">GitHub Repository</a>
-                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.1.0</div>
+                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.2.0</div>
                             </div>
                         </div>
                     </div>
@@ -915,7 +914,7 @@
                                     <picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="14" height="14"></picture>
                                     <span>KoalaSync</span>
                                 </div>
-                                <div class="illus-popup-version mockup-version">2.1.0</div>
+                                <div class="illus-popup-version mockup-version">2.2.0</div>
                             </div>
                             <div class="illus-popup-tabs">
                                 <div class="illus-popup-tab active">
@@ -1209,6 +1208,10 @@
             <div style="margin-top: 1.5rem; font-size: 0.8rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
                 <a href="../imprint" style="color: var(--text-muted); text-decoration: none;"><span>법적 고지</span></a>
                 <a href="../privacy" style="color: var(--text-muted); text-decoration: none;"><span>개인정보 처리방침</span></a>
+                <a href="https://ko-fi.com/koaladev" target="_blank" title="Ko-Fi에서 커피 한 잔 사주세요" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #ff5e5b; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
+                    <span aria-hidden="true">♥</span>
+                    <span>Ko-Fi</span>
+                </a>
                 <a href="https://mastodon.social/@koalastuff" rel="me" target="_blank" style="color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" style="display:block" viewBox="0 0 24 24"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38q.398-.092.786-.213c.585-.184 1.27-.39 1.774-.753a.06.06 0 0 0 .023-.043v-1.809a.05.05 0 0 0-.02-.041.05.05 0 0 0-.046-.01 20.3 20.3 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.6 5.6 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422q.059-.011.11-.024c2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545m-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102q0-1.965 1.011-3.12c.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164q1.012 1.155 1.012 3.12z"/></svg>
                     Mastodon

website/www/nl/index.html

@@ -6,9 +6,9 @@
     <title>KoalaSync | Synchroniseer Netflix, YouTube & elke video met vrienden</title>
     <meta name="description" content="Bekijk Netflix, YouTube, Twitch en elke HTML5-video in perfecte synchronisatie met vrienden. Gratis, open-source browserextensie voor Chrome en Firefox. Geen registratie nodig.">
     
-    <link rel="preload" href="../style.512d0dfc.min.css" as="style">
+    <link rel="preload" href="../style.b511a1d2.min.css" as="style">
     <link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
-    <link rel="stylesheet" href="../style.512d0dfc.min.css">
+    <link rel="stylesheet" href="../style.b511a1d2.min.css">
     <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16x16.png">
     <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32x32.png">
     <link rel="apple-touch-icon" sizes="180x180" href="../assets/icon-192x192.png">
@@ -224,7 +224,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="globe-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en" >🇬🇧 English</option>
                         <option value="de" >🇩🇪 Deutsch</option>
@@ -252,7 +251,7 @@
     <header class="hero" id="main-content">
         <div class="container hero-grid">
             <div class="hero-text">
-                <a href="https://github.com/Shik3i/KoalaSync/blob/main/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
+                <a href="https://github.com/Shik3i/KoalaSync/blob/main/docs/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
                     <span class="version-text-en" lang="en">v2.1.0 OUT NOW</span>
                     <span class="version-text-de" lang="de">v2.1.0 JETZT VERFÜGBAR</span>
                 </a>
@@ -284,7 +283,7 @@
                         <div class="mock-header-title"><picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo"></picture>KoalaSync</div>
                         <a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="mock-version-link" title="Visit GitHub Repository">
                             <svg fill="currentColor" style="width:12px;height:12px;display:block" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/></svg>
-                            <span class="mockup-version">2.1.0</span>
+                            <span class="mockup-version">2.2.0</span>
                         </a>
                     </div>
                     <div class="mock-tabs">
@@ -547,7 +546,7 @@
 
                             <div style="margin-top: 16px; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; flex-shrink: 0;">
                                 <a href="https://github.com/Shik3i/KoalaSync" target="_blank" style="color: var(--text-muted); text-decoration: none; font-size: 10px; opacity: 0.6; display: block;">GitHub Repository</a>
-                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.1.0</div>
+                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.2.0</div>
                             </div>
                         </div>
                     </div>
@@ -915,7 +914,7 @@
                                     <picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="14" height="14"></picture>
                                     <span>KoalaSync</span>
                                 </div>
-                                <div class="illus-popup-version mockup-version">2.1.0</div>
+                                <div class="illus-popup-version mockup-version">2.2.0</div>
                             </div>
                             <div class="illus-popup-tabs">
                                 <div class="illus-popup-tab active">
@@ -1209,6 +1208,10 @@
             <div style="margin-top: 1.5rem; font-size: 0.8rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
                 <a href="../imprint" style="color: var(--text-muted); text-decoration: none;"><span>Juridische kennisgeving</span></a>
                 <a href="../privacy" style="color: var(--text-muted); text-decoration: none;"><span>Privacybeleid</span></a>
+                <a href="https://ko-fi.com/koaladev" target="_blank" title="Trakteer op een koffie via Ko-Fi" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #ff5e5b; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
+                    <span aria-hidden="true">♥</span>
+                    <span>Ko-Fi</span>
+                </a>
                 <a href="https://mastodon.social/@koalastuff" rel="me" target="_blank" style="color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" style="display:block" viewBox="0 0 24 24"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38q.398-.092.786-.213c.585-.184 1.27-.39 1.774-.753a.06.06 0 0 0 .023-.043v-1.809a.05.05 0 0 0-.02-.041.05.05 0 0 0-.046-.01 20.3 20.3 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.6 5.6 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422q.059-.011.11-.024c2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545m-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102q0-1.965 1.011-3.12c.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164q1.012 1.155 1.012 3.12z"/></svg>
                     Mastodon

website/www/pl/index.html

@@ -6,9 +6,9 @@
     <title>KoalaSync | Synchronizuj Netflix, YouTube i dowolne wideo ze znajomymi</title>
     <meta name="description" content="Oglądaj Netflix, YouTube, Twitch i dowolne wideo HTML5 w idealnej synchronizacji ze znajomymi. Darmowe rozszerzenie o otwartym kodzie dla Chrome i Firefox. Bez rejestracji.">
     
-    <link rel="preload" href="../style.512d0dfc.min.css" as="style">
+    <link rel="preload" href="../style.b511a1d2.min.css" as="style">
     <link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
-    <link rel="stylesheet" href="../style.512d0dfc.min.css">
+    <link rel="stylesheet" href="../style.b511a1d2.min.css">
     <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16x16.png">
     <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32x32.png">
     <link rel="apple-touch-icon" sizes="180x180" href="../assets/icon-192x192.png">
@@ -224,7 +224,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="globe-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en" >🇬🇧 English</option>
                         <option value="de" >🇩🇪 Deutsch</option>
@@ -252,7 +251,7 @@
     <header class="hero" id="main-content">
         <div class="container hero-grid">
             <div class="hero-text">
-                <a href="https://github.com/Shik3i/KoalaSync/blob/main/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
+                <a href="https://github.com/Shik3i/KoalaSync/blob/main/docs/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
                     <span class="version-text-en" lang="en">v2.1.0 OUT NOW</span>
                     <span class="version-text-de" lang="de">v2.1.0 JETZT VERFÜGBAR</span>
                 </a>
@@ -284,7 +283,7 @@
                         <div class="mock-header-title"><picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo"></picture>KoalaSync</div>
                         <a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="mock-version-link" title="Visit GitHub Repository">
                             <svg fill="currentColor" style="width:12px;height:12px;display:block" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/></svg>
-                            <span class="mockup-version">2.1.0</span>
+                            <span class="mockup-version">2.2.0</span>
                         </a>
                     </div>
                     <div class="mock-tabs">
@@ -547,7 +546,7 @@
 
                             <div style="margin-top: 16px; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; flex-shrink: 0;">
                                 <a href="https://github.com/Shik3i/KoalaSync" target="_blank" style="color: var(--text-muted); text-decoration: none; font-size: 10px; opacity: 0.6; display: block;">GitHub Repository</a>
-                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.1.0</div>
+                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.2.0</div>
                             </div>
                         </div>
                     </div>
@@ -915,7 +914,7 @@
                                     <picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="14" height="14"></picture>
                                     <span>KoalaSync</span>
                                 </div>
-                                <div class="illus-popup-version mockup-version">2.1.0</div>
+                                <div class="illus-popup-version mockup-version">2.2.0</div>
                             </div>
                             <div class="illus-popup-tabs">
                                 <div class="illus-popup-tab active">
@@ -1209,6 +1208,10 @@
             <div style="margin-top: 1.5rem; font-size: 0.8rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
                 <a href="../imprint" style="color: var(--text-muted); text-decoration: none;"><span>Nota prawna</span></a>
                 <a href="../privacy" style="color: var(--text-muted); text-decoration: none;"><span>Polityka prywatności</span></a>
+                <a href="https://ko-fi.com/koaladev" target="_blank" title="Postaw kawę na Ko-Fi" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #ff5e5b; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
+                    <span aria-hidden="true">♥</span>
+                    <span>Ko-Fi</span>
+                </a>
                 <a href="https://mastodon.social/@koalastuff" rel="me" target="_blank" style="color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" style="display:block" viewBox="0 0 24 24"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38q.398-.092.786-.213c.585-.184 1.27-.39 1.774-.753a.06.06 0 0 0 .023-.043v-1.809a.05.05 0 0 0-.02-.041.05.05 0 0 0-.046-.01 20.3 20.3 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.6 5.6 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422q.059-.011.11-.024c2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545m-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102q0-1.965 1.011-3.12c.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164q1.012 1.155 1.012 3.12z"/></svg>
                     Mastodon

website/www/privacy.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Privacy Policy | KoalaSync</title>
-    <link rel="preload" href="style.512d0dfc.min.css" as="style">
-    <link rel="stylesheet" href="style.512d0dfc.min.css">
+    <link rel="preload" href="style.b511a1d2.min.css" as="style">
+    <link rel="stylesheet" href="style.b511a1d2.min.css">
     <link rel="icon" type="image/webp" href="assets/NewLogoIcon_64.webp">
     <meta name="robots" content="noindex">
 
@@ -52,7 +52,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="globe-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en">🇬🇧 English</option>
                         <option value="de">🇩🇪 Deutsch</option>

website/www/pt-BR/index.html

@@ -6,9 +6,9 @@
     <title>KoalaSync | Sincronize Netflix, YouTube e qualquer vídeo com amigos</title>
     <meta name="description" content="Assista Netflix, YouTube, Twitch e qualquer vídeo HTML5 em perfeita sincronia com amigos. Extensão de navegador gratuita e de código aberto. Sem registro.">
     
-    <link rel="preload" href="../style.512d0dfc.min.css" as="style">
+    <link rel="preload" href="../style.b511a1d2.min.css" as="style">
     <link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
-    <link rel="stylesheet" href="../style.512d0dfc.min.css">
+    <link rel="stylesheet" href="../style.b511a1d2.min.css">
     <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16x16.png">
     <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32x32.png">
     <link rel="apple-touch-icon" sizes="180x180" href="../assets/icon-192x192.png">
@@ -224,7 +224,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="globe-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en" >🇬🇧 English</option>
                         <option value="de" >🇩🇪 Deutsch</option>
@@ -252,7 +251,7 @@
     <header class="hero" id="main-content">
         <div class="container hero-grid">
             <div class="hero-text">
-                <a href="https://github.com/Shik3i/KoalaSync/blob/main/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
+                <a href="https://github.com/Shik3i/KoalaSync/blob/main/docs/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
                     <span class="version-text-en" lang="en">v2.1.0 OUT NOW</span>
                     <span class="version-text-de" lang="de">v2.1.0 JETZT VERFÜGBAR</span>
                 </a>
@@ -284,7 +283,7 @@
                         <div class="mock-header-title"><picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo"></picture>KoalaSync</div>
                         <a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="mock-version-link" title="Visit GitHub Repository">
                             <svg fill="currentColor" style="width:12px;height:12px;display:block" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/></svg>
-                            <span class="mockup-version">2.1.0</span>
+                            <span class="mockup-version">2.2.0</span>
                         </a>
                     </div>
                     <div class="mock-tabs">
@@ -547,7 +546,7 @@
 
                             <div style="margin-top: 16px; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; flex-shrink: 0;">
                                 <a href="https://github.com/Shik3i/KoalaSync" target="_blank" style="color: var(--text-muted); text-decoration: none; font-size: 10px; opacity: 0.6; display: block;">GitHub Repository</a>
-                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.1.0</div>
+                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.2.0</div>
                             </div>
                         </div>
                     </div>
@@ -797,7 +796,7 @@
                                 <strong><span>Localização / Tradução</span></strong>
                                 <span class="feat-desc"><span>Idiomas de interface disponíveis e suporte a tradução.</span></span>
                             </td>
-                            <td class="check highlight">✔ <span>6 idiomas (e crescendo)</span></td>
+                            <td class="check highlight">✔ <span>13 idiomas (e crescendo)</span></td>
                             <td class="cross">
                                 ✘ <span>Apenas inglês</span>
                             </td>
@@ -915,7 +914,7 @@
                                     <picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="14" height="14"></picture>
                                     <span>KoalaSync</span>
                                 </div>
-                                <div class="illus-popup-version mockup-version">2.1.0</div>
+                                <div class="illus-popup-version mockup-version">2.2.0</div>
                             </div>
                             <div class="illus-popup-tabs">
                                 <div class="illus-popup-tab active">
@@ -1209,6 +1208,10 @@
             <div style="margin-top: 1.5rem; font-size: 0.8rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
                 <a href="../imprint" style="color: var(--text-muted); text-decoration: none;"><span>Legal Notice</span></a>
                 <a href="../privacy" style="color: var(--text-muted); text-decoration: none;"><span>Privacy Policy</span></a>
+                <a href="https://ko-fi.com/koaladev" target="_blank" title="Me pague um café no Ko-Fi" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #ff5e5b; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
+                    <span aria-hidden="true">♥</span>
+                    <span>Ko-Fi</span>
+                </a>
                 <a href="https://mastodon.social/@koalastuff" rel="me" target="_blank" style="color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" style="display:block" viewBox="0 0 24 24"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38q.398-.092.786-.213c.585-.184 1.27-.39 1.774-.753a.06.06 0 0 0 .023-.043v-1.809a.05.05 0 0 0-.02-.041.05.05 0 0 0-.046-.01 20.3 20.3 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.6 5.6 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422q.059-.011.11-.024c2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545m-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102q0-1.965 1.011-3.12c.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164q1.012 1.155 1.012 3.12z"/></svg>
                     Mastodon

website/www/pt/index.html

@@ -6,9 +6,9 @@
     <title>KoalaSync | Sincronize Netflix, YouTube e qualquer vídeo com os amigos</title>
     <meta name="description" content="Veja Netflix, YouTube, Twitch e qualquer vídeo HTML5 em sincronia perfeita com os amigos. Extensão de navegador gratuita e de código aberto para Chrome e Firefox. Sem registo necessário.">
     
-    <link rel="preload" href="../style.512d0dfc.min.css" as="style">
+    <link rel="preload" href="../style.b511a1d2.min.css" as="style">
     <link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
-    <link rel="stylesheet" href="../style.512d0dfc.min.css">
+    <link rel="stylesheet" href="../style.b511a1d2.min.css">
     <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16x16.png">
     <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32x32.png">
     <link rel="apple-touch-icon" sizes="180x180" href="../assets/icon-192x192.png">
@@ -224,7 +224,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="globe-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en" >🇬🇧 English</option>
                         <option value="de" >🇩🇪 Deutsch</option>
@@ -252,7 +251,7 @@
     <header class="hero" id="main-content">
         <div class="container hero-grid">
             <div class="hero-text">
-                <a href="https://github.com/Shik3i/KoalaSync/blob/main/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
+                <a href="https://github.com/Shik3i/KoalaSync/blob/main/docs/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
                     <span class="version-text-en" lang="en">v2.1.0 OUT NOW</span>
                     <span class="version-text-de" lang="de">v2.1.0 JETZT VERFÜGBAR</span>
                 </a>
@@ -284,7 +283,7 @@
                         <div class="mock-header-title"><picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo"></picture>KoalaSync</div>
                         <a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="mock-version-link" title="Visit GitHub Repository">
                             <svg fill="currentColor" style="width:12px;height:12px;display:block" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/></svg>
-                            <span class="mockup-version">2.1.0</span>
+                            <span class="mockup-version">2.2.0</span>
                         </a>
                     </div>
                     <div class="mock-tabs">
@@ -304,7 +303,7 @@
                                     <span class="mock-server-badge" style="font-size: 0.6rem; color: var(--text-muted);">Servidor Oficial</span>
                             </div>
                             <div class="mock-card">
-                                    <div class="mock-label" title="Share this link with friends so they can join">Link de Invito</div>
+                                    <div class="mock-label" title="Share this link with friends so they can join">Link de Convite</div>
                                 <div class="mock-invite-box">
                                     <input type="text" class="mock-input" value="https://sync.koalastuff.net/join#join:brave-eagle-80:pass" readonly style="flex: 1;" aria-label="Invite link">
                                     <button class="mock-btn" style="width: 40px; padding: 0.45rem 0; flex-shrink: 0; background: #334155;" title="Copy Invite Link"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="13" height="13" x="9" y="9" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
@@ -331,7 +330,7 @@
                                     </div>
                                 </div>
                             </div>
-                                <button class="mock-btn" style="background:#ef4444; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; border: 1px solid #ef4444;">Sair della Sala</button>
+                                <button class="mock-btn" style="background:#ef4444; width:100%; border: none; padding: 10px; border-radius: 8px; color: white; font-weight: 700; cursor: pointer; border: 1px solid #ef4444;">Sair da Sala</button>
                         </div>
 
                         <!-- SYNC TAB -->
@@ -351,7 +350,7 @@
                                 </label>
                                 <button class="mock-btn" style="background:transparent; border: 1px solid #334155; border-radius: 6px; padding: 2px 6px; font-size: 0.65rem; cursor:default; opacity:0.8; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap;" title="Copy Invite Link">
                                     <span><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" viewBox="0 0 24 24"><rect width="13" height="13" x="9" y="9" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span>
-                                    Link de Invito
+                                    Link de Convite
                                 </button>
                             </div>
                             <div style="display: flex; gap: 8px; margin-bottom: 12px;">
@@ -547,7 +546,7 @@
 
                             <div style="margin-top: 16px; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; flex-shrink: 0;">
                                 <a href="https://github.com/Shik3i/KoalaSync" target="_blank" style="color: var(--text-muted); text-decoration: none; font-size: 10px; opacity: 0.6; display: block;">GitHub Repository</a>
-                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.1.0</div>
+                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.2.0</div>
                             </div>
                         </div>
                     </div>
@@ -639,7 +638,7 @@
                 <span>Porquê KoalaSync?</span>
             </h2>
             <p style="text-align: center; color: var(--text-muted); margin-bottom: 4rem;">
-                <span>Construído para uma sincronizzazione fiável, design focado na privacidade e configuração simples.</span>
+                <span>Construído para uma sincronização fiável, design focado na privacidade e configuração simples.</span>
             </p>
             
             <div class="features-grid">
@@ -651,7 +650,7 @@
                         </span>
                         <span>Controlo Total / Sincronização Instantânea</span>
                     </h3>
-                    <p>Um pausa, todos pausam. Um avança, todos seguem. O nosso protocolo di sincronizzazione a duas fases coordena a reprodução em tempo reale em todos os participantes.</p>
+                    <p>Um pausa, todos pausam. Um avança, todos seguem. O nosso protocolo de sincronização a duas fases coordena a reprodução em tempo real em todos os participantes.</p>
                 </div>
 
                 <!-- Card 2: Endless Binge-Watching (Bento Standard) -->
@@ -915,7 +914,7 @@
                                     <picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="14" height="14"></picture>
                                     <span>KoalaSync</span>
                                 </div>
-                                <div class="illus-popup-version mockup-version">2.1.0</div>
+                                <div class="illus-popup-version mockup-version">2.2.0</div>
                             </div>
                             <div class="illus-popup-tabs">
                                 <div class="illus-popup-tab active">
@@ -1209,6 +1208,10 @@
             <div style="margin-top: 1.5rem; font-size: 0.8rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
                 <a href="../imprint" style="color: var(--text-muted); text-decoration: none;"><span>Aviso Legal</span></a>
                 <a href="../privacy" style="color: var(--text-muted); text-decoration: none;"><span>Política de Privacidade</span></a>
+                <a href="https://ko-fi.com/koaladev" target="_blank" title="Oferece um café no Ko-Fi" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #ff5e5b; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
+                    <span aria-hidden="true">♥</span>
+                    <span>Ko-Fi</span>
+                </a>
                 <a href="https://mastodon.social/@koalastuff" rel="me" target="_blank" style="color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" style="display:block" viewBox="0 0 24 24"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38q.398-.092.786-.213c.585-.184 1.27-.39 1.774-.753a.06.06 0 0 0 .023-.043v-1.809a.05.05 0 0 0-.02-.041.05.05 0 0 0-.046-.01 20.3 20.3 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.6 5.6 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422q.059-.011.11-.024c2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545m-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102q0-1.965 1.011-3.12c.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164q1.012 1.155 1.012 3.12z"/></svg>
                     Mastodon

website/www/ru/index.html

@@ -6,9 +6,9 @@
     <title>KoalaSync | Синхронизация Netflix, YouTube и любого видео с друзьями</title>
     <meta name="description" content="Смотрите Netflix, YouTube, Twitch и любые HTML5-видео в синхронизации с друзьями. Бесплатное расширение браузера с открытым кодом. Регистрация не требуется.">
     
-    <link rel="preload" href="../style.512d0dfc.min.css" as="style">
+    <link rel="preload" href="../style.b511a1d2.min.css" as="style">
     <link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
-    <link rel="stylesheet" href="../style.512d0dfc.min.css">
+    <link rel="stylesheet" href="../style.b511a1d2.min.css">
     <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16x16.png">
     <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32x32.png">
     <link rel="apple-touch-icon" sizes="180x180" href="../assets/icon-192x192.png">
@@ -224,7 +224,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="globe-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en" >🇬🇧 English</option>
                         <option value="de" >🇩🇪 Deutsch</option>
@@ -252,7 +251,7 @@
     <header class="hero" id="main-content">
         <div class="container hero-grid">
             <div class="hero-text">
-                <a href="https://github.com/Shik3i/KoalaSync/blob/main/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
+                <a href="https://github.com/Shik3i/KoalaSync/blob/main/docs/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
                     <span class="version-text-en" lang="en">v2.1.0 OUT NOW</span>
                     <span class="version-text-de" lang="de">v2.1.0 JETZT VERFÜGBAR</span>
                 </a>
@@ -284,7 +283,7 @@
                         <div class="mock-header-title"><picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo"></picture>KoalaSync</div>
                         <a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="mock-version-link" title="Visit GitHub Repository">
                             <svg fill="currentColor" style="width:12px;height:12px;display:block" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/></svg>
-                            <span class="mockup-version">2.1.0</span>
+                            <span class="mockup-version">2.2.0</span>
                         </a>
                     </div>
                     <div class="mock-tabs">
@@ -547,7 +546,7 @@
 
                             <div style="margin-top: 16px; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; flex-shrink: 0;">
                                 <a href="https://github.com/Shik3i/KoalaSync" target="_blank" style="color: var(--text-muted); text-decoration: none; font-size: 10px; opacity: 0.6; display: block;">GitHub Repository</a>
-                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.1.0</div>
+                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.2.0</div>
                             </div>
                         </div>
                     </div>
@@ -797,7 +796,7 @@
                                 <strong><span>Локализация / Перевод</span></strong>
                                 <span class="feat-desc"><span>Доступные языки интерфейса и поддержка перевода.</span></span>
                             </td>
-                            <td class="check highlight">✔ <span>6 языков (и расширяется)</span></td>
+                            <td class="check highlight">✔ <span>13 языков (и расширяется)</span></td>
                             <td class="cross">
                                 ✘ <span>Только английский</span>
                             </td>
@@ -915,7 +914,7 @@
                                     <picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="14" height="14"></picture>
                                     <span>KoalaSync</span>
                                 </div>
-                                <div class="illus-popup-version mockup-version">2.1.0</div>
+                                <div class="illus-popup-version mockup-version">2.2.0</div>
                             </div>
                             <div class="illus-popup-tabs">
                                 <div class="illus-popup-tab active">
@@ -1209,6 +1208,10 @@
             <div style="margin-top: 1.5rem; font-size: 0.8rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
                 <a href="../imprint" style="color: var(--text-muted); text-decoration: none;"><span>Legal Notice</span></a>
                 <a href="../privacy" style="color: var(--text-muted); text-decoration: none;"><span>Privacy Policy</span></a>
+                <a href="https://ko-fi.com/koaladev" target="_blank" title="Угости кофе на Ko-Fi" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #ff5e5b; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
+                    <span aria-hidden="true">♥</span>
+                    <span>Ko-Fi</span>
+                </a>
                 <a href="https://mastodon.social/@koalastuff" rel="me" target="_blank" style="color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" style="display:block" viewBox="0 0 24 24"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38q.398-.092.786-.213c.585-.184 1.27-.39 1.774-.753a.06.06 0 0 0 .023-.043v-1.809a.05.05 0 0 0-.02-.041.05.05 0 0 0-.046-.01 20.3 20.3 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.6 5.6 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422q.059-.011.11-.024c2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545m-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102q0-1.965 1.011-3.12c.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164q1.012 1.155 1.012 3.12z"/></svg>
                     Mastodon

website/www/tr/index.html

@@ -6,9 +6,9 @@
     <title>KoalaSync | Netflix, YouTube ve Herhangi Bir Videoyu Arkadaşlarınızla Eşitleyin</title>
     <meta name="description" content="Netflix, YouTube, Twitch ve herhangi bir HTML5 videoyu arkadaşlarınızla mükemmel uyum içinde izleyin. Chrome ve Firefox için ücretsiz, açık kaynaklı tarayıcı eklentisi. Kayıt gerekmez.">
     
-    <link rel="preload" href="../style.512d0dfc.min.css" as="style">
+    <link rel="preload" href="../style.b511a1d2.min.css" as="style">
     <link rel="preload" as="image" href="../assets/LookDownKoala.webp" imagesrcset="../assets/LookDownKoala-1x.webp 90w, ../assets/LookDownKoala.webp 205w" imagesizes="90px" fetchpriority="high">
-    <link rel="stylesheet" href="../style.512d0dfc.min.css">
+    <link rel="stylesheet" href="../style.b511a1d2.min.css">
     <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16x16.png">
     <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32x32.png">
     <link rel="apple-touch-icon" sizes="180x180" href="../assets/icon-192x192.png">
@@ -224,7 +224,6 @@
             </div>
             <div class="nav-right">
                 <div class="lang-select-container">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="globe-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10"/></svg>
                     <select class="lang-dropdown" aria-label="Select Language">
                         <option value="en" >🇬🇧 English</option>
                         <option value="de" >🇩🇪 Deutsch</option>
@@ -252,7 +251,7 @@
     <header class="hero" id="main-content">
         <div class="container hero-grid">
             <div class="hero-text">
-                <a href="https://github.com/Shik3i/KoalaSync/blob/main/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
+                <a href="https://github.com/Shik3i/KoalaSync/blob/main/docs/CHANGELOG.md" target="_blank" class="version-badge" data-reveal style="text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s;" title="View Changelog">
                     <span class="version-text-en" lang="en">v2.1.0 OUT NOW</span>
                     <span class="version-text-de" lang="de">v2.1.0 JETZT VERFÜGBAR</span>
                 </a>
@@ -284,7 +283,7 @@
                         <div class="mock-header-title"><picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo"></picture>KoalaSync</div>
                         <a href="https://github.com/Shik3i/KoalaSync" target="_blank" class="mock-version-link" title="Visit GitHub Repository">
                             <svg fill="currentColor" style="width:12px;height:12px;display:block" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/></svg>
-                            <span class="mockup-version">2.1.0</span>
+                            <span class="mockup-version">2.2.0</span>
                         </a>
                     </div>
                     <div class="mock-tabs">
@@ -547,7 +546,7 @@
 
                             <div style="margin-top: 16px; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; flex-shrink: 0;">
                                 <a href="https://github.com/Shik3i/KoalaSync" target="_blank" style="color: var(--text-muted); text-decoration: none; font-size: 10px; opacity: 0.6; display: block;">GitHub Repository</a>
-                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.1.0</div>
+                                <div style="color: var(--text-muted); font-size: 9px; opacity: 0.4; margin-top: 4px;" class="mockup-version">2.2.0</div>
                             </div>
                         </div>
                     </div>
@@ -915,7 +914,7 @@
                                     <picture><source srcset="../assets/NewLogoIcon.avif" type="image/avif"><img src="../assets/NewLogoIcon.webp" alt="KoalaSync Logo" width="14" height="14"></picture>
                                     <span>KoalaSync</span>
                                 </div>
-                                <div class="illus-popup-version mockup-version">2.1.0</div>
+                                <div class="illus-popup-version mockup-version">2.2.0</div>
                             </div>
                             <div class="illus-popup-tabs">
                                 <div class="illus-popup-tab active">
@@ -1209,6 +1208,10 @@
             <div style="margin-top: 1.5rem; font-size: 0.8rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
                 <a href="../imprint" style="color: var(--text-muted); text-decoration: none;"><span>Yasal Uyarı</span></a>
                 <a href="../privacy" style="color: var(--text-muted); text-decoration: none;"><span>Gizlilik Politikası</span></a>
+                <a href="https://ko-fi.com/koaladev" target="_blank" title="Ko-Fi'de bana kahve ısmarla" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #ff5e5b; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
+                    <span aria-hidden="true">♥</span>
+                    <span>Ko-Fi</span>
+                </a>
                 <a href="https://mastodon.social/@koalastuff" rel="me" target="_blank" style="color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" aria-hidden="true" style="display:block" viewBox="0 0 24 24"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38q.398-.092.786-.213c.585-.184 1.27-.39 1.774-.753a.06.06 0 0 0 .023-.043v-1.809a.05.05 0 0 0-.02-.041.05.05 0 0 0-.046-.01 20.3 20.3 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.6 5.6 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422q.059-.011.11-.024c2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545m-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102q0-1.965 1.011-3.12c.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164q1.012 1.155 1.012 3.12z"/></svg>
                     Mastodon

website/www/version.json

@@ -1,4 +1,4 @@
 {
-  "version": "2.1.0",
-  "date": "2026-06-04T12:00:00Z"
+  "version": "2.2.0",
+  "date": "2026-06-08T19:11:56Z"
 }