From d65ae19f5e921451235b29e5034abedf13ac4279 Mon Sep 17 00:00:00 2001
From: Cal Corum <calcorum@users.noreply.github.com>
Date: Thu, 15 Jan 2026 10:08:25 -0600
Subject: [PATCH] CLAUDE: Add lineup builder polish - search, filters, player
 preview, visual improvements

Features:
- Player search box with filter by name
- Position filter tabs (All, Catchers, Infielders, Outfielders, Pitchers)
- Player preview modal on click (shows positions, wara rating)
- Clear lineup button with confirmation styling
- Progress bar showing lineup completion
- Player headshots in both roster list and lineup slots
- Skeleton loading state during data fetch
- Sticky navigation header with back button
- Improved visual styling throughout (pills, cards, badges)

TypeScript fixes:
- Added pitcherPlayer computed property for proper type narrowing
- Removed non-existent SbaPlayer stats (batting_average, home_runs, rbi)
- Fixed unused variable warnings

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend-sba/pages/games/lineup/[id].vue | 610 +++++++++++++++++++----
 1 file changed, 502 insertions(+), 108 deletions(-)

diff --git a/frontend-sba/pages/games/lineup/[id].vue b/frontend-sba/pages/games/lineup/[id].vue
index c2722bf..97624a7 100644
--- a/frontend-sba/pages/games/lineup/[id].vue
+++ b/frontend-sba/pages/games/lineup/[id].vue
@@ -18,6 +18,15 @@ const season = ref(3)
 type TeamTab = 'home' | 'away'
 const activeTab = ref<TeamTab>('away') // Away bats first
 
+// Search and filter state
+const searchQuery = ref('')
+type PositionFilter = 'all' | 'catchers' | 'infielders' | 'outfielders' | 'pitchers'
+const positionFilter = ref<PositionFilter>('all')
+
+// Player preview modal
+const previewPlayer = ref<SbaPlayer | null>(null)
+const showPreview = ref(false)
+
 // Roster data
 const homeRoster = ref<SbaPlayer[]>([])
 const awayRoster = ref<SbaPlayer[]>([])
@@ -189,6 +198,77 @@ function removePlayer(slotIndex: number) {
   lineup[slotIndex].position = null
 }
 
