🏓 Initial ServeSync demo build

- FastAPI backend with PostgreSQL + Redis
- 4 core features: Registration, Courts, Matchmaking, Tournament
- Double elimination tournament with bracket visualization
- ELO-based matchmaking (Stage 1 Open, Stage 2 Skill-Based)
- Real-time WebSocket updates
- TV Screen display for courts
- Vue 3 + Tailwind CSS frontend
- Seed data: 12 players, 4 courts, active matches, tournament in progress
- Docker compose stack with Nginx reverse proxy

frontend/src/App.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="min-h-screen bg-gray-950">
+    <!-- Navbar - hidden on screen display pages -->
+    <nav v-if="!isScreenDisplay" class="bg-gray-900 border-b border-gray-800 sticky top-0 z-50">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex items-center justify-between h-16">
+          <!-- Logo -->
+          <router-link to="/" class="flex items-center gap-2">
+            <span class="text-2xl">🏓</span>
+            <span class="text-xl font-bold text-white">Serve<span class="text-green-400">Sync</span></span>
+          </router-link>
+
+          <!-- Nav Links -->
+          <div class="hidden md:flex items-center gap-1">
+            <router-link v-for="link in navLinks" :key="link.to" :to="link.to"
+              class="px-3 py-2 rounded-lg text-sm font-medium transition-colors"
+              :class="$route.path === link.to ? 'bg-green-500/20 text-green-400' : 'text-gray-400 hover:text-white hover:bg-gray-800'">
+              {{ link.icon }} {{ link.label }}
+            </router-link>
+          </div>
+
+          <!-- Current Player -->
+          <div v-if="store.currentPlayer" class="flex items-center gap-3">
+            <div class="flex items-center gap-2 bg-gray-800 rounded-lg px-3 py-2">
+              <div class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold text-white"
+                   :style="{ backgroundColor: store.currentPlayer.avatar_color }">
+                {{ store.currentPlayer.name[0] }}
+              </div>
+              <div class="hidden sm:block">
+                <div class="text-xs text-gray-400">Playing as</div>
+                <div class="text-sm font-medium text-white">{{ store.currentPlayer.name }}</div>
+              </div>
+              <span class="text-xs px-2 py-0.5 rounded-full"
+                    :class="tierClass(store.currentPlayer.membership_tier)">
+                {{ store.currentPlayer.elo_rating }} ELO
+              </span>
+            </div>
+
+            <!-- Player Switcher -->
+            <select @change="switchPlayer($event.target.value)"
+              class="bg-gray-800 border border-gray-700 text-gray-300 text-xs rounded-lg px-2 py-1.5 focus:outline-none">
+              <option v-for="p in store.players" :key="p.id" :value="p.id"
+                      :selected="p.id === store.currentPlayer?.id">
+                {{ p.name }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <!-- Mobile nav -->
+    <div v-if="!isScreenDisplay" class="md:hidden bg-gray-900 border-b border-gray-800 px-4 py-2">
+      <div class="flex gap-2 overflow-x-auto">
+        <router-link v-for="link in navLinks" :key="link.to" :to="link.to"
+          class="flex-shrink-0 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+          :class="$route.path === link.to ? 'bg-green-500/20 text-green-400' : 'text-gray-400 hover:text-white'">
+          {{ link.icon }} {{ link.label }}
+        </router-link>
+      </div>
+    </div>
+
+    <!-- Main Content -->
+    <router-view />
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { useAppStore } from './stores/app'
+
+const route = useRoute()
+const store = useAppStore()
+
+const isScreenDisplay = computed(() => route.name === 'Screen')
+
+const navLinks = [
+  { to: '/', label: 'Dashboard', icon: '📊' },
+  { to: '/courts', label: 'Courts', icon: '🏟️' },
+  { to: '/matchmaking', label: 'Matchmaking', icon: '⚔️' },
+  { to: '/tournament', label: 'Tournament', icon: '🏆' },
+  { to: '/players', label: 'Players', icon: '👥' },
+]
+
+const tierClass = (tier) => {
+  const classes = {
+    bronze: 'bg-amber-900/50 text-amber-400',
+    silver: 'bg-gray-700/50 text-gray-300',
+    gold: 'bg-yellow-900/50 text-yellow-400',
+    platinum: 'bg-cyan-900/50 text-cyan-400',
+    elite: 'bg-purple-900/50 text-purple-400',
+  }
+  return classes[tier] || 'bg-gray-800 text-gray-400'
+}
+
+const switchPlayer = (playerId) => {
+  const player = store.players.find(p => p.id == playerId)
+  if (player) store.setCurrentPlayer(player)
+}
+
+onMounted(async () => {
+  await store.loadPlayers()
+})
+</script>

frontend/src/main.js

@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import router from './router'
+import './style.css'
+
+const app = createApp(App)
+app.use(createPinia())
+app.use(router)
+app.mount('#app')

frontend/src/router/index.js

@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Dashboard from '../views/Dashboard.vue'
+import Courts from '../views/Courts.vue'
+import Matchmaking from '../views/Matchmaking.vue'
+import Tournament from '../views/Tournament.vue'
+import ScreenDisplay from '../views/ScreenDisplay.vue'
+import Players from '../views/Players.vue'
+
+const routes = [
+  { path: '/', name: 'Dashboard', component: Dashboard },
+  { path: '/courts', name: 'Courts', component: Courts },
+  { path: '/matchmaking', name: 'Matchmaking', component: Matchmaking },
+  { path: '/tournament', name: 'Tournament', component: Tournament },
+  { path: '/players', name: 'Players', component: Players },
+  { path: '/screen/:courtId', name: 'Screen', component: ScreenDisplay },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+export default router

frontend/src/stores/app.js

@@ -0,0 +1,125 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import axios from 'axios'
+
+const api = axios.create({ baseURL: '/api' })
+
+export const useAppStore = defineStore('app', () => {
+  const currentPlayer = ref(null)
+  const players = ref([])
+  const courts = ref([])
+  const matches = ref([])
+  const activeTournament = ref(null)
+  const loading = ref(false)
+
+  // Set demo player (no auth needed)
+  const setCurrentPlayer = (player) => {
+    currentPlayer.value = player
+    localStorage.setItem('currentPlayerId', player.id)
+  }
+
+  const loadPlayers = async () => {
+    const res = await api.get('/players/')
+    players.value = res.data
+    // Auto-set first player as current if not set
+    if (!currentPlayer.value && players.value.length > 0) {
+      const savedId = localStorage.getItem('currentPlayerId')
+      const saved = savedId ? players.value.find(p => p.id == savedId) : null
+      currentPlayer.value = saved || players.value[0]
+    }
+    return players.value
+  }
+
+  const loadCourts = async () => {
+    const res = await api.get('/courts/')
+    courts.value = res.data
+    return courts.value
+  }
+
+  const loadMatches = async () => {
+    const res = await api.get('/matches/')
+    matches.value = res.data
+    return matches.value
+  }
+
+  const loadLobby = async () => {
+    const res = await api.get('/matches/lobby')
+    return res.data
+  }
+
+  const loadActiveMatches = async () => {
+    const res = await api.get('/matches/active')
+    return res.data
+  }
+
+  const createMatch = async (data) => {
+    const res = await api.post('/matches/', data)
+    return res.data
+  }
+
+  const joinMatch = async (matchId, playerId, team) => {
+    const res = await api.post(`/matches/${matchId}/join`, { player_id: playerId, team })
+    return res.data
+  }
+
+  const startMatch = async (matchId) => {
+    const res = await api.post(`/matches/${matchId}/start`)
+    return res.data
+  }
+
+  const updateScore = async (matchId, team1Score, team2Score) => {
+    const res = await api.post(`/matches/${matchId}/score`, { team1_score: team1Score, team2_score: team2Score })
+    return res.data
+  }
+
+  const completeMatch = async (matchId, team1Score, team2Score) => {
+    const res = await api.post(`/matches/${matchId}/complete`, { team1_score: team1Score, team2_score: team2Score })
+    return res.data
+  }
+
+  const bookCourt = async (data) => {
+    const res = await api.post('/courts/book', data)
+    return res.data
+  }
+
+  const loadTournaments = async () => {
+    const res = await api.get('/tournaments/')
+    return res.data
+  }
+
+  const loadTournament = async (id) => {
+    const res = await api.get(`/tournaments/${id}`)
+    activeTournament.value = res.data
+    return res.data
+  }
+
+  const getLeaderboard = async (limit = 10) => {
+    const res = await api.get(`/players/leaderboard?limit=${limit}`)
+    return res.data
+  }
+
+  const getCourtDisplay = async (courtId) => {
+    const res = await api.get(`/screen/court/${courtId}`)
+    return res.data
+  }
+
+  const getOverview = async () => {
+    const res = await api.get('/screen/overview')
+    return res.data
+  }
+
+  const completeTournamentMatch = async (tournamentId, matchId, s1, s2) => {
+    const res = await api.post(`/tournaments/${tournamentId}/matches/${matchId}/score`, {
+      team1_score: s1, team2_score: s2
+    })
+    return res.data
+  }
+
+  return {
+    currentPlayer, players, courts, matches, activeTournament, loading,
+    setCurrentPlayer, loadPlayers, loadCourts, loadMatches,
+    loadLobby, loadActiveMatches, createMatch, joinMatch, startMatch,
+    updateScore, completeMatch, bookCourt, loadTournaments, loadTournament,
+    getLeaderboard, getCourtDisplay, getOverview, completeTournamentMatch,
+  }
+})

frontend/src/style.css

@@ -0,0 +1,42 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-gray-950 text-gray-100 font-sans;
+  }
+}
+
+@layer components {
+  .btn {
+    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 cursor-pointer;
+  }
+  .btn-primary {
+    @apply bg-green-500 hover:bg-green-400 text-white;
+  }
+  .btn-secondary {
+    @apply bg-gray-700 hover:bg-gray-600 text-white;
+  }
+  .btn-danger {
+    @apply bg-red-600 hover:bg-red-500 text-white;
+  }
+  .card {
+    @apply bg-gray-900 rounded-xl border border-gray-800 p-6;
+  }
+  .badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+  }
+}
+
+.tier-bronze { @apply text-amber-600; }
+.tier-silver { @apply text-gray-400; }
+.tier-gold { @apply text-yellow-400; }
+.tier-platinum { @apply text-cyan-400; }
+.tier-elite { @apply text-purple-400; }
+
+.bg-tier-bronze { @apply bg-amber-900/30 border-amber-700/50; }
+.bg-tier-silver { @apply bg-gray-800/50 border-gray-600/50; }
+.bg-tier-gold { @apply bg-yellow-900/30 border-yellow-700/50; }
+.bg-tier-platinum { @apply bg-cyan-900/30 border-cyan-700/50; }
+.bg-tier-elite { @apply bg-purple-900/30 border-purple-700/50; }

