fix(flags): render flag emoji on Windows globally via a scoped flag font

Windows ships no glyphs for regional-indicator flag emoji, so flags fell back to country letters everywhere react-twemoji wasn't manually wrapped. Bundle the Twemoji country-flags woff2 locally (no runtime CDN — matters for our audience) and add it as an @font-face scoped with unicode-range to flag codepoints only, then put it first in every Tailwind font stack (sans/display/mono). The browser now uses it solely for flag characters, so every flag renders correctly app-wide with zero markup changes and no effect on any other text.

src/styles/globals.css

@@ -2,6 +2,18 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Flag emoji polyfill — Windows has no glyphs for regional-indicator flags, so
+   they fall back to country letters. This locally-bundled Twemoji flag font is
+   scoped via unicode-range to ONLY flag codepoints, so adding it to the front
+   of the font stacks fixes every flag everywhere without touching any markup
+   and without affecting any other text. Root fix, not a per-component wrap. */
+@font-face {
+  font-family: 'Twemoji Country Flags';
+  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F;
+  src: url('/fonts/TwemojiCountryFlags.woff2') format('woff2');
+  font-display: swap;
+}
+
 /* Animated gradient border — @property enables CSS-only angle animation */
 @property --border-angle {
   syntax: '<angle>';

tailwind.config.js

@@ -110,7 +110,11 @@ export default {
         },
       },
       fontFamily: {
+        // 'Twemoji Country Flags' is first in every stack so Windows renders flag
+        // emoji (it's unicode-range-scoped to flag codepoints only — see globals.css —
+        // so it never affects any other glyph). Global root fix for flags everywhere.
         sans: [
+          'Twemoji Country Flags',
           'Manrope',
           'system-ui',
           '-apple-system',
@@ -119,8 +123,8 @@ export default {
           'Roboto',
           'sans-serif',
         ],
-        display: ['Outfit', 'Manrope', 'system-ui', 'sans-serif'],
+        display: ['Twemoji Country Flags', 'Outfit', 'Manrope', 'system-ui', 'sans-serif'],
-        mono: ['IBM Plex Mono', 'ui-monospace', 'monospace'],
+        mono: ['Twemoji Country Flags', 'IBM Plex Mono', 'ui-monospace', 'monospace'],
       },
       borderRadius: {
         bento: '24px',