+// Clear entire lineup for current team
+function clearLineup() {
+  const lineup = activeTab.value === 'home' ? homeLineup.value : awayLineup.value
+  lineup.forEach((slot, index) => {
+    slot.player = null
+    slot.position = null
+  })
+}
+
+// Position category helpers
+const CATCHER_POSITIONS = ['C']
+const INFIELD_POSITIONS = ['1B', '2B', '3B', 'SS']
+const OUTFIELD_POSITIONS = ['LF', 'CF', 'RF']
+const PITCHER_POSITIONS = ['P']
+
+function playerHasPositionInCategory(player: SbaPlayer, category: PositionFilter): boolean {
+  if (category === 'all') return true
+
+  const positions = getPlayerPositions(player)
+
+  switch (category) {
+    case 'catchers':
+      return positions.some(p => CATCHER_POSITIONS.includes(p))
+    case 'infielders':
+      return positions.some(p => INFIELD_POSITIONS.includes(p))
+    case 'outfielders':
+      return positions.some(p => OUTFIELD_POSITIONS.includes(p))
+    case 'pitchers':
+      return positions.some(p => PITCHER_POSITIONS.includes(p))
+    default:
+      return true
+  }
+}
+
+// Filtered roster based on search and position filter
+const filteredRoster = computed(() => {
+  let roster = currentRoster.value
+
+  // Apply search filter
+  if (searchQuery.value.trim()) {
+    const query = searchQuery.value.toLowerCase().trim()
+    roster = roster.filter(p => p.name.toLowerCase().includes(query))
+  }
+
+  // Apply position filter
+  if (positionFilter.value !== 'all') {
+    roster = roster.filter(p => playerHasPositionInCategory(p, positionFilter.value))
+  }
+
+  return roster
+})
+
+// Count of players in current lineup
+const currentLineupCount = computed(() => {
+  return currentLineup.value.filter(s => s.player).length
+})
+
+// Pitcher slot helper (for TypeScript narrowing)
+const pitcherPlayer = computed(() => currentLineup.value[9]?.player)
+
+// Show player preview
+function openPlayerPreview(player: SbaPlayer) {
+  previewPlayer.value = player
+  showPreview.value = true
+}
+
+function closePlayerPreview() {
+  showPreview.value = false
+  previewPlayer.value = null
+}
+
 // Fetch game data
 async function fetchGameData() {
   try {
@@ -299,92 +379,254 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="min-h-screen bg-gray-900 text-white p-4">
-    <div class="max-w-6xl mx-auto">
-      <!-- Header -->
-      <div class="mb-6">
-        <h1 class="text-3xl font-bold mb-2">Build Your Lineup</h1>
-        <p class="text-gray-400">Drag players from the roster to the lineup slots</p>
+  <div class="min-h-screen bg-gradient-to-b from-gray-900 via-gray-900 to-gray-950 text-white">
+    <!-- Header Bar -->
+    <div class="sticky top-0 z-40 bg-gray-900/95 backdrop-blur-sm border-b border-gray-800">
+      <div class="max-w-6xl mx-auto px-4 py-3">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-4">
+            <NuxtLink
+              :to="`/games/${gameId}`"
+              class="flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
+            >
+              <span class="text-lg">&larr;</span>
+              <span class="hidden sm:inline">Back to Game</span>
+            </NuxtLink>
+            <div class="h-6 w-px bg-gray-700 hidden sm:block" />
+            <div>
+              <h1 class="text-xl font-bold">Build Your Lineup</h1>
+              <p class="text-xs text-gray-500 hidden sm:block">Drag players to assign positions</p>
+            </div>
+          </div>
+          <div class="text-sm text-gray-400">
+            Game #{{ gameId.slice(0, 8) }}
+          </div>
+        </div>
       </div>
+    </div>
 
-      <!-- Tabs -->
-      <div class="flex gap-2 mb-6 border-b border-gray-700">
+    <div class="max-w-6xl mx-auto p-4">
+      <!-- Team Tabs -->
+      <div class="flex gap-2 mb-6 bg-gray-800/50 p-1 rounded-xl inline-flex">
         <button
           :class="[
-            'px-6 py-3 font-semibold transition-colors',
+            'px-6 py-2.5 font-semibold rounded-lg transition-all duration-200',
             activeTab === 'away'
-              ? 'bg-blue-600 text-white border-b-2 border-blue-500'
-              : 'text-gray-400 hover:text-white'
+              ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/25'
+              : 'text-gray-400 hover:text-white hover:bg-gray-700/50'
           ]"
           @click="activeTab = 'away'"
         >
-          Away Lineup
+          Away
         </button>
         <button
           :class="[
-            'px-6 py-3 font-semibold transition-colors',
+            'px-6 py-2.5 font-semibold rounded-lg transition-all duration-200',
             activeTab === 'home'
-              ? 'bg-blue-600 text-white border-b-2 border-blue-500'
-              : 'text-gray-400 hover:text-white'
+              ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/25'
+              : 'text-gray-400 hover:text-white hover:bg-gray-700/50'
           ]"
           @click="activeTab = 'home'"
         >
-          Home Lineup
+          Home
         </button>
       </div>
 
       <!-- Loading state -->
-      <div v-if="loadingRoster" class="text-center py-12">
-        <div class="text-xl">Loading roster...</div>
+      <div v-if="loadingRoster" class="py-12">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <!-- Skeleton roster panel -->
+          <div class="lg:col-span-1">
+            <div class="bg-gray-800/50 rounded-xl p-4 animate-pulse">
+              <div class="h-6 w-32 bg-gray-700 rounded mb-4" />
+              <div class="h-10 w-full bg-gray-700 rounded-lg mb-3" />
+              <div class="flex gap-1 mb-3">
+                <div v-for="i in 5" :key="i" class="h-6 w-16 bg-gray-700 rounded-full" />
+              </div>
+              <div class="space-y-2">
+                <div v-for="i in 6" :key="i" class="h-16 bg-gray-700 rounded-lg" />
+              </div>
+            </div>
+          </div>
+          <!-- Skeleton lineup panel -->
+          <div class="lg:col-span-2">
+            <div class="h-6 w-24 bg-gray-700 rounded mb-4 animate-pulse" />
+            <div class="space-y-2">
+              <div v-for="i in 9" :key="i" class="h-14 bg-gray-800/50 rounded-lg animate-pulse" />
+            </div>
+          </div>
+        </div>
       </div>
 
       <!-- Main content -->
       <div v-else class="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <!-- Roster Pool (Sticky on desktop) -->
