diff --git a/components/team-flag.tsx b/components/team-flag.tsx
index a0ea302..ca34c44 100644
--- a/components/team-flag.tsx
+++ b/components/team-flag.tsx
@@ -9,13 +9,6 @@ interface Props {
 
 const sizes = { sm: 'text-lg', md: 'text-2xl', lg: 'text-4xl', xl: 'text-[60px]' }
 
-const placeholderSize = {
-  sm:  { width: '1.35em', height: '1em',    fontSize: '0.38em' },
-  md:  { width: '1.35em', height: '1em',    fontSize: '0.38em' },
-  lg:  { width: '1.35em', height: '1em',    fontSize: '0.38em' },
-  xl:  { width: '1.35em', height: '1em',    fontSize: '0.38em' },
-}
-
 export function TeamFlag({ name, iso2, size = 'md', className = '' }: Props) {
   // If the name is in our registry, trust it over the DB value (which may be stale).
   // For unknown teams, fall back to the DB iso2.
@@ -29,20 +22,23 @@ export function TeamFlag({ name, iso2, size = 'md', className = '' }: Props) {
       .slice(0, 3)
       .toUpperCase()
     return (
+      // Outer span matches flag-icons dimensions: width=1.33em, height=1em relative
+      // to the Tailwind font-size class. fontSize must NOT be set here or em shrinks.
       <span
         className={`rounded-sm inline-flex items-center justify-center flex-shrink-0 ${sizes[size]} ${className}`}
-        style={{
-          ...placeholderSize[size],
-          background: 'rgba(42,92,53,0.35)',
+        style={{ width: '1.33em', height: '1em', background: 'rgba(42,92,53,0.35)' }}
+        title={name}
+      >
+        <span style={{
+          fontSize: '0.38em',
           color: '#6abf7a',
           fontFamily: 'Space Grotesk, sans-serif',
           fontWeight: 700,
           letterSpacing: '0.04em',
           lineHeight: 1,
-        }}
-        title={name}
-      >
-        {abbr}
+        }}>
+          {abbr}
+        </span>
       </span>
     )
   }