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>
2026-03-08 10:33:30 +00:00
parent ccf4196647
commit f6eb7d2845
32 changed files with 1743 additions and 467 deletions
@@ -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>
@@ -153,7 +153,15 @@ const myBotId = computed(() => {

 const showOverlay = computed(() => replayDone.value && !isRequeueing.value && !autoBattle.value)

-function sleep(ms: number) { return new Promise(resolve => setTimeout(resolve, ms)) }
+let _pageDestroyed = false
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      if (_pageDestroyed) reject(new Error('unmounted'))
+      else resolve()
+    }, ms)
+  })
+}
 function scrollLiveLog() { nextTick(() => { liveLogEl.value?.scrollTo({ top: liveLogEl.value.scrollHeight, behavior: 'smooth' }) }) }

 const challengeLabel = (type: string) => {
@@ -401,7 +409,7 @@ function connectSSE() {

  eventSource.addEventListener('round_end', (e) => {
    try {
-      handleRoundEnd(JSON.parse(e.data))
+      handleRoundEnd(JSON.parse(e.data)).catch(() => {})
    } catch (err) {
      console.warn('[FightPage] SSE round_end failed:', err)
    }
@@ -409,7 +417,7 @@ function connectSSE() {

  eventSource.addEventListener('fight_end', (e) => {
    try {
-      handleFightEnd(JSON.parse(e.data))
+      handleFightEnd(JSON.parse(e.data)).catch(() => {})
    } catch (err) {
      console.warn('[FightPage] SSE fight_end failed:', err)
    }
@@ -660,6 +668,7 @@ onMounted(async () => {
 })

 onUnmounted(() => {
+  _pageDestroyed = true
  if (pollHandle) clearInterval(pollHandle)
  stopHumanPolling()
  disconnectSSE()
@@ -8,7 +8,10 @@ import HumanPreview from '../components/HumanPreview.vue'
 import WalletConnect from '../components/WalletConnect.vue'

 const router = useRouter()
-const { pubkey, bot, profilePicUrl, isLoggedIn, hasExtension, isLoading, login, registerBot, registerHuman, logout } = useNostr()
+const { pubkey, bot, profilePicUrl, isLoggedIn, hasExtension, hasStoredKey, isLoading, login, generateLogin, loginWithNsec, registerBot, registerHuman, getStoredNsec, logout } = useNostr()
+const showNsecBackup = ref(false)
+const generatedNsec = ref('')
+const nsecInput = ref('')
 const { isWalletConnected, payEntryFee, paymentStatus } = useWallet()

 // Steps: 'login' | 'choose-mode' | 'pick-character' | 'name-bot' | 'bot-setup' | 'add-webhook' |
@@ -19,6 +22,7 @@ const selectedHumanSeed = ref('baby_fighter_1')
 const error = ref('')
 const isJoining = ref(false)
 const isJoiningRanked = ref(false)
+const isJoiningPractice = ref(false)
 const queueCount = ref(0)
 let pollHandle: ReturnType<typeof setInterval> | null = null

@@ -29,6 +33,7 @@ const humanName = ref('')
 const webhookUrl = ref('')
 const showCode = ref(false)
 const codeCopied = ref(false)
+const nsecCopied = ref(false)

 const BOT_CODE = `const http = require('http')

@@ -57,6 +62,12 @@ function copyCode() {
  setTimeout(() => { codeCopied.value = false }, 2000)
 }

+function copyNsec() {
+  navigator.clipboard.writeText(generatedNsec.value)
+  nsecCopied.value = true
+  setTimeout(() => { nsecCopied.value = false }, 2000)
+}
+
 const archetypeList = [
  { id: 'standard', label: 'FIGHTER', desc: 'Classic brawler' },
  { id: 'lobster', label: 'LOBSTER', desc: 'Pinchy menace' },
@@ -125,6 +136,71 @@ async function handleLogin() {
  }
 }

+function handleGenerateLogin() {
+  error.value = ''
+  const { nsec } = generateLogin()
+  generatedNsec.value = nsec
+  showNsecBackup.value = true
+}
+
+async function handleNsecBackupDone() {
+  showNsecBackup.value = false
+  try {
+    const result = await login()
+    if (result.bot) {
+      isHumanMode.value = !!result.bot.isHuman
+      step.value = 'ready'
+    } else {
+      step.value = 'choose-mode'
+    }
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Login failed.'
+  }
+}
+
+async function handleNsecLogin() {
+  error.value = ''
+  const input = nsecInput.value.trim()
+  if (!input) {
+    error.value = 'Enter your nsec1... or hex key.'
+    return
+  }
+
+  let hexKey: string
+  if (input.startsWith('nsec1')) {
+    try {
+      const { decode } = await import('nostr-tools/nip19')
+      const decoded = decode(input)
+      if (decoded.type !== 'nsec') {
+        error.value = 'Invalid nsec key.'
+        return
+      }
+      const { bytesToHex } = await import('nostr-tools/utils')
+      hexKey = bytesToHex(decoded.data)
+    } catch {
+      error.value = 'Invalid nsec key.'
+      return
+    }
+  } else if (/^[0-9a-f]{64}$/.test(input)) {
+    hexKey = input
+  } else {
+    error.value = 'Enter a valid nsec1... or 64-char hex key.'
+    return
+  }
+
+  try {
+    const result = await loginWithNsec(hexKey)
+    if (result.bot) {
+      isHumanMode.value = !!result.bot.isHuman
+      step.value = 'ready'
+    } else {
+      step.value = 'choose-mode'
+    }
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Login failed.'
+  }
+}
+
 function pickCharacter(id: string) {
  selectedArchetype.value = id
  step.value = 'name-bot'
@@ -271,6 +347,25 @@ async function fightRanked() {
  isJoiningRanked.value = false
 }

+async function practice() {
+  if (!bot.value || isJoiningPractice.value) return
+  isJoiningPractice.value = true
+  error.value = ''
+  try {
+    const res = await fetch(`/api/fights/practice/${bot.value.id}`, { method: 'POST' })
+    if (res.ok) {
+      const data = await res.json()
+      router.push(`/arena/${data.fightId}`)
+    } else {
+      const data = await res.json()
+      error.value = data.error || 'Failed to start practice fight.'
+    }
+  } catch {
+    error.value = 'Network error.'
+  }
+  isJoiningPractice.value = false
+}
+
 function handleSignOut() {
  logout()
  step.value = 'login'
@@ -299,31 +394,98 @@ function handleSignOut() {
          </p>
        </div>

-        <button
-          v-if="hasExtension"
-          class="w-full py-4 bg-neon-purple/10 border-2 border-neon-purple/50 text-neon-purple
-                 font-display font-black text-base tracking-widest
-                 hover:bg-neon-purple/20 hover:border-neon-purple transition-all
-                 disabled:opacity-50 disabled:cursor-wait
-                 flex items-center justify-center gap-3"
-          :disabled="isLoading"
-          @click="handleLogin"
-        >
-          <span v-if="isLoading" class="w-5 h-5 border-2 border-neon-purple/30 border-t-neon-purple rounded-full animate-spin" />
-          {{ isLoading ? 'CONNECTING...' : 'SIGN IN WITH NOSTR' }}
-        </button>
-
-        <div v-else class="text-center p-6 border-2 border-border bg-surface">
-          <p class="font-display font-bold text-sm text-text-secondary tracking-wider mb-3">
-            NOSTR EXTENSION REQUIRED
+        <!-- Nsec backup modal -->
+        <div v-if="showNsecBackup" class="p-6 border-2 border-neon-yellow/50 bg-neon-yellow/5 space-y-4">
+          <p class="font-display font-black text-sm tracking-wider text-neon-yellow">
+            SAVE YOUR SECRET KEY
          </p>
          <p class="font-mono text-xs text-text-muted leading-relaxed">
-            Install a NIP-07 browser extension like
-            <span class="text-neon-cyan">nos2x</span>,
-            <span class="text-neon-cyan">Alby</span>, or
-            <span class="text-neon-cyan">Flamingo</span>
-            to sign in.
+            This is your login key. Save it somewhere safe. If you lose it, you lose your account.
          </p>
+          <div class="relative">
+            <div class="bg-black/50 p-3 pr-16 border border-border font-mono text-xs text-neon-cyan break-all select-all">
+              {{ generatedNsec }}
+            </div>
+            <button
+              class="absolute top-2 right-2 px-2 py-1 text-[9px] font-display font-bold tracking-wider
+                     border border-border hover:border-neon-cyan/40 hover:text-neon-cyan transition-all"
+              :class="nsecCopied ? 'text-neon-cyan border-neon-cyan/40' : 'text-text-muted'"
+              @click="copyNsec"
+            >
+              {{ nsecCopied ? 'COPIED' : 'COPY' }}
+            </button>
+          </div>
+          <button
+            class="w-full py-3 bg-neon-green/10 border-2 border-neon-green/50 text-neon-green
+                   font-display font-black text-sm tracking-widest
+                   hover:bg-neon-green/20 hover:border-neon-green transition-all"
+            @click="handleNsecBackupDone"
+          >
+            I SAVED IT — CONTINUE
+          </button>
+        </div>
+
+        <div v-if="!showNsecBackup" class="space-y-3">
+          <!-- Sign in with extension -->
+          <button
+            v-if="hasExtension"
+            class="w-full py-4 bg-neon-purple/10 border-2 border-neon-purple/50 text-neon-purple
+                   font-display font-black text-base tracking-widest
+                   hover:bg-neon-purple/20 hover:border-neon-purple transition-all
+                   disabled:opacity-50 disabled:cursor-wait
+                   flex items-center justify-center gap-3"
+            :disabled="isLoading"
+            @click="handleLogin"
+          >
+            <span v-if="isLoading" class="w-5 h-5 border-2 border-neon-purple/30 border-t-neon-purple rounded-full animate-spin" />
+            {{ isLoading ? 'CONNECTING...' : 'SIGN IN WITH NOSTR' }}
+          </button>
+
+          <!-- Sign in with stored key -->
+          <button
+            v-if="!hasExtension && hasStoredKey"
+            class="w-full py-4 bg-neon-purple/10 border-2 border-neon-purple/50 text-neon-purple
+                   font-display font-black text-base tracking-widest
+                   hover:bg-neon-purple/20 hover:border-neon-purple transition-all
+                   disabled:opacity-50 disabled:cursor-wait
+                   flex items-center justify-center gap-3"
+            :disabled="isLoading"
+            @click="handleLogin"
+          >
+            <span v-if="isLoading" class="w-5 h-5 border-2 border-neon-purple/30 border-t-neon-purple rounded-full animate-spin" />
+            {{ isLoading ? 'CONNECTING...' : 'SIGN IN' }}
+          </button>
+
+          <!-- Always show Generate Login -->
+          <button
+            class="w-full py-4 bg-neon-green/10 border-2 border-neon-green/50 text-neon-green
+                   font-display font-black text-base tracking-widest
+                   hover:bg-neon-green/20 hover:border-neon-green transition-all"
+            @click="handleGenerateLogin"
+          >
+            GENERATE NEW IDENTITY
+          </button>
+
+          <!-- Import existing key -->
+          <div class="text-center font-mono text-[10px] text-text-muted">OR IMPORT EXISTING KEY</div>
+
+          <div class="flex gap-2">
+            <input
+              v-model="nsecInput"
+              type="password"
+              placeholder="Paste nsec1... or hex key"
+              class="flex-1 px-3 py-2 bg-black/30 border border-border font-mono text-xs text-text-primary
+                     placeholder-text-muted/50 focus:outline-none focus:border-neon-purple/50"
+            />
+            <button
+              class="px-4 py-2 bg-neon-purple/10 border border-neon-purple/50 text-neon-purple
+                     font-display font-bold text-xs tracking-wider
+                     hover:bg-neon-purple/20 transition-all"
+              @click="handleNsecLogin"
+            >
+              LOGIN
+            </button>
+          </div>
        </div>
      </template>

@@ -413,15 +575,15 @@ function handleSignOut() {
            v-model="botName"
            type="text"
            required
-            maxlength="32"
-            placeholder="skull_crusher_9000"
+            maxlength="12"
+            placeholder="skull_crush"
            class="w-full bg-surface border-2 border-border px-4 py-3 text-sm font-mono
                   text-text-primary placeholder-text-muted
                   focus:outline-none focus:border-neon-cyan/50 transition-colors"
            @keyup.enter="confirmName"
          />
          <p class="font-mono text-[10px] text-text-muted mt-1.5">
-            Letters, numbers, hyphens, underscores. 2-32 chars.
+            Letters, numbers, hyphens, underscores. 2-12 chars.
          </p>
        </div>

@@ -667,15 +829,15 @@ function handleSignOut() {
            v-model="humanName"
            type="text"
            required
-            maxlength="32"
-            placeholder="big_brain_gary"
+            maxlength="12"
+            placeholder="big_brain"
            class="w-full bg-surface border-2 border-border px-4 py-3 text-sm font-mono
                   text-text-primary placeholder-text-muted
                   focus:outline-none focus:border-neon-pink/50 transition-colors"
            @keyup.enter="confirmHumanName"
          />
          <p class="font-mono text-[10px] text-text-muted mt-1.5">
-            Letters, numbers, hyphens, underscores. 2-32 chars.
+            Letters, numbers, hyphens, underscores. 2-12 chars.
          </p>
        </div>

@@ -836,6 +998,25 @@ function handleSignOut() {
          <!-- Wallet connect (shown if no wallet) -->
          <WalletConnect v-if="!isHumanMode && !bot.isHuman" />

+          <!-- Practice fight — against bland classic bots, free -->
+          <div class="pt-2 border-t border-border/30">
+            <button
+              class="w-full py-3 bg-white/3 border border-white/10 text-text-muted
+                     font-display font-bold text-sm tracking-widest
+                     hover:bg-white/5 hover:text-text-secondary transition-all
+                     disabled:opacity-50 disabled:cursor-wait
+                     flex items-center justify-center gap-2"
+              :disabled="isJoiningPractice"
+              @click="practice"
+            >
+              <span v-if="isJoiningPractice" class="w-4 h-4 border-2 border-white/20 border-t-white/50 rounded-full animate-spin" />
+              {{ isJoiningPractice ? 'STARTING...' : 'PRACTICE' }}
+            </button>
+            <p class="font-mono text-[10px] text-text-muted/50 text-center mt-1">
+              Free sparring against practice bots — no ELO impact
+            </p>
+          </div>
+
        </div>

        <!-- Quick links -->
@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { RouterLink } from 'vue-router'
+import SpritePreview from '../components/SpritePreview.vue'

 interface Bot {
  id: string
  name: string
+  avatarSeed: string
+  archetype: string
  eloRating: number
  wins: number
  losses: number
@@ -50,7 +53,7 @@ const record = (b: Bot) => `${b.wins}W - ${b.losses}L`
      </div>

      <!-- Table -->
-      <div class="flex-1 min-h-0 overflow-y-auto border border-border rounded-lg bg-surface-raised/50 neon-border-purple">
+      <div class="flex-1 min-h-0 overflow-y-auto border border-border rounded-lg bg-surface-raised/50">
        <table class="w-full">
          <thead class="sticky top-0 bg-surface-raised z-10">
            <tr class="border-b border-border text-text-muted font-display text-[10px] uppercase tracking-[0.15em]">
@@ -73,8 +76,15 @@ const record = (b: Bot) => `${b.wins}W - ${b.losses}L`
                {{ index + 1 }}
              </td>
              <td class="px-4 py-3">
-                <RouterLink :to="`/bot/${bot.name}`" class="hover:text-neon-cyan transition-colors">
-                  <span class="font-display font-bold text-sm tracking-wide text-text-primary">
+                <RouterLink :to="`/bot/${bot.name}`" class="flex items-center gap-2 hover:text-neon-cyan transition-colors">
+                  <SpritePreview
+                    :seed="bot.avatarSeed || bot.name"
+                    :archetype="bot.archetype || 'standard'"
+                    :tier="bot.tier"
+                    :size="24"
+                    class="shrink-0"
+                  />
+                  <span class="font-display font-bold text-sm tracking-wide text-text-primary truncate">
                    {{ bot.name }}
                  </span>
                </RouterLink>
@@ -78,8 +78,8 @@ function goFight() {
            v-model="form.name"
            type="text"
            required
-            maxlength="32"
-            placeholder="skull_crusher_9000"
+            maxlength="12"
+            placeholder="skull_crush"
            class="w-full bg-surface border-2 border-border px-4 py-3 text-sm font-mono
                   text-text-primary placeholder-text-muted
                   focus:outline-none focus:border-neon-cyan/50 transition-colors"