-        <div class="lg:col-span-1">
-          <div class="lg:sticky lg:top-4">
-            <h2 class="text-xl font-bold mb-4">Available Players</h2>
-            <div class="bg-gray-800 rounded-lg p-4 space-y-2 max-h-[calc(100vh-8rem)] overflow-y-auto">
-            <div
-              v-for="player in currentRoster"
-              :key="player.id"
-              draggable="true"
-              class="bg-gray-700 rounded p-3 cursor-move hover:bg-gray-600 transition-colors"
-              @dragstart="(e) => e.dataTransfer?.setData('player', JSON.stringify(player))"
-            >
-              <div class="font-semibold">{{ player.name }}</div>
-              <div class="text-sm text-gray-400">
-                {{ getPlayerPositions(player).join(', ') || 'No positions' }}
+        <div class="lg:col-span-1 order-2 lg:order-1">
+          <div class="lg:sticky lg:top-20">
+            <!-- Roster Panel Header -->
+            <div class="bg-gray-800/80 backdrop-blur-sm rounded-t-xl border border-gray-700/50 border-b-0 px-4 py-3">
+              <div class="flex items-center justify-between">
+                <h2 class="text-lg font-bold text-white">Available Players</h2>
+                <span class="text-xs font-medium text-gray-400 bg-gray-700/50 px-2 py-1 rounded-full">
+                  {{ filteredRoster.length }}
+                </span>
               </div>
             </div>
 
-            <div v-if="currentRoster.length === 0" class="text-gray-500 text-center py-4">
-              All players assigned
+            <!-- Search & Filters -->
+            <div class="bg-gray-800/60 backdrop-blur-sm border-x border-gray-700/50 px-4 py-3 space-y-3">
+              <!-- Search Input -->
+              <div class="relative">
+                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                  </svg>
+                </span>
+                <input
+                  v-model="searchQuery"
+                  type="text"
+                  placeholder="Search players..."
+                  class="w-full bg-gray-900/50 border border-gray-600/50 rounded-lg pl-10 pr-4 py-2 text-white text-sm placeholder-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/25 transition-all"
+                />
+              </div>
+
+              <!-- Position Filter Tabs -->
+              <div class="flex flex-wrap gap-1.5">
+                <button
+                  v-for="filter in (['all', 'catchers', 'infielders', 'outfielders', 'pitchers'] as PositionFilter[])"
+                  :key="filter"
+                  :class="[
+                    'px-3 py-1.5 text-xs font-medium rounded-lg transition-all duration-200',
+                    positionFilter === filter
+                      ? 'bg-blue-600 text-white shadow-md shadow-blue-600/25'
+                      : 'bg-gray-700/50 text-gray-400 hover:text-white hover:bg-gray-700'
+                  ]"
+                  @click="positionFilter = filter"
+                >
+                  {{ filter === 'all' ? 'All' : filter.charAt(0).toUpperCase() + filter.slice(1) }}
+                </button>
+              </div>
             </div>
