chore: release v2.1.1

extension/manifest.base.json

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

extension/popup.html

@@ -4,6 +4,13 @@
     <meta charset="utf-8">
     <title>KoalaSync</title>
     <style>
+        @font-face {
+            font-family: 'Twemoji Country Flags';
+            unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
+            src: url('assets/TwemojiCountryFlags.woff2') format('woff2');
+            font-display: swap;
+        }
+
         :root {
             --bg: #0f172a;
             --card: #1e293b;
@@ -23,7 +30,7 @@
             padding: 16px;
             background: var(--bg);
             color: var(--text);
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            font-family: 'Twemoji Country Flags', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
             font-size: 14px;
         }
 
@@ -127,7 +134,7 @@
             font-weight: 700;
         }
 
-        input, select {
+        input, select, option {
             width: 100%;
             box-sizing: border-box;
             background: var(--card);
@@ -139,6 +146,20 @@
             font-family: inherit;
         }
 
+        @supports (appearance: base-select) {
+            #langSelector,
+            #langSelector::picker(select) {
+                appearance: base-select;
+            }
+            #langSelector::picker(select) {
+                background-color: var(--bg);
+                border: 1px solid #334155;
+                border-radius: 8px;
+                padding: 4px;
+                font-family: 'Twemoji Country Flags', inherit;
+            }
+        }
+
         input:focus {
             border-color: var(--accent);
             box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);