style: badges as row above flags, centered over each team

Badge row uses same flex proportions as match row (flex:1 | spacer | flex:1)
so left badge centers over left flag, right badge over right flag.
Full team names restored (no more truncation from 5-column layout).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/MatchCard.module.css

@@ -21,21 +21,21 @@
     inset 0 1px 0 rgba(255,255,255,0.07) !important;
 }
 
-/* Badge columns — vertically centered to flags */
-.badgeLeft, .badgeRight {
+/* Badge row — same flex proportions as matchRow so badges align over flags */
+.badgeRow {
   display: flex;
   align-items: center;
-  align-self: flex-start;
-  height: 56px; /* match flag height */
-  min-width: 0;
+  margin-bottom: 8px;
 }
 
-.badgeLeft {
-  justify-content: flex-start;
+.badgeSlot {
+  flex: 1;
+  display: flex;
+  justify-content: center;
 }
 
-.badgeRight {
-  justify-content: flex-end;
+.badgeSpacer {
+  min-width: 60px; /* matches scoreBox width */
 }
 
 .status {
@@ -123,12 +123,12 @@
     0 0 16px rgba(254, 174, 50, 0.25);
 }
 
-/* Match block — badges + teams + time/score */
-.matchBlock {
+/* Match row — Teams + time/score */
+.matchRow {
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  gap: 6px;
+  gap: 10px;
   margin-bottom: 16px;
 }