+
+            <!-- Roster List -->
+            <div class="bg-gray-800/40 backdrop-blur-sm rounded-b-xl border border-gray-700/50 border-t-0 p-2 space-y-1.5 max-h-[calc(100vh-22rem)] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-transparent">
+              <div
+                v-for="player in filteredRoster"
+                :key="player.id"
+                draggable="true"
+                class="bg-gray-700/60 hover:bg-gray-700 rounded-lg p-2.5 cursor-grab active:cursor-grabbing transition-all duration-150 flex items-center gap-3 group hover:shadow-md hover:shadow-black/20 border border-transparent hover:border-gray-600/50"
+                @dragstart="(e) => e.dataTransfer?.setData('player', JSON.stringify(player))"
+              >
+                <!-- Player Headshot -->
+                <div class="flex-shrink-0 relative">
+                  <img
+                    v-if="player.headshot || player.image"
+                    :src="player.headshot || player.image"
+                    :alt="player.name"
+                    class="w-10 h-10 rounded-full object-cover bg-gray-600 ring-2 ring-gray-600/50"
+                    @error="(e) => (e.target as HTMLImageElement).style.display = 'none'"
+                  />
+                  <div v-else class="w-10 h-10 rounded-full bg-gradient-to-br from-gray-600 to-gray-700 flex items-center justify-center text-gray-300 text-sm font-bold ring-2 ring-gray-600/50">
+                    {{ player.name.charAt(0) }}
+                  </div>
+                </div>
+
+                <!-- Player Info -->
+                <div class="flex-1 min-w-0">
+                  <div class="font-medium text-white truncate text-sm">{{ player.name }}</div>
+                  <div class="flex items-center gap-1 mt-0.5">
+                    <span
+                      v-for="pos in getPlayerPositions(player).filter(p => p !== 'DH').slice(0, 3)"
+                      :key="pos"
+                      class="text-[10px] font-medium text-gray-400 bg-gray-800/80 px-1.5 py-0.5 rounded"
+                    >
+                      {{ pos }}
+                    </span>
+                    <span v-if="getPlayerPositions(player).filter(p => p !== 'DH').length > 3" class="text-[10px] text-gray-500">
+                      +{{ getPlayerPositions(player).filter(p => p !== 'DH').length - 3 }}
+                    </span>
+                    <span v-if="getPlayerPositions(player).filter(p => p !== 'DH').length === 0" class="text-[10px] text-gray-500">
+                      DH
+                    </span>
+                  </div>
+                </div>
+
+                <!-- Info Button -->
+                <button
+                  class="flex-shrink-0 w-7 h-7 rounded-full bg-gray-600/50 hover:bg-blue-600 text-gray-400 hover:text-white text-xs flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all"
+                  @click.stop="openPlayerPreview(player)"
+                >
+                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                </button>
+              </div>
+
+              <!-- Empty state -->
+              <div v-if="filteredRoster.length === 0" class="text-center py-8">
+                <div class="text-gray-500 text-sm">
+                  {{ currentRoster.length === 0 ? 'All players assigned to lineup' : 'No players match your search' }}
+                </div>
+                <button
+                  v-if="searchQuery || positionFilter !== 'all'"
+                  class="mt-2 text-xs text-blue-400 hover:text-blue-300 transition-colors"
+                  @click="searchQuery = ''; positionFilter = 'all'"
+                >
+                  Clear filters
+                </button>
+              </div>
             </div>
           </div>
         </div>
 
         <!-- Lineup Slots -->
-        <div class="lg:col-span-2">
-          <h2 class="text-xl font-bold mb-4">Lineup</h2>
+        <div class="lg:col-span-2 order-1 lg:order-2">
+          <!-- Lineup Header with Clear Button -->
+          <div class="flex items-center justify-between mb-4">
+            <div class="flex items-center gap-3">
+              <h2 class="text-lg font-bold text-white">Batting Order</h2>
+              <div class="flex items-center gap-1.5 text-xs">
+                <span class="text-gray-400">Progress:</span>
+                <div class="w-24 h-2 bg-gray-700 rounded-full overflow-hidden">
+                  <div
+                    class="h-full bg-gradient-to-r from-blue-600 to-blue-500 transition-all duration-300"
+                    :style="{ width: `${(currentLineupCount / (pitcherSlotDisabled ? 9 : 10)) * 100}%` }"
+                  />
+                </div>
+                <span class="font-medium text-gray-300">{{ currentLineupCount }}/{{ pitcherSlotDisabled ? 9 : 10 }}</span>
+              </div>
+            </div>
+            <button
+              v-if="currentLineupCount > 0"
+              class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-red-900/30 hover:bg-red-900/50 text-red-400 hover:text-red-300 rounded-lg border border-red-800/50 transition-all"
+              @click="clearLineup"
+            >
+              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              </svg>
+              Clear
+            </button>
+          </div>
 
           <!-- Batting order slots (1-9) -->
-          <div class="space-y-3 mb-6">
+          <div class="space-y-1.5 mb-6">
             <div
               v-for="(slot, index) in currentLineup.slice(0, 9)"
               :key="index"
