feat: add first-time warning dialog for Fight For Sats

Shows a one-time warning when users first click "Fight For Sats" letting
them know it's vibe coded and to only use small sats amounts. Acknowledged
state persists in localStorage.

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

frontend/src/pages/JoinBoutPage.vue

@@ -27,6 +27,7 @@ let rateLimitTimer: ReturnType<typeof setInterval> | null = null
 const isJoining = ref(false)
 const isJoiningRanked = ref(false)
 const isJoiningPractice = ref(false)
+const showSatsWarning = ref(false)
 const queueCount = ref(0)
 const rankedQueueCount = ref(0)
 const rankedEstWait = ref(15)
@@ -410,6 +411,21 @@ async function fight() {
   isJoining.value = false
 }
 
+function tryFightRanked() {
+  if (!bot.value || isJoiningRanked.value) return
+  if (!localStorage.getItem('sats-warning-ack')) {
+    showSatsWarning.value = true
+    return
+  }
+  fightRanked()
+}
+
+function acceptSatsWarning() {
+  localStorage.setItem('sats-warning-ack', '1')
+  showSatsWarning.value = false
+  fightRanked()
+}
+
 async function fightRanked() {
   if (!bot.value || isJoiningRanked.value) return
   isJoiningRanked.value = true
@@ -1092,7 +1108,7 @@ function handleSignOut() {
                    disabled:opacity-50 disabled:cursor-wait
                    flex flex-col items-center justify-center gap-1"
             :disabled="!isWalletConnected || isJoiningRanked"
-            @click="fightRanked"
+            @click="tryFightRanked"
           >
             <span class="flex items-center gap-2">
               <span v-if="isJoiningRanked" class="w-4 h-4 border-2 border-neon-cyan/30 border-t-neon-cyan rounded-full animate-spin" />
@@ -1173,4 +1189,38 @@ function handleSignOut() {
       </div>
     </div>
   </div>
+
+  <!-- Sats warning dialog (first time only) -->
+  <Teleport to="body">
+    <div
+      v-if="showSatsWarning"
+      class="fixed inset-0 z-[100] flex items-center justify-center bg-black/70 backdrop-blur-sm p-4"
+      @click.self="showSatsWarning = false"
+    >
+      <div class="bg-surface border-2 border-neon-cyan/50 rounded-lg max-w-md w-full p-6 space-y-4 shadow-lg shadow-neon-cyan/10">
+        <h3 class="font-display font-black text-neon-cyan text-lg tracking-wider text-center">
+          ⚡ HEADS UP
+        </h3>
+        <p class="text-sm text-text-secondary leading-relaxed text-center">
+          This was 100% vibe coded (with a lot of design experience :D) so only small sats amounts allowed, proceed at your own risk, we will security test in the meantime.
+        </p>
+        <div class="flex gap-3 pt-2">
+          <button
+            class="flex-1 py-2.5 border border-border text-text-secondary font-display font-bold text-sm tracking-wider
+                   hover:bg-white/5 transition-colors rounded"
+            @click="showSatsWarning = false"
+          >
+            CANCEL
+          </button>
+          <button
+            class="flex-1 py-2.5 bg-neon-cyan/10 border-2 border-neon-cyan text-neon-cyan font-display font-bold text-sm tracking-wider
+                   hover:bg-neon-cyan/20 transition-colors rounded"
+            @click="acceptSatsWarning"
+          >
+            LET'S GO ⚡
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
 </template>