feat: add bracket visualization for tournament schedule (#8)

Adds a visual bracket display showing rounds as columns with matchup cards.

Changes:
- Created BracketVisualization component with CSS grid layout
- Added 'Bracket' tab to tournament detail page (visible when schedule exists)
- Matchup cards show team names, scores, and winner highlighting
- Current round is highlighted with green styling
- Added BDD feature file with 3 scenarios covering bracket display
- Added step definitions for bracket interaction tests

3 scenarios, 24 steps, all passing.

e2e/cucumber/step-definitions/common-steps.ts

@@ -748,3 +748,44 @@ Then('I should not see the viewing as banner', async function () {
   await expect(banner).not.toBeVisible({ timeout: 3000 });
   console.log('🌍 Verified viewing as banner is not visible');
 });
+
+// Bracket Visualization Steps
+When('I go to the tournament detail page', async function () {
+  const tournamentId = world.tournament?.id || 1;
+  await world.page.goto(`${world.baseURL}/admin/tournaments/${tournamentId}`);
+  await world.page.waitForLoadState('networkidle');
+  await world.page.waitForTimeout(500);
+  console.log(`🌍 Navigated to tournament detail page: ${tournamentId}`);
+});
+
+When('I click the {string} tab', async function (tabName: string) {
+  const tab = world.page.locator(`button:has-text("${tabName}")`);
+  await tab.click();
+  await world.page.waitForTimeout(500);
+  console.log(`🌍 Clicked "${tabName}" tab`);
+});
+
+Then('I should see bracket matchup cards', async function () {
+  const cards = world.page.locator('[data-testid="bracket-matchup"]');
+  const count = await cards.count();
+  expect(count).toBeGreaterThan(0);
+  console.log(`🌍 Found ${count} bracket matchup cards`);
+});
+
+Then('I should see bracket matchup cards with team names', async function () {
+  const cards = world.page.locator('[data-testid="bracket-matchup"]');
+  const count = await cards.count();
+  expect(count).toBeGreaterThan(0);
+  
+  const firstCard = cards.first();
+  const text = await firstCard.textContent();
+  expect(text).toBeTruthy();
+  expect(text!.length).toBeGreaterThan(2);
+  console.log(`🌍 Verified bracket matchup cards have team names`);
+});
+
+Then('I should not see the {string} tab', async function (tabName: string) {
+  const tab = world.page.locator(`button:has-text("${tabName}")`);
+  await expect(tab).not.toBeVisible({ timeout: 3000 });
+  console.log(`🌍 Verified "${tabName}" tab is not visible`);
+});