-              class="bg-gray-800 rounded-lg p-4"
+              :class="[
+                'bg-gray-800/60 backdrop-blur-sm rounded-lg border transition-all duration-200',
+                slot.player ? 'border-gray-700/50' : 'border-gray-700/30'
+              ]"
             >
-              <div class="flex items-center gap-4">
+              <div class="flex items-center gap-3 p-2.5">
                 <!-- Batting order number -->
-                <div class="text-2xl font-bold text-gray-500 w-8">
-                  {{ index + 1 }}
+                <div class="flex-shrink-0 w-8 h-8 rounded-lg bg-gray-700/50 flex items-center justify-center">
+                  <span class="text-sm font-bold text-gray-400">{{ index + 1 }}</span>
                 </div>
 
                 <!-- Player slot -->
                 <div
-                  class="flex-1"
+                  class="flex-1 min-w-0"
                   @drop.prevent="(e) => {
                     const playerData = e.dataTransfer?.getData('player')
                     const fromSlotData = e.dataTransfer?.getData('fromSlot')
@@ -398,46 +640,79 @@ onMounted(async () => {
                 >
                   <div
                     v-if="slot.player"
-                    class="bg-blue-900 rounded p-3 cursor-move"
+                    class="bg-blue-900/50 hover:bg-blue-900/70 rounded-lg p-2 cursor-grab active:cursor-grabbing transition-all duration-150 flex items-center gap-2.5 group border border-blue-700/30"
                     draggable="true"
                     @dragstart="(e) => {
                       e.dataTransfer?.setData('player', JSON.stringify(slot.player))
                       e.dataTransfer?.setData('fromSlot', index.toString())
                     }"
                   >
-                    <div class="flex justify-between items-start">
-                      <div class="flex-1">
-                        <div class="font-semibold">{{ slot.player.name }}</div>
-                        <div class="text-sm text-gray-400 mt-1">
-                          Available: {{ getPlayerPositions(slot.player).join(', ') }}
-                        </div>
+                    <!-- Player Headshot -->
+                    <div class="flex-shrink-0">
+                      <img
+                        v-if="slot.player.headshot || slot.player.image"
+                        :src="slot.player.headshot || slot.player.image"
+                        :alt="slot.player.name"
+                        class="w-9 h-9 rounded-full object-cover bg-gray-600 ring-2 ring-blue-600/30"
+                        @error="(e) => (e.target as HTMLImageElement).style.display = 'none'"
+                      />
+                      <div v-else class="w-9 h-9 rounded-full bg-gradient-to-br from-blue-700 to-blue-800 flex items-center justify-center text-blue-200 text-sm font-bold ring-2 ring-blue-600/30">
+                        {{ slot.player.name.charAt(0) }}
                       </div>
-                      <button
-                        class="text-red-400 hover:text-red-300 ml-2"
-                        @click="removePlayer(index)"
-                      >
-                        ✕
-                      </button>
                     </div>
+
+                    <!-- Player Info -->
+                    <div class="flex-1 min-w-0">
+                      <div class="font-medium text-white truncate text-sm">{{ slot.player.name }}</div>
+                      <div class="flex items-center gap-1 mt-0.5">
+                        <span
+                          v-for="pos in getPlayerPositions(slot.player).filter(p => p !== 'DH').slice(0, 2)"
+                          :key="pos"
+                          class="text-[10px] font-medium text-blue-300/80 bg-blue-950/50 px-1.5 py-0.5 rounded"
+                        >
+                          {{ pos }}
+                        </span>
+                      </div>
+                    </div>
+
+                    <!-- Info Button -->
+                    <button
+                      class="flex-shrink-0 w-6 h-6 rounded-full bg-blue-800/50 hover:bg-blue-600 text-blue-300 hover:text-white text-xs flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all"
+                      @click.stop="openPlayerPreview(slot.player)"
+                    >
+                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                    </button>
+
+                    <!-- Remove Button -->
+                    <button
+                      class="flex-shrink-0 w-6 h-6 rounded-full bg-red-900/30 hover:bg-red-900/60 text-red-400 hover:text-red-300 text-xs flex items-center justify-center transition-all"
+                      @click.stop="removePlayer(index)"
+                    >
+                      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                      </svg>
+                    </button>
                   </div>
-                  <div v-else class="border-2 border-dashed border-gray-600 rounded p-4 text-center text-gray-500">
+                  <div v-else class="border-2 border-dashed border-gray-600/50 rounded-lg py-3 px-4 text-center text-gray-500 text-xs transition-colors hover:border-gray-500/50 hover:bg-gray-800/30">
                     Drop player here
                   </div>
                 </div>
 
                 <!-- Position selector -->
-                <div class="w-32">
+                <div class="w-20 flex-shrink-0">
                   <select
                     v-if="slot.player"
                     v-model="slot.position"
                     :class="[
-                      'w-full bg-gray-700 border rounded px-3 py-2',
+                      'w-full bg-gray-700/80 border rounded-lg px-2 py-1.5 text-sm font-medium transition-all focus:outline-none focus:ring-1',
                       duplicatePositions.includes(slot.position || '')
-                        ? 'border-red-500 font-bold text-red-400'
-                        : 'border-gray-600'
+                        ? 'border-red-500 text-red-400 focus:ring-red-500/50'
+                        : 'border-gray-600/50 text-white focus:border-blue-500/50 focus:ring-blue-500/25'
                     ]"
                   >
