design: group each matchup as a fixture card (clear opponent pairing)

The round of 32 read as an ambiguous grid — equal gaps in both directions
meant you couldn't tell which two chips formed one match. Now each matchup is
a single rounded fixture card holding its two teams split by a halfway 'vs'
line (winner's half lit yellow); card borders + gaps separate matches. Reads
like a football scoreboard and is consistent across every round.
- 40/40 tests, tsc clean

Author: Kingson4Wu

src/styles.css

@@ -296,47 +296,49 @@ a { color: inherit; text-decoration: none; }
 .cx { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
 .cx--on { stroke: var(--yellow); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
 
+/* one matchup = one fixture card: the two opponents stacked and split by a
+   halfway line, so a pair always reads as a single match (and the gap +
+   border separate it from neighbouring matches) */
 .match-slot {
   display: flex;
   flex-direction: column;
-  gap: 7px;            /* space between the two opponents */
-  width: 86px;         /* every country cell is exactly this wide */
+  gap: 0;
+  width: 84px;
+  margin: 0 auto;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.32);
+  background: rgba(255, 255, 255, 0.97);
+  box-shadow: 0 3px 8px -3px rgba(8, 20, 45, 0.5);
 }
 
-/* chip = stacked flag over name. Fixed width & height for EVERY cell; long
-   names wrap to (at most) two lines inside that height — never stretch it */
 .team-cell {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 2px;
+  gap: 1px;
   width: 100%;
-  height: 46px;
-  padding: 4px 5px;
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.96);
+  height: 43px;
+  padding: 4px 4px;
+  border: none;
+  background: transparent;
   color: var(--ink);
   cursor: pointer;
   line-height: 1.05;
-  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
+  transition: background 0.15s;
   -webkit-tap-highlight-color: transparent;
   touch-action: manipulation;
 }
-.team-cell:active { transform: scale(0.96); }
+/* the halfway 'vs' line between the two opponents of a match */
+.team-cell + .team-cell { border-top: 1px solid rgba(24, 37, 74, 0.16); }
 .team-cell--selected {
   background: var(--yellow);
   color: #43320a;
-  box-shadow: 0 0 0 1.5px var(--yellow), var(--shadow-sticker);
 }
 .team-cell--selected .team-cell__name { font-weight: 800; }
-.team-cell--empty {
-  background: rgba(255, 255, 255, 0.08);
-  border-style: dashed;
-  border-color: rgba(255, 255, 255, 0.22);
-  cursor: default;
-}
+.team-cell--empty { color: var(--ink-faint); cursor: default; }
 .team-cell__flag { font-size: 18px; line-height: 1; }
 .team-cell__name {
   font-size: 12px;