frontend/src/views/Courts.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="max-w-7xl mx-auto px-4 py-6 space-y-6">
+    <div class="flex items-center justify-between">
+      <h1 class="text-2xl font-bold text-white">🏟️ Court Reservations</h1>
+      <div class="flex gap-2">
+        <span class="badge bg-green-500/20 text-green-400">{{ availableCourts }} Available</span>
+        <span class="badge bg-red-500/20 text-red-400">{{ occupiedCourts }} Occupied</span>
+      </div>
+    </div>
+
+    <!-- Court Grid -->
+    <div class="grid md:grid-cols-2 gap-6">
+      <div v-for="court in courts" :key="court.id"
+           class="card transition-all hover:border-gray-700"
+           :class="court.current_status === 'occupied' ? 'border-red-800/30' : 'border-green-800/30'">
+
+        <!-- Court Header -->
+        <div class="flex items-center justify-between mb-4">
+          <div>
+            <h2 class="text-xl font-bold text-white">{{ court.name }}</h2>
+            <div class="text-sm text-gray-400">{{ court.surface_type }}</div>
+          </div>
+          <div class="text-right">
+            <span class="badge text-sm"
+                  :class="court.current_status === 'occupied' ? 'bg-red-500/20 text-red-400' : 'bg-green-500/20 text-green-400'">
+              {{ court.current_status === 'occupied' ? '🔴 In Use' : '🟢 Available' }}
+            </span>
+            <div class="text-sm text-gray-400 mt-1">₱{{ court.hourly_rate }}/hr</div>
+          </div>
+        </div>
+
+        <!-- Features -->
+        <div class="flex flex-wrap gap-1 mb-4">
+          <span v-for="f in court.features.split(',')" :key="f"
+                class="badge bg-gray-800 text-gray-300 text-xs">{{ f.trim() }}</span>
+        </div>
+
+        <!-- Active Match -->
+        <div v-if="court.current_match" class="bg-gray-800 rounded-xl p-4 mb-4">
+          <div class="text-xs text-gray-400 mb-2 uppercase tracking-wide">Live Match</div>
+          <div class="flex items-center justify-between">
+            <div class="text-sm font-medium text-white">{{ court.current_match.team1?.join(' & ') }}</div>
+            <div class="flex items-center gap-3">
+              <span class="text-2xl font-bold text-white">{{ court.current_match.team1_score }}</span>
+              <span class="text-gray-500">vs</span>
+              <span class="text-2xl font-bold text-white">{{ court.current_match.team2_score }}</span>
+            </div>
+            <div class="text-sm font-medium text-white text-right">{{ court.current_match.team2?.join(' & ') }}</div>
+          </div>
+          <div class="text-center mt-2">
+            <router-link :to="`/screen/${court.id}`"
+              class="text-xs text-blue-400 hover:underline">📺 View on Screen</router-link>
+          </div>
+        </div>
+
+        <!-- Book Form -->
+        <div v-if="court.current_status === 'available'" class="space-y-3">
+          <div class="text-sm font-medium text-gray-300">Book this court</div>
+          <div class="grid grid-cols-2 gap-3">
+            <div>
+              <label class="text-xs text-gray-400">Date & Time</label>
+              <input type="datetime-local" v-model="bookingForms[court.id].start_time"
+                class="w-full bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2 mt-1 focus:outline-none focus:border-green-500" />
+            </div>
+            <div>
+              <label class="text-xs text-gray-400">Duration (hours)</label>
+              <select v-model="bookingForms[court.id].duration"
+                class="w-full bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2 mt-1 focus:outline-none focus:border-green-500">
+                <option value="1">1 hour — ₱{{ court.hourly_rate }}</option>
+                <option value="2">2 hours — ₱{{ court.hourly_rate * 2 }}</option>
+                <option value="3">3 hours — ₱{{ court.hourly_rate * 3 }}</option>
+              </select>
+            </div>
+          </div>
+          <button @click="bookCourt(court)"
+            class="btn btn-primary w-full"
+            :disabled="!store.currentPlayer || loading[court.id]">
+            {{ loading[court.id] ? 'Booking...' : `Book for ₱${court.hourly_rate * (bookingForms[court.id]?.duration || 1)}` }}
+          </button>
+        </div>
+
+        <!-- TV Screen Link -->
+        <router-link :to="`/screen/${court.id}`"
+          class="mt-3 flex items-center justify-center gap-2 text-sm text-gray-400 hover:text-blue-400 transition-colors">
+          <span>📺</span> Open TV Display
+        </router-link>
+      </div>
+    </div>
+
+    <!-- Upcoming Bookings -->
+    <div>
+      <h2 class="text-lg font-bold text-white mb-4">📅 Upcoming Bookings</h2>
+      <div class="card p-0 overflow-hidden">
+        <div v-if="upcomingBookings.length === 0" class="text-center py-8 text-gray-500">
+          No upcoming bookings
+        </div>
+        <div v-for="booking in upcomingBookings" :key="booking.id"
+             class="flex items-center justify-between px-4 py-3 border-b border-gray-800 last:border-0">
+          <div class="flex items-center gap-3">
+            <span class="text-2xl">📅</span>
+            <div>
+              <div class="text-sm font-medium text-white">{{ booking.player_name }}</div>
+              <div class="text-xs text-gray-400">{{ booking.court_name }}</div>
+            </div>
+          </div>
+          <div class="text-right">
+            <div class="text-sm text-white">{{ formatTime(booking.start_time) }}</div>
+            <div class="text-xs text-gray-400">₱{{ booking.total_cost }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Success Toast -->
+    <div v-if="successMsg" class="fixed bottom-4 right-4 bg-green-600 text-white px-4 py-3 rounded-xl shadow-lg z-50">
+      ✅ {{ successMsg }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, reactive } from 'vue'
+import { useAppStore } from '../stores/app'
+import axios from 'axios'
+
+const store = useAppStore()
+const courts = ref([])
+const upcomingBookings = ref([])
+const loading = reactive({})
+const bookingForms = reactive({})
+const successMsg = ref('')
+
+const availableCourts = computed(() => courts.value.filter(c => c.current_status === 'available').length)
+const occupiedCourts = computed(() => courts.value.filter(c => c.current_status === 'occupied').length)
+
+const formatTime = (isoString) => {
+  return new Date(isoString).toLocaleString('en-PH', {
+    month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'
+  })
+}
+
+const bookCourt = async (court) => {
+  if (!store.currentPlayer) return
+  loading[court.id] = true
+  try {
+    const form = bookingForms[court.id]
+    await store.bookCourt({
+      player_id: store.currentPlayer.id,
+      court_id: court.id,
+      start_time: new Date(form.start_time).toISOString(),
+      duration_hours: parseFloat(form.duration),
+    })
+    successMsg.value = `Court ${court.name} booked successfully!`
+    setTimeout(() => successMsg.value = '', 3000)
+    courts.value = await store.loadCourts()
+  } catch (e) {
+    alert(e.response?.data?.detail || 'Booking failed')
+  } finally {
+    loading[court.id] = false
+  }
+}
+
+onMounted(async () => {
+  courts.value = await store.loadCourts()
+
+  // Init booking forms
+  courts.value.forEach(court => {
+    const now = new Date()
+    now.setMinutes(0, 0, 0)
+    now.setHours(now.getHours() + 1)
+    bookingForms[court.id] = {
+      start_time: now.toISOString().slice(0, 16),
+      duration: '1',
+    }
+  })
+
+  try {
+    const res = await axios.get('/api/courts/bookings/upcoming')
+    upcomingBookings.value = res.data
+  } catch (e) {}
+})
+</script>

frontend/src/views/Dashboard.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="max-w-7xl mx-auto px-4 py-6 space-y-6">
+    <!-- Hero Stats -->
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+      <div class="card text-center">
+        <div class="text-3xl font-bold text-green-400">{{ courts.length }}</div>
+        <div class="text-gray-400 text-sm mt-1">Total Courts</div>
+        <div class="text-xs text-gray-500 mt-1">{{ availableCourts }} available</div>
+      </div>
+      <div class="card text-center">
+        <div class="text-3xl font-bold text-blue-400">{{ activeMatches }}</div>
+        <div class="text-gray-400 text-sm mt-1">Active Matches</div>
+        <div class="text-xs text-gray-500 mt-1">Live now</div>
+      </div>
+      <div class="card text-center">
+        <div class="text-3xl font-bold text-yellow-400">{{ lobbyMatches }}</div>
+        <div class="text-gray-400 text-sm mt-1">Lobby Waiting</div>
+        <div class="text-xs text-gray-500 mt-1">Join now</div>
+      </div>
+      <div class="card text-center">
+        <div class="text-3xl font-bold text-purple-400">{{ players.length }}</div>
+        <div class="text-gray-400 text-sm mt-1">Players</div>
+        <div class="text-xs text-gray-500 mt-1">Registered</div>
+      </div>
+    </div>
+
+    <div class="grid lg:grid-cols-3 gap-6">
+      <!-- Court Status Grid -->
+      <div class="lg:col-span-2 space-y-4">
+        <div class="flex items-center justify-between">
+          <h2 class="text-lg font-bold text-white">Court Status</h2>
+          <router-link to="/courts" class="text-green-400 text-sm hover:underline">View all →</router-link>
+        </div>
+        <div class="grid grid-cols-2 gap-4">
+          <div v-for="court in courts" :key="court.id"
+               class="card cursor-pointer hover:border-gray-600 transition-all"
+               :class="court.current_status === 'occupied' ? 'border-red-800/50' : 'border-green-800/50'">
+            <div class="flex items-center justify-between mb-3">
+              <span class="font-bold text-white">{{ court.name }}</span>
+              <span class="badge text-xs"
+                    :class="court.current_status === 'occupied' ? 'bg-red-500/20 text-red-400' : 'bg-green-500/20 text-green-400'">
+                {{ court.current_status === 'occupied' ? '🔴 Occupied' : '🟢 Available' }}
+              </span>
+            </div>
+            <div v-if="court.current_match" class="space-y-2">
+              <div class="flex items-center justify-between bg-gray-800 rounded-lg p-2">
+                <span class="text-sm text-gray-300">{{ court.current_match.team1?.join(' & ') || 'Team 1' }}</span>
+                <span class="text-xl font-bold text-white">{{ court.current_match.team1_score }}</span>
+              </div>
+              <div class="flex items-center justify-between bg-gray-800 rounded-lg p-2">
+                <span class="text-sm text-gray-300">{{ court.current_match.team2?.join(' & ') || 'Team 2' }}</span>
+                <span class="text-xl font-bold text-white">{{ court.current_match.team2_score }}</span>
+              </div>
+              <div class="text-center">
+                <span class="badge bg-blue-500/20 text-blue-400 text-xs capitalize">
+                  {{ court.current_match.stage?.replace('_', ' ') }}
+                </span>
+              </div>
+            </div>
+            <div v-else class="text-center py-3">
+              <router-link to="/courts" class="text-green-400 text-sm hover:underline">Book this court →</router-link>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Leaderboard -->
+      <div class="space-y-4">
+        <div class="flex items-center justify-between">
+          <h2 class="text-lg font-bold text-white">🏆 Leaderboard</h2>
+          <router-link to="/players" class="text-green-400 text-sm hover:underline">View all →</router-link>
+        </div>
+        <div class="card p-0 overflow-hidden">
+          <div v-for="(player, idx) in leaderboard" :key="player.id"
+               class="flex items-center gap-3 px-4 py-3 border-b border-gray-800 last:border-0 hover:bg-gray-800/50 transition-colors">
+            <span class="text-lg font-bold w-6 text-center"
+                  :class="idx === 0 ? 'text-yellow-400' : idx === 1 ? 'text-gray-300' : idx === 2 ? 'text-amber-600' : 'text-gray-500'">
+              {{ idx === 0 ? '🥇' : idx === 1 ? '🥈' : idx === 2 ? '🥉' : idx + 1 }}
+            </span>
+            <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white flex-shrink-0"
+                 :style="{ backgroundColor: player.avatar_color }">
+              {{ player.name[0] }}
+            </div>
+            <div class="flex-1 min-w-0">
+              <div class="text-sm font-medium text-white truncate">{{ player.name }}</div>
+              <div class="text-xs text-gray-500">{{ player.wins }}W / {{ player.losses }}L</div>
+            </div>
+            <div class="text-right">
+              <div class="text-sm font-bold" :class="tierColorClass(player.membership_tier)">{{ Math.round(player.elo_rating) }}</div>
+              <div class="text-xs capitalize" :class="tierColorClass(player.membership_tier)">{{ player.membership_tier }}</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Active Tournament Summary -->
+        <div v-if="tournament" class="card bg-gradient-to-br from-purple-900/30 to-gray-900 border-purple-800/50">
+          <div class="flex items-center gap-2 mb-3">
+            <span class="text-xl">🏆</span>
+            <div>
+              <div class="font-bold text-white text-sm">{{ tournament.tournament?.name }}</div>
+              <div class="text-xs text-purple-400 capitalize">{{ tournament.tournament?.status?.replace('_', ' ') }}</div>
+            </div>
+          </div>
+          <div class="grid grid-cols-2 gap-2 text-center">
+            <div class="bg-purple-900/30 rounded-lg p-2">
+              <div class="text-lg font-bold text-white">{{ tournament.winners_bracket?.length || 0 }}</div>
+              <div class="text-xs text-gray-400">W Bracket</div>
+            </div>
+            <div class="bg-purple-900/30 rounded-lg p-2">
+              <div class="text-lg font-bold text-white">{{ tournament.losers_bracket?.length || 0 }}</div>
+              <div class="text-xs text-gray-400">L Bracket</div>
+            </div>
+          </div>
+          <router-link to="/tournament" class="btn btn-primary w-full text-center mt-3 block text-sm">
+            View Bracket →
+          </router-link>
+        </div>
+      </div>
+    </div>
+
+    <!-- Quick Actions -->
+    <div class="card">
+      <h2 class="text-lg font-bold text-white mb-4">Quick Actions</h2>
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+        <router-link to="/matchmaking" class="flex flex-col items-center gap-2 bg-green-500/10 hover:bg-green-500/20 border border-green-500/30 rounded-xl p-4 transition-all">
+          <span class="text-3xl">⚔️</span>
+          <span class="text-sm font-medium text-green-400">Find Match</span>
+        </router-link>
+        <router-link to="/courts" class="flex flex-col items-center gap-2 bg-blue-500/10 hover:bg-blue-500/20 border border-blue-500/30 rounded-xl p-4 transition-all">
+          <span class="text-3xl">📅</span>
+          <span class="text-sm font-medium text-blue-400">Book Court</span>
+        </router-link>
+        <router-link to="/tournament" class="flex flex-col items-center gap-2 bg-purple-500/10 hover:bg-purple-500/20 border border-purple-500/30 rounded-xl p-4 transition-all">
+          <span class="text-3xl">🏆</span>
+          <span class="text-sm font-medium text-purple-400">Tournament</span>
+        </router-link>
+        <router-link to="/screen/1" class="flex flex-col items-center gap-2 bg-yellow-500/10 hover:bg-yellow-500/20 border border-yellow-500/30 rounded-xl p-4 transition-all">
+          <span class="text-3xl">📺</span>
+          <span class="text-sm font-medium text-yellow-400">Live Screen</span>
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useAppStore } from '../stores/app'
+
+const store = useAppStore()
+const courts = ref([])
+const leaderboard = ref([])
+const lobbyData = ref({ lobby: [], active: [] })
+const tournament = ref(null)
+const players = ref([])
+
+const availableCourts = computed(() => courts.value.filter(c => c.current_status === 'available').length)
+const activeMatches = computed(() => lobbyData.value.active?.length || 0)
+const lobbyMatches = computed(() => lobbyData.value.lobby?.length || 0)
+
+const tierColorClass = (tier) => {
+  const classes = {
+    bronze: 'text-amber-600',
+    silver: 'text-gray-400',
+    gold: 'text-yellow-400',
+    platinum: 'text-cyan-400',
+    elite: 'text-purple-400',
+  }
+  return classes[tier] || 'text-gray-400'
+}
+
+onMounted(async () => {
+  courts.value = await store.loadCourts()
+  leaderboard.value = await store.getLeaderboard(8)
+  players.value = await store.loadPlayers()
+
+  try {
+    const [lobby, active] = await Promise.all([store.loadLobby(), store.loadActiveMatches()])
+    lobbyData.value = { lobby, active }
+  } catch (e) {}
+
+  try {
+    const tournaments = await store.loadTournaments()
+    const active = tournaments.find(t => t.status === 'in_progress')
+    if (active) tournament.value = await store.loadTournament(active.id)
+  } catch (e) {}
+})
+</script>

