feat: v5 — boxing poster fight cards, 12-char names, diverse mock bots

- Fight Card page: dramatic poster background with cross-hatch, spotlights,
  vignettes, corner brackets, scan lines; 3D VS orb with punch animation;
  selectable undercard with main event always pinned at top
- PosterSprite: high-quality 480px poster frame with 6-pass renderer
  (aura, glow, bevel, specular, particles); PixelGlove component
- 12-char bot name limit across all forms and server validation
- Mock bots: all 100 now have diverse archetypes (25 types), 25% human
  fighters; seedMockBots updates existing bots on restart
- Leaderboard: inline SpritePreview next to each bot name
- Nostr auth: persistent login, nsec copy button
- Wallet: NWC + Lightning Address, ranked fight flow
- Server: payments, ranked queue, customization endpoint

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/pages/FightCardPage.vue

@@ -1,13 +1,23 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { RouterLink } from 'vue-router'
 import SpritePreview from '../components/SpritePreview.vue'
+import PosterSprite from '../components/PosterSprite.vue'
 import PixelGlove from '../components/PixelGlove.vue'
 
+interface BotInfo {
+  name: string
+  avatarSeed: string
+  archetype: string
+  tier: number
+  eloRating: number
+  botType?: string
+}
+
 interface UpcomingFight {
   id: string
-  botA: { name: string; avatarSeed: string; archetype: string; tier: number; eloRating: number } | null
-  botB: { name: string; avatarSeed: string; archetype: string; tier: number; eloRating: number } | null
+  botA: BotInfo | null
+  botB: BotInfo | null
   arenaInfo: { name: string } | null
   arena: string
   status: string
@@ -16,7 +26,32 @@ interface UpcomingFight {
 
 const fights = ref<UpcomingFight[]>([])
 const isLoading = ref(true)
-const featured = ref<UpcomingFight | null>(null)
+const mainEvent = ref<UpcomingFight | null>(null)
+const selectedId = ref<string | null>(null)
+const isPunching = ref(false)
+let punchInterval: ReturnType<typeof setInterval> | null = null
+
+// Derive featured from selectedId — always look up from fights array for fresh data
+const featured = computed<UpcomingFight | null>(() => {
+  if (selectedId.value) {
+    const found = fights.value.find(f => f.id === selectedId.value)
+    if (found && found.botA && found.botB) return found
+  }
+  return mainEvent.value
+})
+
+// Is the main event currently featured?
+const isMainFeatured = computed(() => !selectedId.value || selectedId.value === mainEvent.value?.id)
+
+// Undercard fights (everything except main event)
+const undercardFights = computed(() => {
+  if (!mainEvent.value) return fights.value
+  return fights.value.filter(f => f.id !== mainEvent.value!.id)
+})
+
+// Safe accessors for featured fight bots (never null when featured exists)
+const fighterA = computed<BotInfo | null>(() => featured.value?.botA ?? null)
+const fighterB = computed<BotInfo | null>(() => featured.value?.botB ?? null)
 
 const tierNames: Record<number, string> = {
   0: 'ROOKIE', 1: 'BRAWLER', 2: 'WARRIOR', 3: 'CHAMPION', 4: 'LEGEND', 5: 'MYTHIC',
@@ -25,26 +60,45 @@ const tierColors: Record<number, string> = {
   0: '#8a8a9a', 1: '#4ade80', 2: '#38bdf8', 3: '#a855f7', 4: '#f97316', 5: '#ef4444',
 }
 
+function selectFight(fightId: string) {
+  const fight = fights.value.find(f => f.id === fightId)
+  if (!fight || !fight.botA || !fight.botB) return
+  selectedId.value = fightId
+}
+
+function selectMainEvent() {
+  selectedId.value = null
+}
+
 onMounted(async () => {
   try {
     const res = await fetch('/api/fights')
     if (res.ok) {
-      const data = await res.json()
+      const data: UpcomingFight[] = await res.json()
       fights.value = data
-      // Feature the most recent fight with both bots
-      featured.value = data.find((f: UpcomingFight) => f.botA && f.botB) || null
+      // Main event = first fight with both bots present
+      mainEvent.value = data.find(f => f.botA && f.botB) || null
     }
   } catch (err) {
     console.warn('[FightCard] load failed:', err)
   }
   isLoading.value = false
+
+  punchInterval = setInterval(() => {
+    isPunching.value = true
+    setTimeout(() => { isPunching.value = false }, 800)
+  }, 6000)
+})
+
+onUnmounted(() => {
+  if (punchInterval) clearInterval(punchInterval)
 })
 </script>
 
 <template>
-  <div class="min-h-[calc(100vh-4rem)] flex flex-col items-center overflow-y-auto relative">
+  <div class="h-[calc(100vh-4rem)] flex flex-col overflow-hidden relative">
 
-    <!-- Background neon grid -->
+    <!-- Page background -->
     <div class="absolute inset-0 overflow-hidden pointer-events-none">
       <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[200%] h-full opacity-20"
            style="background: radial-gradient(ellipse at 50% 0%, rgba(255,45,120,0.4) 0%, transparent 60%)" />
@@ -57,137 +111,240 @@ onMounted(async () => {
     </div>
 
     <template v-else-if="featured">
-      <!-- MAIN EVENT CARD -->
-      <div class="w-full max-w-2xl mx-auto px-4 py-6 sm:py-10 relative z-10">
+      <!-- Desktop: poster 2/3 + fight list 1/3 | Mobile: 50/50 -->
+      <div class="flex-1 min-h-0 flex flex-col lg:flex-row relative z-10">
 
-        <!-- Neon sign header -->
-        <div class="text-center mb-6 sm:mb-10">
-          <p class="font-pixel text-[10px] sm:text-xs text-neon-yellow tracking-[0.4em] mb-2 animate-pulse">
-            TONIGHT'S MAIN EVENT
-          </p>
-          <div class="relative inline-block">
-            <h1 class="font-neon text-4xl sm:text-6xl md:text-7xl text-neon-pink glow-pink neon-flicker tracking-wider">
-              FIGHT CARD
-            </h1>
-            <div class="absolute -inset-4 border-2 border-neon-pink/30 rounded-lg neon-border-pink" />
-            <div class="absolute -inset-6 border border-neon-pink/10 rounded-xl" />
-          </div>
-        </div>
-
-        <!-- Main fight card with 3D perspective -->
+        <!-- LEFT: Fight poster -->
         <RouterLink
           :to="`/arena/${featured.id}`"
-          class="block group"
+          class="h-1/2 lg:h-full lg:w-2/3 flex flex-col overflow-hidden lg:border-r lg:border-border/30 group relative poster-bg"
         >
-          <div class="fight-card-3d relative">
-            <div class="fight-card-inner border-2 border-neon-pink/40 rounded-2xl overflow-hidden
-                        bg-gradient-to-b from-surface-raised via-black/90 to-surface-raised
-                        shadow-[0_0_40px_rgba(255,45,120,0.15),0_0_80px_rgba(255,45,120,0.05)]
-                        group-hover:border-neon-pink/60 group-hover:shadow-[0_0_60px_rgba(255,45,120,0.25)]
-                        transition-all duration-300">
+          <!-- ═══ Dramatic poster background layers ═══ -->
 
-              <!-- Top banner -->
-              <div class="bg-gradient-to-r from-neon-pink/20 via-neon-purple/20 to-neon-cyan/20 px-4 py-2 text-center border-b border-white/5">
-                <p class="font-display font-black text-[10px] sm:text-xs tracking-[0.3em] text-neon-yellow">
+          <!-- Dark vignette base -->
+          <div class="absolute inset-0 pointer-events-none"
+               style="background: radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(0,0,0,0.6) 100%)" />
+
+          <!-- Dual spotlights — cyan left, pink right -->
+          <div class="absolute inset-0 pointer-events-none"
+               style="background:
+                 conic-gradient(from 200deg at 15% 0%, rgba(0,240,255,0.15) 0deg, transparent 40deg),
+                 conic-gradient(from -20deg at 85% 0%, rgba(255,45,120,0.15) 0deg, transparent 40deg)" />
+
+          <!-- Center clash glow -->
+          <div class="absolute inset-0 pointer-events-none"
+               style="background:
+                 radial-gradient(ellipse at 25% 55%, rgba(0,240,255,0.14) 0%, transparent 45%),
+                 radial-gradient(ellipse at 75% 55%, rgba(255,45,120,0.14) 0%, transparent 45%),
+                 radial-gradient(circle at 50% 50%, rgba(168,85,247,0.08) 0%, transparent 35%)" />
+
+          <!-- Top pink wash -->
+          <div class="absolute inset-0 pointer-events-none"
+               style="background: radial-gradient(ellipse at 50% -10%, rgba(255,45,120,0.25) 0%, transparent 40%)" />
+
+          <!-- Bottom purple haze -->
+          <div class="absolute inset-0 pointer-events-none"
+               style="background: radial-gradient(ellipse at 50% 110%, rgba(168,85,247,0.12) 0%, transparent 35%)" />
+
+          <!-- Cross-hatched lines -->
+          <div class="absolute inset-0 pointer-events-none poster-crosshatch" />
+
+          <!-- Scan lines overlay -->
+          <div class="absolute inset-0 pointer-events-none poster-scanlines" />
+
+          <!-- Neon edge lines -->
+          <div class="absolute top-0 inset-x-0 h-[2px] bg-gradient-to-r from-transparent via-neon-pink/70 to-transparent" />
+          <div class="absolute bottom-0 inset-x-0 h-[2px] bg-gradient-to-r from-transparent via-neon-cyan/70 to-transparent" />
+          <div class="absolute left-0 inset-y-0 w-[2px] bg-gradient-to-b from-neon-pink/30 via-neon-purple/20 to-neon-cyan/30 hidden lg:block" />
+
+          <!-- Corner accents -->
+          <div class="absolute top-0 left-0 w-8 h-8 sm:w-12 sm:h-12 border-t-2 border-l-2 border-neon-pink/30" />
+          <div class="absolute top-0 right-0 w-8 h-8 sm:w-12 sm:h-12 border-t-2 border-r-2 border-neon-pink/30" />
+          <div class="absolute bottom-0 left-0 w-8 h-8 sm:w-12 sm:h-12 border-b-2 border-l-2 border-neon-cyan/30" />
+          <div class="absolute bottom-0 right-0 w-8 h-8 sm:w-12 sm:h-12 border-b-2 border-r-2 border-neon-cyan/30" />
+
+          <!-- Ring ropes (horizontal accent lines) -->
+          <div class="absolute left-0 right-0 top-[30%] h-px bg-gradient-to-r from-transparent via-neon-yellow/10 to-transparent" />
+          <div class="absolute left-0 right-0 top-[70%] h-px bg-gradient-to-r from-transparent via-neon-yellow/10 to-transparent" />
+
+          <!-- Title -->
+          <div class="text-center pt-2 sm:pt-3 lg:pt-5 px-4 relative z-10 shrink-0">
+            <p class="font-pixel text-[10px] sm:text-sm lg:text-base text-neon-yellow/90 tracking-[0.5em] animate-pulse">
+              {{ isMainFeatured ? 'TONIGHT\'S MAIN EVENT' : 'UNDERCARD BOUT' }}
+            </p>
+            <div class="relative inline-block mt-0.5 sm:mt-1">
+              <h1 class="font-neon text-3xl sm:text-5xl lg:text-8xl text-neon-pink glow-pink neon-flicker tracking-wider leading-none poster-title">
+                FIGHT NIGHT
+              </h1>
+              <div class="absolute -inset-2 sm:-inset-3 border-2 border-neon-pink/30 rounded neon-border-pink" />
+            </div>
+            <div class="flex items-center gap-3 mt-1.5 sm:mt-2 max-w-sm sm:max-w-md mx-auto">
+              <div class="flex-1 h-px bg-gradient-to-r from-transparent to-neon-purple/30" />
+              <div class="shrink-0 px-3 sm:px-4 py-0.5 sm:py-1 border border-neon-purple/25 rounded bg-neon-purple/5">
+                <p class="font-display font-black text-[7px] sm:text-[10px] lg:text-xs tracking-[0.3em] text-neon-purple/80">
                   {{ featured.arenaInfo?.name?.toUpperCase() || 'THE RING' }}
                 </p>
               </div>
+              <div class="flex-1 h-px bg-gradient-to-l from-transparent to-neon-purple/30" />
+            </div>
+          </div>
 
-              <!-- Fighter showcase -->
-              <div class="px-4 sm:px-8 py-6 sm:py-10">
-                <div class="flex items-center justify-between gap-2">
+          <!-- Fighters -->
+          <div class="flex-1 flex flex-col items-center justify-center relative z-10 min-h-0 px-2 sm:px-4 lg:px-6">
 
-                  <!-- Fighter A -->
-                  <div class="flex-1 flex flex-col items-center text-center min-w-0">
-                    <div class="relative mb-3 sm:mb-4">
-                      <div class="absolute -inset-3 rounded-full bg-neon-cyan/10 blur-xl" />
-                      <SpritePreview
-                        v-if="featured.botA"
-                        :seed="featured.botA.avatarSeed || featured.botA.name"
-                        :archetype="featured.botA.archetype || 'standard'"
-                        :tier="featured.botA.tier"
-                        :size="100"
-                        class="relative z-10 drop-shadow-[0_0_20px_rgba(0,240,255,0.4)] sm:w-[130px] sm:h-[130px] fighter-bob"
-                      />
-                    </div>
-                    <p class="font-display font-black text-sm sm:text-xl tracking-wider text-neon-cyan glow-cyan truncate w-full">
-                      {{ featured.botA?.name || '???' }}
-                    </p>
-                    <p class="font-pixel text-[9px] sm:text-[10px] mt-1 tracking-wider"
-                       :style="{ color: tierColors[featured.botA?.tier || 0] }">
-                      {{ tierNames[featured.botA?.tier || 0] }}
-                    </p>
-                    <p class="font-mono text-[10px] sm:text-xs text-text-muted mt-0.5">
-                      {{ Math.round(featured.botA?.eloRating || 0) }} ELO
-                    </p>
-                  </div>
+            <!-- Sprites -->
+            <div class="flex items-end justify-center w-full max-w-4xl">
+              <div class="flex-1 flex flex-col items-center min-w-0">
+                <PosterSprite
+                  v-if="fighterA"
+                  :key="`a-${featured.id}-${fighterA.avatarSeed}`"
+                  :seed="fighterA.avatarSeed || fighterA.name"
+                  :archetype="fighterA.archetype || 'standard'"
+                  :tier="fighterA.tier"
+                  :size="160"
+                  pose="win"
+                  glow-color="cyan"
+                  class="relative z-10 fighter-bob
+                         sm:!w-[240px] sm:!h-[240px] lg:!w-[340px] lg:!h-[340px]"
+                />
+              </div>
+              <div class="flex-1 flex flex-col items-center min-w-0 -ml-6 sm:-ml-12 lg:-ml-20">
+                <div style="transform: scaleX(-1)">
+                  <PosterSprite
+                    v-if="fighterB"
+                    :key="`b-${featured.id}-${fighterB.avatarSeed}`"
+                    :seed="fighterB.avatarSeed || fighterB.name"
+                    :archetype="fighterB.archetype || 'standard'"
+                    :tier="fighterB.tier"
+                    :size="160"
+                    pose="idle"
+                    glow-color="pink"
+                    class="relative z-10 fighter-bob-delayed
+                           sm:!w-[240px] sm:!h-[240px] lg:!w-[340px] lg:!h-[340px]"
+                  />
+                </div>
+              </div>
+            </div>
 
-                  <!-- VS center with gloves -->
-                  <div class="shrink-0 flex flex-col items-center gap-1 px-2">
-                    <PixelGlove :size="28" class="sm:!w-[40px] rotate-12 glove-punch-left" />
-                    <div class="relative">
-                      <span class="font-neon text-3xl sm:text-5xl text-neon-purple glow-purple vs-pulse tracking-wider">VS</span>
-                    </div>
-                    <PixelGlove :size="28" flip class="sm:!w-[40px] -rotate-12 glove-punch-right" />
-                  </div>
+            <!-- Names with VS orb in center -->
+            <div class="flex items-stretch w-full max-w-3xl mt-1 sm:mt-2 lg:mt-3 shrink-0 relative">
 
-                  <!-- Fighter B -->
-                  <div class="flex-1 flex flex-col items-center text-center min-w-0">
-                    <div class="relative mb-3 sm:mb-4">
-                      <div class="absolute -inset-3 rounded-full bg-neon-pink/10 blur-xl" />
-                      <SpritePreview
-                        v-if="featured.botB"
-                        :seed="featured.botB.avatarSeed || featured.botB.name"
-                        :archetype="featured.botB.archetype || 'standard'"
-                        :tier="featured.botB.tier"
-                        :size="100"
-                        class="relative z-10 drop-shadow-[0_0_20px_rgba(255,45,120,0.4)] sm:w-[130px] sm:h-[130px] fighter-bob-delayed"
-                        style="transform: scaleX(-1)"
-                      />
-                    </div>
-                    <p class="font-display font-black text-sm sm:text-xl tracking-wider text-neon-pink glow-pink truncate w-full">
-                      {{ featured.botB?.name || '???' }}
-                    </p>
-                    <p class="font-pixel text-[9px] sm:text-[10px] mt-1 tracking-wider"
-                       :style="{ color: tierColors[featured.botB?.tier || 0] }">
-                      {{ tierNames[featured.botB?.tier || 0] }}
-                    </p>
-                    <p class="font-mono text-[10px] sm:text-xs text-text-muted mt-0.5">
-                      {{ Math.round(featured.botB?.eloRating || 0) }} ELO
-                    </p>
+              <!-- Fighter A — cyan -->
+              <div class="flex-1 min-w-0 name-block-cyan border-2 border-neon-cyan/40 rounded-l-lg px-2 sm:px-3 pr-16 sm:pr-20 lg:pr-24 py-1.5 sm:py-2 lg:py-3 text-center">
+                <p class="font-funky text-base sm:text-2xl lg:text-4xl tracking-widest text-neon-cyan truncate pb-0.5 poster-name-cyan uppercase">
+                  {{ fighterA?.name || '???' }}
+                </p>
+                <p class="font-pixel text-[6px] sm:text-[8px] lg:text-[11px] tracking-[0.2em]"
+                   :style="{ color: tierColors[fighterA?.tier ?? 0] }">
+                  {{ tierNames[fighterA?.tier ?? 0] }}
+                </p>
+              </div>
+
+              <!-- VS orb — 3D circle, bigger than name cards -->
+              <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-30">
+                <div class="vs-orb" :class="{ 'vs-punching': isPunching }">
+                  <div class="vs-orb-inner flex items-center justify-center">
+                    <PixelGlove :size="22" class="sm:!w-[32px] lg:!w-[42px] vs-glove-left" :class="{ 'glove-smash-left': isPunching }" />
+                    <span v-if="!isPunching" class="font-pixel text-xl sm:text-3xl lg:text-4xl text-white tracking-widest leading-none mx-1.5 sm:mx-2">VS</span>
+                    <span v-else class="font-pixel text-2xl sm:text-4xl lg:text-5xl text-neon-yellow tracking-widest leading-none mx-0 vs-impact">&#x1F4A5;</span>
+                    <PixelGlove :size="22" flip class="sm:!w-[32px] lg:!w-[42px] vs-glove-right" :class="{ 'glove-smash-right': isPunching }" />
                   </div>
                 </div>
               </div>
 
-              <!-- Bottom banner -->
-              <div class="bg-gradient-to-r from-neon-cyan/10 via-neon-purple/10 to-neon-pink/10 px-4 py-3 text-center border-t border-white/5">
-                <p class="font-display font-black text-xs sm:text-sm tracking-[0.2em] text-neon-purple group-hover:text-neon-cyan transition-colors">
-                  {{ featured.status === 'finished' ? 'WATCH REPLAY' : featured.status === 'live' ? 'WATCH LIVE' : 'VIEW FIGHT' }}
+              <!-- Fighter B — pink -->
+              <div class="flex-1 min-w-0 name-block-pink border-2 border-neon-pink/40 border-l-0 rounded-r-lg px-2 sm:px-3 pl-16 sm:pl-20 lg:pl-24 py-1.5 sm:py-2 lg:py-3 text-center">
+                <p class="font-funky text-base sm:text-2xl lg:text-4xl tracking-widest text-neon-pink truncate pb-0.5 poster-name-pink uppercase">
+                  {{ fighterB?.name || '???' }}
+                </p>
+                <p class="font-pixel text-[6px] sm:text-[8px] lg:text-[11px] tracking-[0.2em]"
+                   :style="{ color: tierColors[fighterB?.tier ?? 0] }">
+                  {{ tierNames[fighterB?.tier ?? 0] }}
                 </p>
               </div>
             </div>
           </div>
+
+          <!-- CTA button -->
+          <div class="relative z-10 shrink-0 border-t border-white/5 px-4 py-2 sm:py-3 lg:py-4 text-center
+                      bg-gradient-to-r from-neon-pink/8 via-neon-purple/8 to-neon-cyan/8">
+            <span class="inline-block px-6 sm:px-10 py-1.5 sm:py-2.5 bg-neon-pink/10 border-2 border-neon-pink text-neon-pink
+                         font-display font-black text-[10px] sm:text-xs tracking-widest
+                         group-hover:bg-neon-pink/20 transition-all neon-border-pink">
+              {{ featured.status === 'finished' ? 'WATCH REPLAY' : featured.status === 'live' ? 'WATCH LIVE' : 'VIEW FIGHT' }}
+            </span>
+          </div>
         </RouterLink>
 
-        <!-- Undercard fights -->
-        <div v-if="fights.length > 1" class="mt-8 sm:mt-12">
-          <div class="flex items-center gap-3 mb-4">
-            <div class="flex-1 h-px bg-gradient-to-r from-transparent via-neon-purple/30 to-transparent" />
-            <p class="font-pixel text-[10px] text-neon-purple tracking-[0.3em]">UNDERCARD</p>
-            <div class="flex-1 h-px bg-gradient-to-r from-transparent via-neon-purple/30 to-transparent" />
+        <!-- RIGHT: Fight list (bottom half on mobile, 1/3 on desktop) -->
+        <div class="h-1/2 lg:h-full lg:w-1/3 flex flex-col overflow-hidden border-t lg:border-t-0 border-border/30">
+
+          <!-- Main event card — ALWAYS visible at top -->
+          <button
+            v-if="mainEvent && mainEvent.botA && mainEvent.botB"
+            class="mx-4 mt-3 lg:mt-5 mb-2 px-3 py-2 border-2 rounded-lg transition-all text-left"
+            :class="isMainFeatured
+              ? 'border-neon-yellow/50 bg-neon-yellow/10 ring-1 ring-neon-yellow/20'
+              : 'border-neon-yellow/20 bg-neon-yellow/5 hover:bg-neon-yellow/10 hover:border-neon-yellow/40'"
+            @click.prevent="selectMainEvent"
+          >
+            <div class="flex items-center justify-between mb-1">
+              <p class="font-pixel text-[8px] text-neon-yellow/70 tracking-[0.3em]">&#9733; MAIN EVENT</p>
+              <span v-if="isMainFeatured" class="font-pixel text-[7px] text-neon-yellow/50 tracking-wider">VIEWING</span>
+            </div>
+            <div class="flex items-center">
+              <div class="flex-1 flex items-center justify-end gap-1.5 min-w-0">
+                <p class="font-display font-bold text-xs text-neon-cyan truncate">{{ mainEvent.botA.name }}</p>
+                <SpritePreview
+                  :seed="mainEvent.botA.avatarSeed || mainEvent.botA.name"
+                  :archetype="mainEvent.botA.archetype || 'standard'"
+                  :tier="mainEvent.botA.tier"
+                  :size="20"
+                  class="shrink-0"
+                />
+              </div>
+              <span class="font-pixel text-neon-yellow text-[10px] px-2 shrink-0">VS</span>
+              <div class="flex-1 flex items-center gap-1.5 min-w-0">
+                <SpritePreview
+                  :seed="mainEvent.botB.avatarSeed || mainEvent.botB.name"
+                  :archetype="mainEvent.botB.archetype || 'standard'"
+                  :tier="mainEvent.botB.tier"
+                  :size="20"
+                  class="shrink-0"
+                  style="transform: scaleX(-1)"
+                />
+                <p class="font-display font-bold text-xs text-neon-pink truncate">{{ mainEvent.botB.name }}</p>
+              </div>
+            </div>
+          </button>
+
+          <!-- Undercard header -->
+          <div class="px-4 py-2 lg:py-3 shrink-0">
+            <div class="flex items-center gap-3">
+              <div class="flex-1 h-px bg-gradient-to-r from-transparent via-neon-purple/30 to-transparent" />
+              <p class="font-pixel text-[9px] sm:text-[10px] text-neon-purple tracking-[0.3em]">
+                {{ undercardFights.length > 0 ? 'UNDERCARD' : 'NO OTHER BOUTS' }}
+              </p>
+              <div class="flex-1 h-px bg-gradient-to-r from-transparent via-neon-purple/30 to-transparent" />
+            </div>
           </div>
 
-          <div class="space-y-2">
-            <RouterLink
-              v-for="fight in fights.filter(f => f.id !== featured?.id).slice(0, 6)"
+          <!-- Fight list -->
+          <div class="flex-1 min-h-0 overflow-y-auto px-4 pb-2 lg:pb-4 space-y-1.5">
+            <button
+              v-for="fight in undercardFights"
               :key="fight.id"
-              :to="`/arena/${fight.id}`"
-              class="flex items-center px-3 sm:px-4 py-2.5 border border-border/50 rounded-lg
-                     bg-surface-raised/30 hover:border-neon-purple/30 hover:bg-surface-overlay/20
-                     transition-all group/card"
+              class="w-full flex items-center px-3 py-2 border rounded-lg transition-all text-left"
+              :class="fight.id === selectedId
+                ? 'border-neon-purple/50 bg-neon-purple/10 ring-1 ring-neon-purple/20'
+                : (fight.botA && fight.botB)
+                  ? 'border-border/50 bg-surface-raised/30 hover:border-neon-purple/30 hover:bg-surface-overlay/20'
+                  : 'border-border/30 bg-surface-raised/10 opacity-50 cursor-not-allowed'"
+              :disabled="!fight.botA || !fight.botB"
+              @click.prevent="fight.botA && fight.botB && selectFight(fight.id)"
             >
-              <div class="flex-1 flex items-center justify-end gap-2 min-w-0">
-                <p class="font-display font-bold text-xs sm:text-sm truncate"
+              <div class="flex-1 flex items-center justify-end gap-1.5 min-w-0">
+                <p class="font-display font-bold text-[11px] truncate"
                    :class="fight.botA ? 'text-text-primary' : 'text-text-muted'">
                   {{ fight.botA?.name || '???' }}
                 </p>
@@ -196,43 +353,48 @@ onMounted(async () => {
                   :seed="fight.botA.avatarSeed || fight.botA.name"
                   :archetype="fight.botA.archetype || 'standard'"
                   :tier="fight.botA.tier"
-                  :size="28"
+                  :size="22"
                   class="shrink-0"
                 />
               </div>
-              <span class="font-funky text-neon-purple text-xs sm:text-sm px-2 sm:px-3 shrink-0">VS</span>
-              <div class="flex-1 flex items-center gap-2 min-w-0">
+              <span class="font-funky text-neon-purple text-[10px] px-1.5 shrink-0">VS</span>
+              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                 <SpritePreview
                   v-if="fight.botB"
                   :seed="fight.botB.avatarSeed || fight.botB.name"
                   :archetype="fight.botB.archetype || 'standard'"
                   :tier="fight.botB.tier"
-                  :size="28"
+                  :size="22"
                   class="shrink-0"
                   style="transform: scaleX(-1)"
                 />
-                <p class="font-display font-bold text-xs sm:text-sm truncate"
+                <p class="font-display font-bold text-[11px] truncate"
                    :class="fight.botB ? 'text-text-primary' : 'text-text-muted'">
                   {{ fight.botB?.name || '???' }}
                 </p>
               </div>
-              <span v-if="fight.status === 'finished'" class="font-mono text-[9px] text-text-muted ml-2 shrink-0">R{{ fight.totalRounds }}</span>
-              <span v-else-if="fight.status === 'live'" class="font-display text-[10px] text-neon-yellow ml-2 shrink-0 animate-pulse">LIVE</span>
+              <div class="ml-1.5 shrink-0">
+                <span v-if="fight.botA?.botType === 'classic' || fight.botB?.botType === 'classic'"
+                      class="font-display text-[8px] text-text-muted/50 tracking-wider">PRAC</span>
+                <span v-else-if="fight.status === 'finished'" class="font-mono text-[8px] text-text-muted">R{{ fight.totalRounds }}</span>
+                <span v-else-if="fight.status === 'live'" class="font-display text-[9px] text-neon-yellow animate-pulse">LIVE</span>
+              </div>
+            </button>
+          </div>
+
+          <!-- Enter the ring -->
+          <div class="px-4 pb-3 lg:pb-5 shrink-0">
+            <RouterLink
+              to="/join"
+              class="block text-center px-6 py-2.5 bg-neon-pink/10 border-2 border-neon-pink text-neon-pink
+                     font-display font-black text-[10px] sm:text-xs tracking-widest
+                     hover:bg-neon-pink/20 transition-all neon-border-pink"
+            >
+              ENTER THE RING
             </RouterLink>
           </div>
         </div>
 
-        <!-- CTA -->
-        <div class="mt-8 sm:mt-10 text-center">
-          <RouterLink
-            to="/join"
-            class="inline-block px-8 sm:px-12 py-3 sm:py-4 bg-neon-pink/10 border-2 border-neon-pink text-neon-pink
-                   font-display font-black text-sm sm:text-base tracking-widest
-                   hover:bg-neon-pink/20 transition-all neon-border-pink"
-          >
-            ENTER THE RING
-          </RouterLink>
-        </div>
       </div>
     </template>
 
@@ -250,17 +412,149 @@ onMounted(async () => {
 </template>
 
 <style scoped>
-/* 3D card effect */
-.fight-card-3d {
-  perspective: 1000px;
+/* ═══ Poster background effects ═══ */
+.poster-bg {
+  background: linear-gradient(180deg,
+    rgba(15, 5, 25, 1) 0%,
+    rgba(10, 8, 20, 1) 40%,
+    rgba(8, 12, 22, 1) 100%);
 }
-.fight-card-inner {
-  transform: rotateX(2deg);
-  transform-origin: center bottom;
-  transition: transform 0.3s ease;
+
+/* Cross-hatched diagonal lines */
+.poster-crosshatch {
+  background:
+    repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 30px,
+      rgba(255, 255, 255, 0.04) 30px,
+      rgba(255, 255, 255, 0.04) 32px
+    ),
+    repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent 30px,
+      rgba(255, 255, 255, 0.04) 30px,
+      rgba(255, 255, 255, 0.04) 32px
+    );
 }
-.fight-card-3d:hover .fight-card-inner {
-  transform: rotateX(0deg) scale(1.01);
+
+/* CRT scan lines */
+.poster-scanlines {
+  opacity: 0.04;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 0, 0, 0.8) 2px,
+    rgba(0, 0, 0, 0.8) 4px
+  );
+}
+
+/* Poster name glow — 3D embossed neon */
+.poster-name-cyan {
+  -webkit-text-stroke: 1px rgba(0, 180, 200, 0.6);
+  text-shadow:
+    2px 2px 0 rgba(0, 100, 130, 0.8),
+    0 0 10px rgba(0, 240, 255, 0.6),
+    0 0 30px rgba(0, 240, 255, 0.3),
+    0 0 60px rgba(0, 240, 255, 0.15);
+}
+.poster-name-pink {
+  -webkit-text-stroke: 1px rgba(200, 30, 90, 0.6);
+  text-shadow:
+    2px 2px 0 rgba(130, 20, 60, 0.8),
+    0 0 10px rgba(255, 45, 120, 0.6),
+    0 0 30px rgba(255, 45, 120, 0.3),
+    0 0 60px rgba(255, 45, 120, 0.15);
+}
+.poster-title {
+  text-shadow:
+    0 0 15px rgba(255, 45, 120, 0.6),
+    0 0 40px rgba(255, 45, 120, 0.3),
+    0 0 80px rgba(255, 45, 120, 0.15);
+}
+
+/* Name block containers */
+.name-block-cyan {
+  background: linear-gradient(135deg, rgba(0, 240, 255, 0.08) 0%, rgba(0, 240, 255, 0.02) 100%);
+}
+.name-block-pink {
+  background: linear-gradient(225deg, rgba(255, 45, 120, 0.08) 0%, rgba(255, 45, 120, 0.02) 100%);
+}
+
+/* ═══ VS Orb — 3D circle ═══ */
+.vs-orb {
+  width: 112px;
+  height: 112px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 35%, rgba(220, 160, 255, 0.9) 0%, rgba(168, 85, 247, 0.95) 40%, rgba(100, 30, 180, 1) 100%);
+  border: 3px solid rgba(255, 255, 255, 0.25);
+  box-shadow:
+    0 0 20px rgba(168, 85, 247, 0.6),
+    0 0 40px rgba(168, 85, 247, 0.3),
+    0 0 60px rgba(168, 85, 247, 0.15),
+    inset 0 -4px 8px rgba(0,0,0,0.4),
+    inset 0 4px 8px rgba(255,255,255,0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.15s ease;
+}
+@media (min-width: 640px) {
+  .vs-orb { width: 144px; height: 144px; border-width: 4px; }
+}
+@media (min-width: 1024px) {
+  .vs-orb { width: 176px; height: 176px; border-width: 5px; }
+}
+.vs-orb-inner {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 2px solid rgba(255,255,255,0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Punch animation */
+.vs-punching {
+  transform: scale(1.15);
+}
+.vs-impact {
+  animation: impactShake 0.3s ease-out;
+  filter: brightness(1.5);
+}
+@keyframes impactShake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-2px) rotate(-5deg); }
+  75% { transform: translateX(2px) rotate(5deg); }
+}
+.glove-smash-left {
+  animation: smashLeft 0.4s ease-out !important;
+}
+.glove-smash-right {
+  animation: smashRight 0.4s ease-out !important;
+}
+@keyframes smashLeft {
+  0% { transform: rotate(12deg) translateX(-8px); }
+  40% { transform: rotate(30deg) translateX(4px); }
+  60% { transform: rotate(15deg) translateX(2px); }
+  100% { transform: rotate(12deg) translateX(0); }
+}
+@keyframes smashRight {
+  0% { transform: rotate(-12deg) translateX(8px); }
+  40% { transform: rotate(-30deg) translateX(-4px); }
+  60% { transform: rotate(-15deg) translateX(-2px); }
+  100% { transform: rotate(-12deg) translateX(0); }
+}
+
+/* Normal glove idle */
+.vs-glove-left {
+  animation: punchLeft 2s ease-in-out infinite;
+}
+.vs-glove-right {
+  animation: punchRight 2s ease-in-out infinite 0.3s;
 }
 
 /* Fighter bobbing */
@@ -276,12 +570,6 @@ onMounted(async () => {
 }
 
 /* Glove punch animations */
-.glove-punch-left {
-  animation: punchLeft 2s ease-in-out infinite;
-}
-.glove-punch-right {
-  animation: punchRight 2s ease-in-out infinite 0.3s;
-}
 @keyframes punchLeft {
   0%, 70%, 100% { transform: rotate(12deg) translateX(0); }
   80% { transform: rotate(25deg) translateX(6px); }
@@ -292,18 +580,4 @@ onMounted(async () => {
   80% { transform: rotate(-25deg) translateX(-6px); }
   85% { transform: rotate(-8deg) translateX(2px); }
 }
-
-/* VS pulse */
-.vs-pulse {
-  animation: vsPulse 2s ease-in-out infinite;
-}
-@keyframes vsPulse {
-  0%, 100% { transform: scale(1); opacity: 1; }
-  50% { transform: scale(1.1); opacity: 0.8; }
-}
-
-/* Neon purple glow utility */
-.glow-purple {
-  text-shadow: 0 0 10px rgba(168, 85, 247, 0.6), 0 0 30px rgba(168, 85, 247, 0.3);
-}
 </style>