-                    <option :value="null">Position</option>
+                    <option :value="null" class="text-gray-400">Pos</option>
                     <option
                       v-for="pos in getPlayerPositions(slot.player)"
                       :key="pos"
@@ -446,8 +721,8 @@ onMounted(async () => {
                       {{ pos }}
                     </option>
                   </select>
-                  <div v-else class="text-gray-600 text-sm text-center">
-                    -
+                  <div v-else class="text-gray-600 text-xs text-center">
+                    —
                   </div>
                 </div>
               </div>
@@ -456,23 +731,25 @@ onMounted(async () => {
 
           <!-- Pitcher slot (10) -->
           <div class="mb-6">
-            <h3 class="text-lg font-semibold mb-3 flex items-center gap-2">
-              Pitcher (Non-Batting)
-              <span v-if="pitcherSlotDisabled" class="text-sm text-yellow-400">
-                (Disabled - Pitcher batting)
+            <div class="flex items-center gap-2 mb-3">
+              <h3 class="text-sm font-semibold text-gray-300">Starting Pitcher</h3>
+              <span v-if="pitcherSlotDisabled" class="text-xs text-yellow-500 bg-yellow-500/10 px-2 py-0.5 rounded-full">
+                Pitcher in batting order
               </span>
-            </h3>
+            </div>
             <div
               :class="[
-                'bg-gray-800 rounded-lg p-4',
-                pitcherSlotDisabled && 'opacity-50 pointer-events-none'
+                'bg-gray-800/60 backdrop-blur-sm rounded-lg border transition-all duration-200',
+                pitcherSlotDisabled ? 'opacity-40 pointer-events-none border-gray-700/20' : 'border-gray-700/50'
               ]"
             >
-              <div class="flex items-center gap-4">
-                <div class="text-2xl font-bold text-gray-500 w-8">P</div>
+              <div class="flex items-center gap-3 p-2.5">
+                <div class="flex-shrink-0 w-8 h-8 rounded-lg bg-green-900/30 flex items-center justify-center">
+                  <span class="text-sm font-bold text-green-400">P</span>
+                </div>
 
                 <div
-                  class="flex-1"
+                  class="flex-1 min-w-0"
                   @drop.prevent="(e) => {
                     const playerData = e.dataTransfer?.getData('player')
                     const fromSlotData = e.dataTransfer?.getData('fromSlot')
@@ -485,64 +762,181 @@ onMounted(async () => {
                   @dragover.prevent
                 >
                   <div
-                    v-if="currentLineup[9].player"
-                    class="bg-blue-900 rounded p-3 cursor-move"
+                    v-if="pitcherPlayer"
+                    class="bg-green-900/40 hover:bg-green-900/60 rounded-lg p-2 cursor-grab active:cursor-grabbing transition-all duration-150 flex items-center gap-2.5 group border border-green-700/30"
                     draggable="true"
                     @dragstart="(e) => {
-                      e.dataTransfer?.setData('player', JSON.stringify(currentLineup[9].player))
+                      e.dataTransfer?.setData('player', JSON.stringify(pitcherPlayer))
                       e.dataTransfer?.setData('fromSlot', '9')
                     }"
                   >
-                    <div class="flex justify-between items-start">
-                      <div class="flex-1">
-                        <div class="font-semibold">{{ currentLineup[9].player.name }}</div>
-                        <div class="text-sm text-gray-400 mt-1">
-                          Available: {{ getPlayerPositions(currentLineup[9].player).join(', ') }}
-                        </div>
+                    <!-- Player Headshot -->
+                    <div class="flex-shrink-0">
+                      <img
+                        v-if="pitcherPlayer.headshot || pitcherPlayer.image"
+                        :src="pitcherPlayer.headshot || pitcherPlayer.image"
+                        :alt="pitcherPlayer.name"
+                        class="w-9 h-9 rounded-full object-cover bg-gray-600 ring-2 ring-green-600/30"
+                        @error="(e) => (e.target as HTMLImageElement).style.display = 'none'"
+                      />
+                      <div v-else class="w-9 h-9 rounded-full bg-gradient-to-br from-green-700 to-green-800 flex items-center justify-center text-green-200 text-sm font-bold ring-2 ring-green-600/30">
+                        {{ pitcherPlayer.name.charAt(0) }}
                       </div>
-                      <button
-                        class="text-red-400 hover:text-red-300 ml-2"
-                        @click="removePlayer(9)"
-                      >
-                        ✕
-                      </button>
                     </div>
+
+                    <!-- Player Info -->
+                    <div class="flex-1 min-w-0">
+                      <div class="font-medium text-white truncate text-sm">{{ pitcherPlayer.name }}</div>
+                      <div class="text-[10px] text-green-400/80 mt-0.5">Pitcher</div>
+                    </div>
+
+                    <!-- Info Button -->
+                    <button
+                      class="flex-shrink-0 w-6 h-6 rounded-full bg-green-800/50 hover:bg-green-600 text-green-300 hover:text-white text-xs flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all"
+                      @click.stop="openPlayerPreview(pitcherPlayer)"
+                    >
+                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                    </button>
+
+                    <!-- Remove Button -->
+                    <button
+                      class="flex-shrink-0 w-6 h-6 rounded-full bg-red-900/30 hover:bg-red-900/60 text-red-400 hover:text-red-300 text-xs flex items-center justify-center transition-all"
+                      @click.stop="removePlayer(9)"
+                    >
+                      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                      </svg>
+                    </button>
                   </div>
-                  <div v-else class="border-2 border-dashed border-gray-600 rounded p-4 text-center text-gray-500">
+                  <div v-else class="border-2 border-dashed border-gray-600/50 rounded-lg py-3 px-4 text-center text-gray-500 text-xs transition-colors hover:border-gray-500/50 hover:bg-gray-800/30">
                     Drop pitcher here
                   </div>
                 </div>
 
-                <div class="w-32">
-                  <div class="text-gray-600 text-sm text-center font-semibold">P</div>
+                <div class="w-20 flex-shrink-0">
+                  <div class="text-green-500 text-xs text-center font-medium">P</div>
                 </div>
               </div>
             </div>
           </div>
 
           <!-- Validation errors -->
-          <div v-if="validationErrors.length > 0" class="bg-red-900/30 border border-red-500 rounded-lg p-4 mb-4">
-            <div class="font-semibold mb-2">Please fix the following errors:</div>
-            <ul class="list-disc list-inside space-y-1">
-              <li v-for="error in validationErrors" :key="error" class="text-sm">
-                {{ error }}
-              </li>
-            </ul>
+          <div v-if="validationErrors.length > 0" class="bg-red-950/50 border border-red-800/50 rounded-xl p-4 mb-4">
+            <div class="flex items-start gap-3">
+              <div class="flex-shrink-0 w-8 h-8 rounded-full bg-red-900/50 flex items-center justify-center">
+                <svg class="w-4 h-4 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+              </div>
+              <div>
+                <div class="font-semibold text-red-300 text-sm mb-1">Please fix the following:</div>
+                <ul class="space-y-1">
+                  <li v-for="error in validationErrors" :key="error" class="text-xs text-red-400/90 flex items-center gap-1.5">
+                    <span class="w-1 h-1 rounded-full bg-red-400/60" />
+                    {{ error }}
+                  </li>
+                </ul>
+              </div>
+            </div>
           </div>
 
           <!-- Submit button -->
-          <ActionButton
-            variant="success"
-            size="lg"
-            full-width
-            :disabled="!canSubmit"
-            :loading="submittingLineups"
-            @click="submitLineups"
-          >
-            {{ submittingLineups ? 'Submitting Lineups...' : (canSubmit ? 'Submit Lineups & Start Game' : 'Complete Both Lineups to Continue') }}
-          </ActionButton>
+          <div class="sticky bottom-4 pt-4">
+            <ActionButton
+              variant="success"
+              size="lg"
+              full-width
+              :disabled="!canSubmit"
+              :loading="submittingLineups"
+              @click="submitLineups"
+            >
+              {{ submittingLineups ? 'Submitting Lineups...' : (canSubmit ? 'Submit Lineups & Start Game' : 'Complete Both Lineups to Continue') }}
+            </ActionButton>
+          </div>
         </div>
       </div>
     </div>
+
+    <!-- Player Preview Modal -->
+    <Teleport to="body">
+      <div
+        v-if="showPreview && previewPlayer"
+        class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4"
+        @click.self="closePlayerPreview"
+      >
+        <div class="bg-gray-800 rounded-xl max-w-md w-full max-h-[90vh] overflow-y-auto shadow-2xl">
+          <!-- Modal Header -->
+          <div class="relative">
+            <!-- Large Player Image -->
+            <div class="h-48 bg-gradient-to-b from-blue-900 to-gray-800 flex items-center justify-center">
+              <img
+                v-if="previewPlayer.headshot || previewPlayer.image"
+                :src="previewPlayer.headshot || previewPlayer.image"
+                :alt="previewPlayer.name"
+                class="w-32 h-32 rounded-full object-cover border-4 border-gray-700 shadow-lg"
+                @error="(e) => (e.target as HTMLImageElement).style.display = 'none'"
+              />
+              <div v-else class="w-32 h-32 rounded-full bg-gray-700 flex items-center justify-center text-gray-400 text-4xl font-bold border-4 border-gray-600">
+                {{ previewPlayer.name.charAt(0) }}
+              </div>
+            </div>
+
+            <!-- Close Button -->
+            <button
+              class="absolute top-3 right-3 w-8 h-8 rounded-full bg-gray-900/80 hover:bg-gray-700 text-gray-400 hover:text-white flex items-center justify-center transition-colors"
+              @click="closePlayerPreview"
+            >
+              ×
+            </button>
+          </div>
+
+          <!-- Player Info -->
+          <div class="p-6">
+            <h2 class="text-2xl font-bold text-center mb-1">{{ previewPlayer.name }}</h2>
+            <p class="text-gray-400 text-center text-sm mb-4">
+              {{ getPlayerPositions(previewPlayer).filter(p => p !== 'DH').join(' / ') || 'Designated Hitter' }}
+            </p>
+
+            <!-- Stats Grid -->
+            <div class="grid grid-cols-2 gap-4 mb-4">
+              <!-- Positions -->
+              <div class="bg-gray-700/50 rounded-lg p-3">
+                <div class="text-xs text-gray-400 uppercase tracking-wide mb-1">Positions</div>
+                <div class="flex flex-wrap gap-1">
+                  <span
+                    v-for="pos in getPlayerPositions(previewPlayer).filter(p => p !== 'DH')"
+                    :key="pos"
+                    class="px-2 py-0.5 bg-blue-900 text-blue-200 text-xs rounded"
+                  >
+                    {{ pos }}
+                  </span>
+                  <span v-if="getPlayerPositions(previewPlayer).filter(p => p !== 'DH').length === 0" class="text-gray-500 text-sm">
+                    DH Only
+                  </span>
+                </div>
+              </div>
+
+              <!-- WAR -->
+              <div class="bg-gray-700/50 rounded-lg p-3">
+                <div class="text-xs text-gray-400 uppercase tracking-wide mb-1">WAR</div>
+                <div class="text-xl font-bold">
+                  {{ previewPlayer.wara?.toFixed(1) || '—' }}
+                </div>
+              </div>
+            </div>
+
+            <!-- Close Button -->
+            <button
+              class="w-full py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-gray-300 hover:text-white transition-colors"
+              @click="closePlayerPreview"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
   </div>
 </template>