frontend/src/views/Matchmaking.vue

@@ -0,0 +1,408 @@
+<template>
+  <div class="max-w-7xl mx-auto px-4 py-6 space-y-6">
+    <div class="flex items-center justify-between">
+      <h1 class="text-2xl font-bold text-white">⚔️ Matchmaking</h1>
+      <button @click="refreshData" class="btn btn-secondary text-sm">🔄 Refresh</button>
+    </div>
+
+    <!-- Stage Tabs -->
+    <div class="flex gap-2 bg-gray-900 p-1 rounded-xl w-fit">
+      <button v-for="stage in stages" :key="stage.id"
+        @click="activeStage = stage.id"
+        class="px-4 py-2 rounded-lg text-sm font-medium transition-all"
+        :class="activeStage === stage.id ? 'bg-green-500 text-white' : 'text-gray-400 hover:text-white'">
+        {{ stage.icon }} {{ stage.label }}
+      </button>
+    </div>
+
+    <!-- Stage Info -->
+    <div class="card" :class="stageCardClass">
+      <div class="flex items-start gap-4">
+        <span class="text-4xl">{{ currentStage.icon }}</span>
+        <div>
+          <h2 class="text-lg font-bold text-white">{{ currentStage.label }}</h2>
+          <p class="text-gray-400 text-sm mt-1">{{ currentStage.description }}</p>
+          <div class="flex flex-wrap gap-2 mt-2">
+            <span v-for="rule in currentStage.rules" :key="rule" class="badge bg-gray-800 text-gray-300 text-xs">
+              {{ rule }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="grid lg:grid-cols-3 gap-6">
+      <!-- Create Match -->
+      <div class="lg:col-span-1">
+        <div class="card space-y-4">
+          <h2 class="font-bold text-white">Create Match</h2>
+
+          <div>
+            <label class="text-xs text-gray-400">Match Title</label>
+            <input v-model="createForm.title" type="text" placeholder="e.g. Friday Night Doubles"
+              class="w-full bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2 mt-1 focus:outline-none focus:border-green-500" />
+          </div>
+
+          <div>
+            <label class="text-xs text-gray-400">Match Type</label>
+            <select v-model="createForm.match_type"
+              class="w-full bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2 mt-1 focus:outline-none focus:border-green-500">
+              <option value="doubles">Doubles (4 players)</option>
+              <option value="singles">Singles (2 players)</option>
+            </select>
+          </div>
+
+          <div v-if="activeStage === 'skill_based'">
+            <label class="text-xs text-gray-400">ELO Tolerance (±)</label>
+            <select v-model="createForm.elo_tolerance"
+              class="w-full bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2 mt-1 focus:outline-none focus:border-green-500">
+              <option value="100">±100 (Strict)</option>
+              <option value="200">±200 (Standard)</option>
+              <option value="300">±300 (Relaxed)</option>
+            </select>
+            <div class="text-xs text-gray-500 mt-1">
+              Your ELO: {{ store.currentPlayer?.elo_rating?.toFixed(0) }} →
+              Range: {{ eloRange.min }}-{{ eloRange.max }}
+            </div>
+          </div>
+
+          <button @click="createMatch" :disabled="!createForm.title || !store.currentPlayer || creatingMatch"
+            class="btn btn-primary w-full">
+            {{ creatingMatch ? 'Creating...' : '+ Create Match' }}
+          </button>
+        </div>
+
+        <!-- My Active Matches -->
+        <div v-if="myMatches.length > 0" class="card mt-4">
+          <h3 class="font-bold text-white mb-3">My Matches</h3>
+          <div v-for="m in myMatches" :key="m.id" class="bg-gray-800 rounded-lg p-3 mb-2">
+            <div class="text-sm font-medium text-white">{{ m.title }}</div>
+            <div class="flex items-center justify-between mt-2">
+              <span class="badge text-xs capitalize"
+                    :class="m.status === 'in_progress' ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'">
+                {{ m.status.replace('_', ' ') }}
+              </span>
+              <div class="flex gap-2">
+                <button v-if="m.status === 'in_progress'"
+                  @click="openScoreModal(m)"
+                  class="text-xs bg-blue-600 hover:bg-blue-500 text-white px-2 py-1 rounded">
+                  Score
+                </button>
+                <button v-if="m.status === 'lobby' && m.current_players >= m.max_players"
+                  @click="startMatch(m.id)"
+                  class="text-xs bg-green-600 hover:bg-green-500 text-white px-2 py-1 rounded">
+                  Start
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Lobby -->
+      <div class="lg:col-span-2 space-y-4">
+        <div class="flex items-center justify-between">
+          <h2 class="font-bold text-white">Open Lobbies ({{ filteredLobby.length }})</h2>
+          <div class="text-sm text-gray-400">Auto-refresh every 5s</div>
+        </div>
+
+        <div v-if="filteredLobby.length === 0" class="card text-center py-12">
+          <div class="text-4xl mb-3">🏓</div>
+          <div class="text-gray-400">No matches in lobby</div>
+          <div class="text-gray-500 text-sm mt-1">Create one above!</div>
+        </div>
+
+        <div v-for="match in filteredLobby" :key="match.id"
+             class="card hover:border-gray-600 transition-all">
+          <div class="flex items-start justify-between mb-3">
+            <div>
+              <div class="font-bold text-white">{{ match.title }}</div>
+              <div class="flex gap-2 mt-1">
+                <span class="badge bg-gray-800 text-gray-300 text-xs capitalize">
+                  {{ match.stage.replace('_', ' ') }}
+                </span>
+                <span class="badge bg-gray-800 text-gray-300 text-xs">
+                  {{ match.match_type }}
+                </span>
+                <span v-if="match.min_elo" class="badge bg-orange-500/20 text-orange-400 text-xs">
+                  ELO {{ match.min_elo?.toFixed(0) }}-{{ match.max_elo?.toFixed(0) }}
+                </span>
+              </div>
+            </div>
+            <div class="text-right">
+              <div class="text-sm font-medium text-white">{{ match.current_players }}/{{ match.max_players }}</div>
+              <div class="text-xs text-gray-400">players</div>
+            </div>
+          </div>
+
+          <!-- Teams -->
+          <div class="grid grid-cols-2 gap-3 mb-3">
+            <div class="bg-blue-900/20 border border-blue-800/30 rounded-lg p-2">
+              <div class="text-xs text-blue-400 mb-1">Team 1</div>
+              <div v-for="p in match.team1" :key="p.id" class="flex items-center gap-1 text-sm text-white">
+                <div class="w-5 h-5 rounded-full text-xs flex items-center justify-center font-bold"
+                     :style="{ backgroundColor: p.avatar_color }">{{ p.name[0] }}</div>
+                {{ p.name }}
+                <span class="text-xs text-gray-400">({{ p.elo.toFixed(0) }})</span>
+              </div>
+              <div v-for="i in Math.max(0, (match.max_players/2) - match.team1.length)" :key="`t1-${i}`"
+                class="text-xs text-gray-600 italic">Empty slot...</div>
+            </div>
+            <div class="bg-red-900/20 border border-red-800/30 rounded-lg p-2">
+              <div class="text-xs text-red-400 mb-1">Team 2</div>
+              <div v-for="p in match.team2" :key="p.id" class="flex items-center gap-1 text-sm text-white">
+                <div class="w-5 h-5 rounded-full text-xs flex items-center justify-center font-bold"
+                     :style="{ backgroundColor: p.avatar_color }">{{ p.name[0] }}</div>
+                {{ p.name }}
+                <span class="text-xs text-gray-400">({{ p.elo.toFixed(0) }})</span>
+              </div>
+              <div v-for="i in Math.max(0, (match.max_players/2) - match.team2.length)" :key="`t2-${i}`"
+                class="text-xs text-gray-600 italic">Empty slot...</div>
+            </div>
+          </div>
+
+          <!-- Actions -->
+          <div class="flex gap-2">
+            <button v-if="!isInMatch(match)"
+              @click="joinMatch(match.id, 1)"
+              class="btn btn-primary text-sm flex-1"
+              :disabled="match.team1.length >= match.max_players / 2">
+              Join Team 1
+            </button>
+            <button v-if="!isInMatch(match)"
+              @click="joinMatch(match.id, 2)"
+              class="btn btn-secondary text-sm flex-1"
+              :disabled="match.team2.length >= match.max_players / 2">
+              Join Team 2
+            </button>
+            <button v-if="match.current_players >= match.max_players && isCreator(match)"
+              @click="startMatch(match.id)"
+              class="btn bg-yellow-500 hover:bg-yellow-400 text-black text-sm flex-1 font-bold">
+              🚀 Start Match
+            </button>
+            <span v-if="isInMatch(match)" class="badge bg-green-500/20 text-green-400">✓ Joined</span>
+          </div>
+        </div>
+
+        <!-- Active Matches Section -->
+        <div v-if="activeMatches.length > 0">
+          <h2 class="font-bold text-white mb-3">🔥 Active Matches</h2>
+          <div v-for="match in activeMatches" :key="match.id"
+               class="card border-green-800/30">
+            <div class="flex items-center justify-between mb-3">
+              <div class="font-bold text-white">{{ match.title }}</div>
+              <div class="flex gap-2">
+                <span class="badge bg-green-500/20 text-green-400">🔴 Live</span>
+                <span v-if="match.court_name" class="badge bg-gray-700 text-gray-300 text-xs">{{ match.court_name }}</span>
+              </div>
+            </div>
+            <div class="flex items-center justify-center gap-6 py-4">
+              <div class="text-center">
+                <div class="text-sm text-gray-400 mb-1">{{ match.team1.map(p => p.name).join(' & ') }}</div>
+                <div class="text-5xl font-black text-white">{{ match.team1_score }}</div>
+              </div>
+              <div class="text-2xl text-gray-500">vs</div>
+              <div class="text-center">
+                <div class="text-sm text-gray-400 mb-1">{{ match.team2.map(p => p.name).join(' & ') }}</div>
+                <div class="text-5xl font-black text-white">{{ match.team2_score }}</div>
+              </div>
+            </div>
+            <div class="flex gap-2 justify-center">
+              <button @click="openScoreModal(match)" class="btn btn-secondary text-sm">📊 Update Score</button>
+              <button @click="openCompleteModal(match)" class="btn btn-danger text-sm">🏁 End Match</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Score Update Modal -->
+    <div v-if="scoreModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+      <div class="bg-gray-900 border border-gray-700 rounded-2xl p-6 w-full max-w-md">
+        <h3 class="text-lg font-bold text-white mb-4">{{ completeMode ? '🏁 End Match' : '📊 Update Score' }}</h3>
+        <div class="grid grid-cols-2 gap-4 mb-4">
+          <div class="text-center">
+            <div class="text-sm text-gray-400 mb-2">{{ scoreModal.team1.map(p => p.name).join(' & ') }}</div>
+            <input type="number" v-model="scoreForm.team1_score" min="0" max="21"
+              class="w-full text-center text-3xl font-bold bg-gray-800 border border-gray-700 text-white rounded-xl py-3 focus:outline-none focus:border-green-500" />
+          </div>
+          <div class="text-center">
+            <div class="text-sm text-gray-400 mb-2">{{ scoreModal.team2.map(p => p.name).join(' & ') }}</div>
+            <input type="number" v-model="scoreForm.team2_score" min="0" max="21"
+              class="w-full text-center text-3xl font-bold bg-gray-800 border border-gray-700 text-white rounded-xl py-3 focus:outline-none focus:border-green-500" />
+          </div>
+        </div>
+        <div class="flex gap-3">
+          <button @click="scoreModal = null" class="btn btn-secondary flex-1">Cancel</button>
+          <button @click="submitScore" :class="completeMode ? 'btn btn-danger' : 'btn btn-primary'" class="flex-1">
+            {{ completeMode ? 'End & Update ELO' : 'Update Score' }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Toast -->
+    <div v-if="toast" class="fixed bottom-4 right-4 bg-green-600 text-white px-4 py-3 rounded-xl shadow-lg z-50">
+      ✅ {{ toast }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, reactive, onMounted, onUnmounted } from 'vue'
+import { useAppStore } from '../stores/app'
+
+const store = useAppStore()
+const lobby = ref([])
+const activeMatches = ref([])
+const activeStage = ref('open')
+const creatingMatch = ref(false)
+const scoreModal = ref(null)
+const completeMode = ref(false)
+const toast = ref('')
+const scoreForm = reactive({ team1_score: 0, team2_score: 0 })
+let refreshInterval = null
+
+const stages = [
+  {
+    id: 'open',
+    icon: '🎯',
+    label: 'Stage 1: Open Match',
+    description: 'Anyone can join. No skill restrictions. Great for casual play and meeting new players.',
+    rules: ['No ELO requirement', 'Free to join', 'Performance tracked silently'],
+  },
+  {
+    id: 'skill_based',
+    icon: '⚡',
+    label: 'Stage 2: Skill-Based',
+    description: 'ELO-gated matchmaking. Players match within ±200 ELO points for balanced competition.',
+    rules: ['ELO within ±200', 'Team avg must be in range', 'Affects ELO rating'],
+  },
+]
+
+const createForm = reactive({ title: '', match_type: 'doubles', elo_tolerance: 200 })
+
+const currentStage = computed(() => stages.find(s => s.id === activeStage.value))
+
+const stageCardClass = computed(() => ({
+  'border-blue-800/50 bg-blue-900/10': activeStage.value === 'open',
+  'border-orange-800/50 bg-orange-900/10': activeStage.value === 'skill_based',
+}))
+
+const eloRange = computed(() => {
+  const elo = store.currentPlayer?.elo_rating || 1000
+  const t = parseFloat(createForm.elo_tolerance) || 200
+  return { min: Math.max(0, Math.round(elo - t)), max: Math.round(elo + t) }
+})
+
+const filteredLobby = computed(() => {
+  return lobby.value.filter(m => m.stage === activeStage.value)
+})
+
+const isInMatch = (match) => {
+  const pid = store.currentPlayer?.id
+  return [...match.team1, ...match.team2].some(p => p.id === pid)
+}
+
+const isCreator = (match) => {
+  const pid = store.currentPlayer?.id
+  return match.team1[0]?.id === pid || match.team2[0]?.id === pid
+}
+
+const myMatches = computed(() => {
+  const pid = store.currentPlayer?.id
+  if (!pid) return []
+  return activeMatches.value.filter(m => [...m.team1, ...m.team2].some(p => p.id === pid))
+})
+
+const createMatch = async () => {
+  if (!createForm.title || !store.currentPlayer) return
+  creatingMatch.value = true
+  try {
+    await store.createMatch({
+      title: createForm.title,
+      stage: activeStage.value,
+      match_type: createForm.match_type,
+      creator_player_id: store.currentPlayer.id,
+      elo_tolerance: parseFloat(createForm.elo_tolerance),
+    })
+    createForm.title = ''
+    showToast('Match created! Players can now join.')
+    await refreshData()
+  } catch (e) {
+    alert(e.response?.data?.detail || 'Error creating match')
+  } finally {
+    creatingMatch.value = false
+  }
+}
+
+const joinMatch = async (matchId, team) => {
+  if (!store.currentPlayer) return
+  try {
+    await store.joinMatch(matchId, store.currentPlayer.id, team)
+    showToast('Joined match!')
+    await refreshData()
+  } catch (e) {
+    alert(e.response?.data?.detail || 'Cannot join match')
+  }
+}
+
+const startMatch = async (matchId) => {
+  try {
+    await store.startMatch(matchId)
+    showToast('Match started! Court auto-assigned.')
+    await refreshData()
+  } catch (e) {
+    alert(e.response?.data?.detail || 'Cannot start match')
+  }
+}
+
+const openScoreModal = (match) => {
+  scoreModal.value = match
+  completeMode.value = false
+  scoreForm.team1_score = match.team1_score || 0
+  scoreForm.team2_score = match.team2_score || 0
+}
+
+const openCompleteModal = (match) => {
+  scoreModal.value = match
+  completeMode.value = true
+  scoreForm.team1_score = match.team1_score || 0
+  scoreForm.team2_score = match.team2_score || 0
+}
+
+const submitScore = async () => {
+  if (!scoreModal.value) return
+  try {
+    if (completeMode.value) {
+      await store.completeMatch(scoreModal.value.id, scoreForm.team1_score, scoreForm.team2_score)
+      showToast('Match completed! ELO updated.')
+    } else {
+      await store.updateScore(scoreModal.value.id, scoreForm.team1_score, scoreForm.team2_score)
+      showToast('Score updated!')
+    }
+    scoreModal.value = null
+    await refreshData()
+  } catch (e) {
+    alert(e.response?.data?.detail || 'Error')
+  }
+}
+
+const showToast = (msg) => {
+  toast.value = msg
+  setTimeout(() => toast.value = '', 3000)
+}
+
+const refreshData = async () => {
+  [lobby.value, activeMatches.value] = await Promise.all([store.loadLobby(), store.loadActiveMatches()])
+}
+
+onMounted(async () => {
+  await refreshData()
+  refreshInterval = setInterval(refreshData, 5000)
+})
+
+onUnmounted(() => {
+  if (refreshInterval) clearInterval(refreshInterval)
+})
+</script>

frontend/src/views/Players.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="max-w-7xl mx-auto px-4 py-6 space-y-6">
+    <div class="flex items-center justify-between">
+      <h1 class="text-2xl font-bold text-white">👥 Players</h1>
+      <button @click="showRegister = true" class="btn btn-primary text-sm">+ Register Player</button>
+    </div>
+
+    <!-- Tier Distribution -->
+    <div class="flex gap-3 flex-wrap">
+      <div v-for="tier in tierStats" :key="tier.name"
+           class="flex items-center gap-2 bg-gray-900 border border-gray-800 rounded-xl px-4 py-2">
+        <span class="text-lg">{{ tier.icon }}</span>
+        <div>
+          <div class="text-sm font-medium" :class="tier.color">{{ tier.name }}</div>
+          <div class="text-xs text-gray-500">{{ tier.count }} players</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Players Table -->
+    <div class="card p-0 overflow-hidden">
+      <table class="w-full">
+        <thead>
+          <tr class="border-b border-gray-800 text-left">
+            <th class="px-4 py-3 text-xs text-gray-400 uppercase tracking-wide">Rank</th>
+            <th class="px-4 py-3 text-xs text-gray-400 uppercase tracking-wide">Player</th>
+            <th class="px-4 py-3 text-xs text-gray-400 uppercase tracking-wide">ELO</th>
+            <th class="px-4 py-3 text-xs text-gray-400 uppercase tracking-wide">Tier</th>
+            <th class="px-4 py-3 text-xs text-gray-400 uppercase tracking-wide">W/L</th>
+            <th class="px-4 py-3 text-xs text-gray-400 uppercase tracking-wide">Win Rate</th>
+            <th class="px-4 py-3 text-xs text-gray-400 uppercase tracking-wide">Matches</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(player, idx) in players" :key="player.id"
+              class="border-b border-gray-800/50 last:border-0 hover:bg-gray-800/30 transition-colors cursor-pointer"
+              :class="player.id === store.currentPlayer?.id ? 'bg-green-900/10' : ''">
+            <td class="px-4 py-3 text-sm">
+              <span :class="idx === 0 ? 'text-yellow-400 text-lg' : idx === 1 ? 'text-gray-300 text-lg' : idx === 2 ? 'text-amber-600 text-lg' : 'text-gray-500'">
+                {{ idx === 0 ? '🥇' : idx === 1 ? '🥈' : idx === 2 ? '🥉' : `#${idx + 1}` }}
+              </span>
+            </td>
+            <td class="px-4 py-3">
+              <div class="flex items-center gap-3">
+                <div class="w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold text-white"
+                     :style="{ backgroundColor: player.avatar_color }">
+                  {{ player.name[0] }}
+                </div>
+                <div>
+                  <div class="text-sm font-medium text-white flex items-center gap-1">
+                    {{ player.name }}
+                    <span v-if="player.id === store.currentPlayer?.id" class="badge bg-green-500/20 text-green-400 text-xs">You</span>
+                  </div>
+                  <div class="text-xs text-gray-500">{{ player.email }}</div>
+                </div>
+              </div>
+            </td>
+            <td class="px-4 py-3">
+              <span class="text-white font-mono font-bold">{{ Math.round(player.elo_rating) }}</span>
+            </td>
+            <td class="px-4 py-3">
+              <span class="badge capitalize text-xs px-2 py-1"
+                    :class="tierBadge(player.membership_tier)">
+                {{ player.membership_tier }}
+              </span>
+            </td>
+            <td class="px-4 py-3 text-sm text-gray-300">
+              <span class="text-green-400">{{ player.wins }}W</span>
+              <span class="text-gray-600 mx-1">/</span>
+              <span class="text-red-400">{{ player.losses }}L</span>
+            </td>
+            <td class="px-4 py-3">
+              <div class="flex items-center gap-2">
+                <div class="flex-1 bg-gray-800 rounded-full h-1.5 w-16">
+                  <div class="h-full rounded-full bg-green-500"
+                       :style="{ width: player.win_rate + '%' }"></div>
+                </div>
+                <span class="text-xs text-gray-400">{{ player.win_rate }}%</span>
+              </div>
+            </td>
+            <td class="px-4 py-3 text-sm text-gray-400">{{ player.total_matches }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Register Modal -->
+    <div v-if="showRegister" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+      <div class="bg-gray-900 border border-gray-700 rounded-2xl p-6 w-full max-w-md">
+        <h3 class="text-lg font-bold text-white mb-4">👤 Register New Player</h3>
+        <div class="space-y-3">
+          <div>
+            <label class="text-xs text-gray-400">Full Name *</label>
+            <input v-model="registerForm.name" type="text" placeholder="Juan Dela Cruz"
+              class="w-full bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2 mt-1 focus:outline-none focus:border-green-500" />
+          </div>
+          <div>
+            <label class="text-xs text-gray-400">Email *</label>
+            <input v-model="registerForm.email" type="email" placeholder="juan@email.com"
+              class="w-full bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2 mt-1 focus:outline-none focus:border-green-500" />
+          </div>
+          <div>
+            <label class="text-xs text-gray-400">Phone</label>
+            <input v-model="registerForm.phone" type="tel" placeholder="+63 912 345 6789"
+              class="w-full bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2 mt-1 focus:outline-none focus:border-green-500" />
+          </div>
+          <div class="bg-gray-800 rounded-lg p-3 text-xs text-gray-400">
+            New players start at <span class="text-white font-bold">1000 ELO</span> (Bronze tier).
+            Rating updates automatically after each match.
+          </div>
+        </div>
+        <div class="flex gap-3 mt-4">
+          <button @click="showRegister = false" class="btn btn-secondary flex-1">Cancel</button>
+          <button @click="registerPlayer" :disabled="!registerForm.name || !registerForm.email"
+            class="btn btn-primary flex-1">Register</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, reactive, onMounted } from 'vue'
+import { useAppStore } from '../stores/app'
+import axios from 'axios'
+
+const store = useAppStore()
+const players = ref([])
+const showRegister = ref(false)
+const registerForm = reactive({ name: '', email: '', phone: '' })
+
+const tierStats = computed(() => {
+  const tiers = { bronze: 0, silver: 0, gold: 0, platinum: 0, elite: 0 }
+  players.value.forEach(p => { tiers[p.membership_tier] = (tiers[p.membership_tier] || 0) + 1 })
+  return [
+    { name: 'Bronze', icon: '🥉', color: 'text-amber-600', count: tiers.bronze },
+    { name: 'Silver', icon: '🥈', color: 'text-gray-400', count: tiers.silver },
+    { name: 'Gold', icon: '🥇', color: 'text-yellow-400', count: tiers.gold },
+    { name: 'Platinum', icon: '💎', color: 'text-cyan-400', count: tiers.platinum },
+    { name: 'Elite', icon: '👑', color: 'text-purple-400', count: tiers.elite },
+  ]
+})
+
+const tierBadge = (tier) => {
+  const classes = {
+    bronze: 'bg-amber-900/40 text-amber-500 border border-amber-800/50',
+    silver: 'bg-gray-700/50 text-gray-300 border border-gray-600/50',
+    gold: 'bg-yellow-900/40 text-yellow-400 border border-yellow-800/50',
+    platinum: 'bg-cyan-900/40 text-cyan-400 border border-cyan-800/50',
+    elite: 'bg-purple-900/40 text-purple-400 border border-purple-800/50',
+  }
+  return classes[tier] || 'bg-gray-800 text-gray-400'
+}
+
+const registerPlayer = async () => {
+  try {
+    const res = await axios.post('/api/players/', registerForm)
+    players.value = await store.loadPlayers()
+    showRegister.value = false
+    registerForm.name = ''
+    registerForm.email = ''
+    registerForm.phone = ''
+  } catch (e) {
+    alert(e.response?.data?.detail || 'Registration failed')
+  }
+}
+
+onMounted(async () => {
+  players.value = await store.loadPlayers()
+})
+</script>

frontend/src/views/ScreenDisplay.vue

@@ -0,0 +1,386 @@
+<template>
+  <div class="min-h-screen bg-gray-950 overflow-hidden" :class="{ 'cursor-none': isFullscreen }">
+    <!-- Screen Mode Selector (top bar, hidden when watching) -->
+    <div v-if="!isFullscreen" class="bg-gray-900 border-b border-gray-800 p-3 flex items-center gap-4">
+      <router-link to="/" class="text-gray-400 hover:text-white text-sm">← Back</router-link>
+      <div class="flex gap-2">
+        <button v-for="c in [1,2,3,4]" :key="c"
+          @click="switchCourt(c)"
+          class="px-3 py-1.5 rounded-lg text-sm font-medium transition-all"
+          :class="courtId === c ? 'bg-green-500 text-white' : 'bg-gray-800 text-gray-400 hover:text-white'">
+          Court {{ c }}
+        </button>
+        <button @click="mode = 'overview'"
+          class="px-3 py-1.5 rounded-lg text-sm font-medium transition-all"
+          :class="mode === 'overview' ? 'bg-blue-500 text-white' : 'bg-gray-800 text-gray-400 hover:text-white'">
+          Overview
+        </button>
+      </div>
+      <button @click="toggleFullscreen" class="ml-auto bg-gray-800 hover:bg-gray-700 text-white px-3 py-1.5 rounded-lg text-sm">
+        ⛶ Fullscreen
+      </button>
+    </div>
+
+    <!-- COURT DISPLAY MODE -->
+    <div v-if="mode === 'court'" class="h-screen flex flex-col bg-gray-950">
+      <!-- Header -->
+      <div class="flex items-center justify-between px-8 pt-6 pb-4 bg-gray-900 border-b border-gray-800">
+        <div class="flex items-center gap-4">
+          <span class="text-4xl">🏓</span>
+          <div>
+            <div class="text-3xl font-black text-white">{{ courtData?.court?.name || `Court ${courtId}` }}</div>
+            <div class="text-gray-400">{{ courtData?.court?.surface_type }}</div>
+          </div>
+        </div>
+        <div class="flex items-center gap-4">
+          <div class="text-right">
+            <div class="text-sm text-gray-400">ServeSync</div>
+            <div class="text-lg font-bold text-green-400">🟢 LIVE</div>
+          </div>
+          <div class="text-right text-white">
+            <div class="text-2xl font-mono">{{ currentTime }}</div>
+            <div class="text-sm text-gray-400">{{ currentDate }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Active Match Display -->
+      <div v-if="courtData?.active_match" class="flex-1 flex flex-col items-center justify-center px-8 py-6 gap-8">
+        <!-- Stage Badge -->
+        <div class="flex items-center gap-3">
+          <span class="text-5xl">{{ stageIcon(courtData.active_match.stage) }}</span>
+          <div class="text-center">
+            <span class="badge text-lg px-4 py-2 capitalize"
+                  :class="stageClass(courtData.active_match.stage)">
+              {{ courtData.active_match.stage.replace('_', ' ').toUpperCase() }} MATCH
+            </span>
+          </div>
+        </div>
+
+        <!-- Scoreboard -->
+        <div class="w-full max-w-5xl">
+          <div class="grid grid-cols-3 gap-6 items-center">
+            <!-- Team 1 -->
+            <div class="text-center space-y-4">
+              <div class="flex justify-center gap-3">
+                <div v-for="p in courtData.active_match.team1" :key="p.id"
+                     class="flex flex-col items-center gap-2">
+                  <div class="w-20 h-20 rounded-full flex items-center justify-center text-4xl font-black text-white shadow-2xl"
+                       :style="{ backgroundColor: p.avatar_color, boxShadow: `0 0 30px ${p.avatar_color}40` }">
+                    {{ p.name[0] }}
+                  </div>
+                  <div>
+                    <div class="text-2xl font-bold text-white">{{ p.name.split(' ')[0] }}</div>
+                    <div class="text-sm capitalize px-2 py-0.5 rounded-full"
+                         :class="tierBadgeClass(p.membership_tier)">
+                      {{ p.membership_tier }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="text-9xl font-black text-white leading-none tabular-nums"
+                   :class="courtData.active_match.team1_score > courtData.active_match.team2_score ? 'text-green-400' : ''">
+                {{ courtData.active_match.team1_score }}
+              </div>
+            </div>
+
+            <!-- VS / Timer -->
+            <div class="text-center space-y-4">
+              <div class="text-4xl font-black text-gray-600">VS</div>
+              <div v-if="courtData.active_match.elapsed_seconds" class="space-y-1">
+                <div class="text-gray-400 text-sm">Elapsed</div>
+                <div class="text-3xl font-mono text-white">{{ formatElapsed(courtData.active_match.elapsed_seconds) }}</div>
+              </div>
+              <div class="flex flex-col gap-2 mt-4">
+                <div class="h-2 rounded-full bg-gray-800 overflow-hidden">
+                  <div class="h-full bg-blue-500 transition-all duration-500 rounded-full"
+                       :style="{ width: team1Percent + '%' }"></div>
+                </div>
+                <div class="text-xs text-gray-500 text-center">Score Progress</div>
+              </div>
+            </div>
+
+            <!-- Team 2 -->
+            <div class="text-center space-y-4">
+              <div class="flex justify-center gap-3">
+                <div v-for="p in courtData.active_match.team2" :key="p.id"
+                     class="flex flex-col items-center gap-2">
+                  <div class="w-20 h-20 rounded-full flex items-center justify-center text-4xl font-black text-white shadow-2xl"
+                       :style="{ backgroundColor: p.avatar_color, boxShadow: `0 0 30px ${p.avatar_color}40` }">
+                    {{ p.name[0] }}
+                  </div>
+                  <div>
+                    <div class="text-2xl font-bold text-white">{{ p.name.split(' ')[0] }}</div>
+                    <div class="text-sm capitalize px-2 py-0.5 rounded-full"
+                         :class="tierBadgeClass(p.membership_tier)">
+                      {{ p.membership_tier }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="text-9xl font-black text-white leading-none tabular-nums"
+                   :class="courtData.active_match.team2_score > courtData.active_match.team1_score ? 'text-green-400' : ''">
+                {{ courtData.active_match.team2_score }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- ELO Info -->
+        <div class="flex gap-6 text-center">
+          <div v-for="p in [...(courtData.active_match.team1 || []), ...(courtData.active_match.team2 || [])]"
+               :key="p.id"
+               class="bg-gray-900 border border-gray-700 rounded-xl px-4 py-2">
+            <div class="text-xs text-gray-400">{{ p.name }}</div>
+            <div class="text-lg font-bold text-white">{{ p.elo?.toFixed(0) }} ELO</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Available Court Display -->
+      <div v-else class="flex-1 flex flex-col items-center justify-center gap-8 px-8">
+        <div class="text-8xl">🟢</div>
+        <div class="text-center">
+          <div class="text-5xl font-black text-green-400 mb-4">COURT AVAILABLE</div>
+          <div class="text-2xl text-gray-400">Book this court via ServeSync</div>
+        </div>
+
+        <!-- Recent Matches -->
+        <div v-if="courtData?.recent_matches?.length" class="w-full max-w-2xl">
+          <div class="text-lg text-gray-400 text-center mb-4">Recent Matches</div>
+          <div class="space-y-2">
+            <div v-for="m in courtData.recent_matches" :key="m.team1?.[0]"
+                 class="flex items-center justify-between bg-gray-900 border border-gray-800 rounded-xl px-4 py-3">
+              <span class="text-white">{{ m.team1?.join(' & ') }}</span>
+              <span class="text-2xl font-bold" :class="m.winner === 'team1' ? 'text-green-400' : 'text-white'">{{ m.team1_score }}</span>
+              <span class="text-gray-500">vs</span>
+              <span class="text-2xl font-bold" :class="m.winner === 'team2' ? 'text-green-400' : 'text-white'">{{ m.team2_score }}</span>
+              <span class="text-white">{{ m.team2?.join(' & ') }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="bg-gray-900 border-t border-gray-800 px-8 py-3 flex items-center justify-between text-sm text-gray-400">
+        <span>🏓 ServeSync — Court Management System</span>
+        <span>Auto-refresh every 3s</span>
+        <span>{{ courtData?.court?.features }}</span>
+      </div>
+    </div>
+
+    <!-- OVERVIEW MODE -->
+    <div v-else-if="mode === 'overview'" class="min-h-screen bg-gray-950 p-6 space-y-6">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <span class="text-4xl">🏓</span>
+          <div>
+            <div class="text-3xl font-black text-white">ServeSync Live</div>
+            <div class="text-gray-400">All Courts Overview</div>
+          </div>
+        </div>
+        <div class="text-right">
+          <div class="text-2xl font-mono text-white">{{ currentTime }}</div>
+          <div class="text-gray-400">{{ currentDate }}</div>
+        </div>
+      </div>
+
+      <!-- Courts Grid -->
+      <div class="grid grid-cols-2 gap-6">
+        <div v-for="court in overview?.courts" :key="court.id"
+             class="bg-gray-900 border rounded-2xl overflow-hidden"
+             :class="court.status === 'occupied' ? 'border-green-700/50' : 'border-gray-700/50'">
+          <div class="flex items-center justify-between px-5 py-3 border-b"
+               :class="court.status === 'occupied' ? 'bg-green-900/20 border-green-800/30' : 'bg-gray-800/50 border-gray-700/50'">
+            <span class="text-xl font-bold text-white">{{ court.name }}</span>
+            <span :class="court.status === 'occupied' ? 'text-green-400' : 'text-gray-500'">
+              {{ court.status === 'occupied' ? '🔴 MATCH IN PROGRESS' : '⚪ AVAILABLE' }}
+            </span>
+          </div>
+          <div v-if="court.match" class="px-5 py-4">
+            <div class="flex items-center justify-between">
+              <div class="text-center">
+                <div class="text-sm text-gray-400 mb-1">{{ court.match.team1_names?.join(' & ') }}</div>
+                <div class="text-6xl font-black" :class="court.match.team1_score > court.match.team2_score ? 'text-green-400' : 'text-white'">
+                  {{ court.match.team1_score }}
+                </div>
+              </div>
+              <div class="text-3xl text-gray-600 font-bold">VS</div>
+              <div class="text-center">
+                <div class="text-sm text-gray-400 mb-1">{{ court.match.team2_names?.join(' & ') }}</div>
+                <div class="text-6xl font-black" :class="court.match.team2_score > court.match.team1_score ? 'text-green-400' : 'text-white'">
+                  {{ court.match.team2_score }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-else class="px-5 py-8 text-center text-gray-600 text-lg">
+            Ready for play
+          </div>
+        </div>
+      </div>
+
+      <!-- Leaderboard -->
+      <div class="grid lg:grid-cols-2 gap-6">
+        <div class="bg-gray-900 border border-gray-800 rounded-2xl overflow-hidden">
+          <div class="px-5 py-3 bg-gray-800/50 border-b border-gray-700/50">
+            <span class="text-lg font-bold text-white">🏆 Top Players</span>
+          </div>
+          <div>
+            <div v-for="(p, idx) in overview?.leaderboard" :key="p.name"
+                 class="flex items-center gap-4 px-5 py-3 border-b border-gray-800/50 last:border-0">
+              <span class="text-xl w-8 text-center">{{ idx === 0 ? '🥇' : idx === 1 ? '🥈' : idx === 2 ? '🥉' : idx + 1 }}</span>
+              <div class="w-10 h-10 rounded-full flex items-center justify-center text-lg font-bold text-white"
+                   :style="{ backgroundColor: p.avatar_color }">{{ p.name[0] }}</div>
+              <div class="flex-1">
+                <div class="text-white font-medium">{{ p.name }}</div>
+                <div class="text-sm text-gray-400">{{ p.wins }}W / {{ p.losses }}L</div>
+              </div>
+              <div class="text-right">
+                <div class="text-lg font-bold" :class="tierColorClass(p.tier)">{{ p.elo?.toFixed(0) }}</div>
+                <div class="text-xs capitalize" :class="tierColorClass(p.tier)">{{ p.tier }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Tournament Summary -->
+        <div v-if="overview?.tournament" class="bg-gray-900 border border-purple-800/30 rounded-2xl overflow-hidden">
+          <div class="px-5 py-3 bg-purple-900/20 border-b border-purple-800/30">
+            <span class="text-lg font-bold text-white">🏆 {{ overview.tournament.tournament?.name }}</span>
+          </div>
+          <div class="p-5 space-y-3">
+            <div v-for="entry in overview.tournament.leaderboard?.slice(0, 6)" :key="entry.player?.id"
+                 class="flex items-center gap-3">
+              <span class="text-gray-500 w-4 text-sm">{{ entry.final_rank || '—' }}</span>
+              <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white"
+                   :style="{ backgroundColor: entry.player?.avatar_color || '#555' }">
+                {{ entry.player?.name?.[0] || '?' }}
+              </div>
+              <span class="text-white text-sm flex-1">{{ entry.player?.name }}</span>
+              <div class="flex gap-1">
+                <span v-if="entry.is_eliminated" class="badge bg-red-900/30 text-red-400 text-xs">Eliminated</span>
+                <span v-else-if="entry.is_in_losers" class="badge bg-orange-900/30 text-orange-400 text-xs">Losers Bracket</span>
+                <span v-else class="badge bg-yellow-900/30 text-yellow-400 text-xs">Winners Bracket</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAppStore } from '../stores/app'
+
+const route = useRoute()
+const router = useRouter()
+const store = useAppStore()
+
+const courtId = ref(parseInt(route.params.courtId) || 1)
+const mode = ref('court')
+const courtData = ref(null)
+const overview = ref(null)
+const currentTime = ref('')
+const currentDate = ref('')
+const isFullscreen = ref(false)
+let refreshInterval = null
+let clockInterval = null
+
+const team1Percent = computed(() => {
+  const m = courtData.value?.active_match
+  if (!m) return 50
+  const total = m.team1_score + m.team2_score
+  if (total === 0) return 50
+  return Math.round((m.team1_score / total) * 100)
+})
+
+const stageIcon = (stage) => {
+  const icons = { open: '🎯', skill_based: '⚡', tournament: '🏆' }
+  return icons[stage] || '🏓'
+}
+
+const stageClass = (stage) => {
+  const classes = {
+    open: 'bg-blue-500/20 text-blue-400',
+    skill_based: 'bg-orange-500/20 text-orange-400',
+    tournament: 'bg-yellow-500/20 text-yellow-400',
+  }
+  return classes[stage] || 'bg-gray-700 text-gray-300'
+}
+
+const tierBadgeClass = (tier) => {
+  const classes = {
+    bronze: 'bg-amber-900/60 text-amber-400',
+    silver: 'bg-gray-700 text-gray-300',
+    gold: 'bg-yellow-900/60 text-yellow-400',
+    platinum: 'bg-cyan-900/60 text-cyan-400',
+    elite: 'bg-purple-900/60 text-purple-400',
+  }
+  return classes[tier] || 'bg-gray-800 text-gray-400'
+}
+
+const tierColorClass = (tier) => {
+  const classes = {
+    bronze: 'text-amber-600',
+    silver: 'text-gray-400',
+    gold: 'text-yellow-400',
+    platinum: 'text-cyan-400',
+    elite: 'text-purple-400',
+  }
+  return classes[tier] || 'text-gray-400'
+}
+
+const formatElapsed = (seconds) => {
+  const m = Math.floor(seconds / 60)
+  const s = seconds % 60
+  return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
+}
+
+const switchCourt = (id) => {
+  courtId.value = id
+  mode.value = 'court'
+  router.push(`/screen/${id}`)
+}
+
+const toggleFullscreen = () => {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen()
+    isFullscreen.value = true
+  } else {
+    document.exitFullscreen()
+    isFullscreen.value = false
+  }
+}
+
+const updateClock = () => {
+  const now = new Date()
+  currentTime.value = now.toLocaleTimeString('en-PH', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+  currentDate.value = now.toLocaleDateString('en-PH', { weekday: 'long', month: 'long', day: 'numeric' })
+}
+
+const refreshData = async () => {
+  try {
+    if (mode.value === 'court') {
+      courtData.value = await store.getCourtDisplay(courtId.value)
+    } else {
+      overview.value = await store.getOverview()
+    }
+  } catch (e) {}
+}
+
+onMounted(async () => {
+  updateClock()
+  clockInterval = setInterval(updateClock, 1000)
+  await refreshData()
+  refreshInterval = setInterval(refreshData, 3000)
+})
+
+onUnmounted(() => {
+  if (refreshInterval) clearInterval(refreshInterval)
+  if (clockInterval) clearInterval(clockInterval)
+})
+</script>

frontend/src/views/Tournament.vue

@@ -0,0 +1,330 @@
+<template>
+  <div class="max-w-7xl mx-auto px-4 py-6 space-y-6">
+    <div class="flex items-center justify-between flex-wrap gap-4">
+      <div>
+        <h1 class="text-2xl font-bold text-white">🏆 Tournament</h1>
+        <div v-if="tournament" class="text-sm text-gray-400 mt-1">
+          {{ tournament.tournament?.name }}
+          <span class="ml-2 badge capitalize"
+                :class="tournament.tournament?.status === 'in_progress' ? 'bg-green-500/20 text-green-400' : 'bg-gray-700 text-gray-400'">
+            {{ tournament.tournament?.status?.replace('_', ' ') }}
+          </span>
+        </div>
+      </div>
+      <div class="flex gap-2">
+        <button @click="loadData" class="btn btn-secondary text-sm">🔄 Refresh</button>
+        <button v-if="!tournament" @click="showCreateModal = true" class="btn btn-primary text-sm">+ New Tournament</button>
+      </div>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading" class="text-center py-12 text-gray-400">Loading tournament data...</div>
+
+    <!-- No Tournament -->
+    <div v-else-if="!tournament && !loading" class="card text-center py-16">
+      <div class="text-6xl mb-4">🏆</div>
+      <h2 class="text-xl font-bold text-white mb-2">No Active Tournament</h2>
+      <p class="text-gray-400 mb-6">Create a double elimination tournament to get started</p>
+      <button @click="showCreateModal = true" class="btn btn-primary">Create Tournament</button>
+    </div>
+
+    <div v-else-if="tournament">
+      <!-- Leaderboard / Rankings -->
+      <div class="grid lg:grid-cols-4 gap-6">
+        <div class="lg:col-span-3 space-y-6">
+          <!-- Winners Bracket -->
+          <div>
+            <h2 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
+              <span class="w-3 h-3 rounded-full bg-yellow-400 inline-block"></span>
+              Winners Bracket
+            </h2>
+            <div class="overflow-x-auto">
+              <div class="flex gap-6 min-w-max pb-4">
+                <div v-for="round in groupedWinners" :key="round.round" class="flex flex-col gap-4 min-w-48">
+                  <div class="text-center text-xs text-gray-400 font-medium pb-2 border-b border-gray-800">
+                    Round {{ round.round }}
+                  </div>
+                  <div v-for="match in round.matches" :key="match.id"
+                       class="bg-gray-900 border rounded-xl overflow-hidden transition-all"
+                       :class="matchBorderClass(match)">
+                    <div class="px-1 py-0.5 text-center text-xs"
+                         :class="match.status === 'in_progress' ? 'bg-green-500/20 text-green-400' : 'bg-gray-800 text-gray-500'">
+                      {{ match.status === 'completed' ? '✓ Done' : match.status === 'in_progress' ? '🔴 Live' : '⏳ Pending' }}
+                    </div>
+                    <div class="p-3 space-y-1">
+                      <MatchPlayer :player="match.player1" :score="match.team1_score" :is-winner="match.winner_team === 1" />
+                      <div class="text-center text-xs text-gray-600">vs</div>
+                      <MatchPlayer :player="match.player2" :score="match.team2_score" :is-winner="match.winner_team === 2" />
+                    </div>
+                    <div v-if="match.status === 'pending' && match.player1 && match.player2" class="px-3 pb-2">
+                      <button @click="openScore(match)" class="w-full text-xs bg-blue-600/30 hover:bg-blue-600/50 text-blue-400 rounded-lg py-1.5">
+                        Enter Score
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Losers Bracket -->
+          <div v-if="tournament.losers_bracket?.length > 0">
+            <h2 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
+              <span class="w-3 h-3 rounded-full bg-orange-400 inline-block"></span>
+              Losers Bracket
+            </h2>
+            <div class="overflow-x-auto">
+              <div class="flex gap-6 min-w-max pb-4">
+                <div v-for="round in groupedLosers" :key="round.round" class="flex flex-col gap-4 min-w-48">
+                  <div class="text-center text-xs text-gray-400 font-medium pb-2 border-b border-gray-800">
+                    LB Round {{ round.round }}
+                  </div>
+                  <div v-for="match in round.matches" :key="match.id"
+                       class="bg-gray-900 border border-orange-900/40 rounded-xl overflow-hidden">
+                    <div class="p-3 space-y-1">
+                      <MatchPlayer :player="match.player1" :score="match.team1_score" :is-winner="match.winner_team === 1" />
+                      <div class="text-center text-xs text-gray-600">vs</div>
+                      <MatchPlayer :player="match.player2" :score="match.team2_score" :is-winner="match.winner_team === 2" />
+                    </div>
+                    <div v-if="match.status === 'pending' && match.player1 && match.player2" class="px-3 pb-2">
+                      <button @click="openScore(match)" class="w-full text-xs bg-orange-600/30 hover:bg-orange-600/50 text-orange-400 rounded-lg py-1.5">
+                        Enter Score
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Grand Final -->
+          <div v-if="tournament.grand_final?.length > 0">
+            <h2 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
+              <span class="text-xl">🏆</span>
+              Grand Final
+            </h2>
+            <div v-for="match in tournament.grand_final" :key="match.id"
+                 class="card border-yellow-700/50 bg-yellow-900/10 max-w-sm">
+              <MatchPlayer :player="match.player1" :score="match.team1_score" :is-winner="match.winner_team === 1" />
+              <div class="text-center text-gray-500 my-1 text-sm font-bold">GRAND FINAL</div>
+              <MatchPlayer :player="match.player2" :score="match.team2_score" :is-winner="match.winner_team === 2" />
+            </div>
+          </div>
+        </div>
+
+        <!-- Leaderboard Sidebar -->
+        <div class="space-y-4">
+          <h2 class="text-lg font-bold text-white">📊 Standings</h2>
+          <div class="space-y-2">
+            <div v-for="(entry, idx) in tournament.leaderboard" :key="entry.player?.id"
+                 class="flex items-center gap-3 bg-gray-900 rounded-xl p-3 border transition-all"
+                 :class="entry.is_eliminated ? 'border-gray-800 opacity-60' : 'border-gray-700'">
+              <span class="text-lg font-bold w-6 text-center flex-shrink-0"
+                    :class="idx === 0 ? 'text-yellow-400' : idx === 1 ? 'text-gray-300' : idx === 2 ? 'text-amber-600' : 'text-gray-600'">
+                {{ entry.final_rank || (entry.is_eliminated ? '✗' : '—') }}
+              </span>
+              <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold text-white flex-shrink-0"
+                   :style="{ backgroundColor: entry.player?.avatar_color || '#555' }">
+                {{ entry.player?.name?.[0] || '?' }}
+              </div>
+              <div class="flex-1 min-w-0">
+                <div class="text-sm font-medium text-white truncate">{{ entry.player?.name }}</div>
+                <div class="text-xs text-gray-400">{{ entry.wins }}W / {{ entry.losses }}L</div>
+              </div>
+              <div class="flex-shrink-0">
+                <span v-if="entry.is_eliminated" class="badge bg-red-900/30 text-red-400 text-xs">Out</span>
+                <span v-else-if="entry.is_in_losers" class="badge bg-orange-900/30 text-orange-400 text-xs">LB</span>
+                <span v-else class="badge bg-yellow-900/30 text-yellow-400 text-xs">WB</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Registration (if open) -->
+          <div v-if="tournament.tournament?.status === 'registration'" class="card">
+            <h3 class="font-bold text-white mb-3">Register Player</h3>
+            <select v-model="registerPlayerId"
+              class="w-full bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2 mb-3">
+              <option v-for="p in availablePlayers" :key="p.id" :value="p.id">
+                {{ p.name }} ({{ p.elo_rating.toFixed(0) }} ELO)
+              </option>
+            </select>
+            <button @click="registerPlayer" class="btn btn-primary w-full text-sm">Register</button>
+            <button @click="startTournament" class="btn btn-secondary w-full text-sm mt-2">▶ Start Tournament</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Create Tournament Modal -->
+    <div v-if="showCreateModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+      <div class="bg-gray-900 border border-gray-700 rounded-2xl p-6 w-full max-w-md">
+        <h3 class="text-lg font-bold text-white mb-4">🏆 Create Tournament</h3>
+        <div class="space-y-3">
+          <div>
+            <label class="text-xs text-gray-400">Tournament Name</label>
+            <input v-model="createForm.name" type="text" placeholder="ServeSync Grand Prix"
+              class="w-full bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2 mt-1 focus:outline-none focus:border-green-500" />
+          </div>
+          <div>
+            <label class="text-xs text-gray-400">Max Participants</label>
+            <select v-model="createForm.max_participants"
+              class="w-full bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2 mt-1">
+              <option value="4">4 players</option>
+              <option value="8">8 players</option>
+              <option value="16">16 players</option>
+            </select>
+          </div>
+        </div>
+        <div class="flex gap-3 mt-4">
+          <button @click="showCreateModal = false" class="btn btn-secondary flex-1">Cancel</button>
+          <button @click="createTournament" class="btn btn-primary flex-1">Create</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Score Modal -->
+    <div v-if="scoreModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+      <div class="bg-gray-900 border border-gray-700 rounded-2xl p-6 w-full max-w-sm">
+        <h3 class="text-lg font-bold text-white mb-4">Enter Match Score</h3>
+        <div class="grid grid-cols-2 gap-4 mb-4">
+          <div class="text-center">
+            <div class="text-sm text-gray-400 mb-2">{{ scoreModal.player1?.name }}</div>
+            <input type="number" v-model="scoreForm.s1" min="0" max="21"
+              class="w-full text-center text-3xl font-bold bg-gray-800 border border-gray-700 text-white rounded-xl py-3" />
+          </div>
+          <div class="text-center">
+            <div class="text-sm text-gray-400 mb-2">{{ scoreModal.player2?.name }}</div>
+            <input type="number" v-model="scoreForm.s2" min="0" max="21"
+              class="w-full text-center text-3xl font-bold bg-gray-800 border border-gray-700 text-white rounded-xl py-3" />
+          </div>
+        </div>
+        <div class="flex gap-3">
+          <button @click="scoreModal = null" class="btn btn-secondary flex-1">Cancel</button>
+          <button @click="submitScore" class="btn btn-primary flex-1">Submit</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, reactive } from 'vue'
+import { useAppStore } from '../stores/app'
+import axios from 'axios'
+
+// Inline MatchPlayer component
+const MatchPlayer = {
+  props: ['player', 'score', 'isWinner'],
+  template: `
+    <div class="flex items-center gap-2 px-2 py-1 rounded-lg" :class="isWinner ? 'bg-green-900/30' : ''">
+      <div v-if="player" class="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold text-white flex-shrink-0"
+           :style="{ backgroundColor: player.avatar_color || '#555' }">{{ player.name?.[0] }}</div>
+      <div v-else class="w-6 h-6 rounded-full bg-gray-700 flex-shrink-0"></div>
+      <span class="text-sm text-white flex-1 truncate">{{ player?.name || 'TBD' }}</span>
+      <span v-if="score !== null && score !== undefined" class="text-sm font-bold" :class="isWinner ? 'text-green-400' : 'text-white'">{{ score }}</span>
+      <span v-if="isWinner" class="text-xs">👑</span>
+    </div>
+  `
+}
+
+const store = useAppStore()
+const tournament = ref(null)
+const loading = ref(true)
+const showCreateModal = ref(false)
+const scoreModal = ref(null)
+const registerPlayerId = ref(null)
+const players = ref([])
+const scoreForm = reactive({ s1: 0, s2: 0 })
+const createForm = reactive({ name: 'ServeSync Grand Prix', max_participants: 8 })
+
+const groupedWinners = computed(() => {
+  if (!tournament.value?.winners_bracket) return []
+  const rounds = {}
+  for (const m of tournament.value.winners_bracket) {
+    if (!rounds[m.round]) rounds[m.round] = { round: m.round, matches: [] }
+    rounds[m.round].matches.push(m)
+  }
+  return Object.values(rounds).sort((a, b) => a.round - b.round)
+})
+
+const groupedLosers = computed(() => {
+  if (!tournament.value?.losers_bracket) return []
+  const rounds = {}
+  for (const m of tournament.value.losers_bracket) {
+    if (!rounds[m.round]) rounds[m.round] = { round: m.round, matches: [] }
+    rounds[m.round].matches.push(m)
+  }
+  return Object.values(rounds).sort((a, b) => a.round - b.round)
+})
+
+const availablePlayers = computed(() => {
+  const registeredIds = new Set(tournament.value?.leaderboard?.map(e => e.player?.id) || [])
+  return players.value.filter(p => !registeredIds.has(p.id))
+})
+
+const matchBorderClass = (match) => {
+  if (match.status === 'completed') return 'border-green-800/30'
+  if (match.status === 'in_progress') return 'border-green-500/50 shadow-green-500/20 shadow-lg'
+  return 'border-gray-800'
+}
+
+const loadData = async () => {
+  loading.value = true
+  try {
+    const tournaments = await store.loadTournaments()
+    const active = tournaments.find(t => t.status === 'in_progress' || t.status === 'registration')
+    if (active) {
+      tournament.value = await store.loadTournament(active.id)
+    }
+    players.value = await store.loadPlayers()
+  } finally {
+    loading.value = false
+  }
+}
+
+const createTournament = async () => {
+  try {
+    const res = await axios.post('/api/tournaments/', createForm)
+    showCreateModal.value = false
+    await loadData()
+  } catch (e) { alert('Error creating tournament') }
+}
+
+const registerPlayer = async () => {
+  if (!registerPlayerId.value || !tournament.value) return
+  try {
+    await axios.post(`/api/tournaments/${tournament.value.tournament.id}/register`, {
+      player_id: registerPlayerId.value
+    })
+    await loadData()
+  } catch (e) { alert(e.response?.data?.detail || 'Error') }
+}
+
+const startTournament = async () => {
+  if (!tournament.value) return
+  try {
+    tournament.value = await axios.post(`/api/tournaments/${tournament.value.tournament.id}/start`).then(r => r.data)
+  } catch (e) { alert(e.response?.data?.detail || 'Need at least 4 players') }
+}
+
+const openScore = (match) => {
+  scoreModal.value = match
+  scoreForm.s1 = match.team1_score || 0
+  scoreForm.s2 = match.team2_score || 0
+}
+
+const submitScore = async () => {
+  if (!scoreModal.value || !tournament.value) return
+  try {
+    tournament.value = await store.completeTournamentMatch(
+      tournament.value.tournament.id,
+      scoreModal.value.id,
+      scoreForm.s1,
+      scoreForm.s2
+    )
+    scoreModal.value = null
+  } catch (e) { alert('Error submitting score') }
+}
+
+onMounted(loadData)
+</script>