feat: add WTF explainer modal on home page

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

frontend/src/pages/HomePage.vue

@@ -4,6 +4,7 @@ import { RouterLink } from 'vue-router'
 import PixelGlove from '../components/PixelGlove.vue'
 import SpritePreview from '../components/SpritePreview.vue'
 import HumanPreview from '../components/HumanPreview.vue'
+import WTFModal from '../components/WTFModal.vue'
 
 interface FightResult {
   id: string
@@ -231,6 +232,7 @@ const taglines = [
 
 const tagline = ref('')
 const isTypingDone = ref(false)
+const showWTF = ref(false)
 const recentFights = ref<FightResult[]>([])
 
 function shuffle<T>(arr: T[]): T[] {
@@ -456,7 +458,7 @@ onUnmounted(() => {
       </div>
 
       <!-- CTAs — always side by side -->
-      <div class="flex items-center justify-center gap-3 sm:gap-5 mb-8 sm:mb-10">
+      <div class="flex items-center justify-center gap-3 sm:gap-5 mb-3 sm:mb-4">
         <RouterLink
           to="/join"
           class="flex-1 sm:flex-none sm:px-10 py-3 sm:py-4 bg-neon-pink/10 border-2 border-neon-pink text-neon-pink
@@ -475,6 +477,19 @@ onUnmounted(() => {
         </RouterLink>
       </div>
 
+      <!-- WTF button -->
+      <div class="flex justify-center mb-8 sm:mb-10">
+        <button
+          class="px-8 sm:px-14 py-2.5 sm:py-3 border-2 border-neon-purple/50 text-neon-purple
+                 font-display font-black text-xs sm:text-sm tracking-[0.3em] text-center
+                 hover:border-neon-purple hover:bg-neon-purple/10 transition-all
+                 wtf-glow"
+          @click="showWTF = true"
+        >
+          WTF?
+        </button>
+      </div>
+
       <!-- Recent fights -->
       <div v-if="recentFights.length > 0">
         <p class="font-pixel text-text-muted text-xs uppercase tracking-[0.3em] mb-3">
@@ -508,6 +523,9 @@ onUnmounted(() => {
         </p>
       </div>
     </div>
+
+    <!-- WTF Modal -->
+    <WTFModal v-if="showWTF" @close="showWTF = false" />
   </div>
 </template>
 
@@ -557,4 +575,13 @@ onUnmounted(() => {
   0%, 100% { opacity: 0.6; transform: scale(1); }
   50% { opacity: 1; transform: scale(1.1); }
 }
+
+.wtf-glow {
+  animation: wtfPulse 2s ease-in-out infinite;
+}
+
+@keyframes wtfPulse {
+  0%, 100% { box-shadow: 0 0 8px rgba(168, 85, 247, 0.2); }
+  50% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.4), 0 0 40px rgba(168, 85, 247, 0.15); }
+}
 </style>