feat: v2 — queue matchmaking, procedural audio, sprite archetypes, auth

- Add queue-based matchmaking with Elo-proximity and 10s timeout
- Procedural sound engine (SFX, voice announcer, 4-track music)
- Sprite system refactored into 6 archetypes (standard, lobster, sheep, cyborg, blob, tank)
- 42+ fight choreographies with themed/generic/wild card selection
- 4 KO finish styles, super-speed mode, hyperdetail close-ups
- Auth routes, JoinBout page, bot profile with stats
- 7-tier ranking system (Baby through Legend)
- Arena and challenge system expansions

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

frontend/src/components/PixelGlove.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  size?: number
+  flip?: boolean
+}>(), {
+  size: 24,
+  flip: false,
+})
+
+// 10x11 pixel boxing glove facing right
+// M=main body, H=highlight, S=shadow, C=cuff
+const grid = [
+  '...MMMM...',
+  '..HMMMMM..',
+  '.HMMMMMM..',
+  'HMMMMMMS..',
+  'MMMMMMMMS.',
+  'MMMMMMMMSS',
+  'MMMMMMMM..',
+  '.MMMMMM...',
+  '..CCCC....',
+  '..CCCC....',
+  '...CC.....',
+]
+
+const colorMap: Record<string, string> = {
+  M: '#ff2d78',
+  H: '#ff6fa0',
+  S: '#cc1155',
+  C: '#64dfff',
+}
+
+const pixels = computed(() => {
+  const result: { x: number; y: number; color: string }[] = []
+  for (let y = 0; y < grid.length; y++) {
+    for (let x = 0; x < grid[y].length; x++) {
+      const ch = grid[y][x]
+      if (ch !== '.' && colorMap[ch]) {
+        result.push({ x, y, color: colorMap[ch] })
+      }
+    }
+  }
+  return result
+})
+
+const cols = grid[0].length
+const rows = grid.length
+</script>
+
+<template>
+  <svg
+    :width="props.size"
+    :height="props.size * (rows / cols)"
+    :viewBox="`0 0 ${cols} ${rows}`"
+    :style="{ transform: props.flip ? 'scaleX(-1)' : undefined }"
+    class="pixel-glove"
+  >
+    <rect
+      v-for="(p, i) in pixels"
+      :key="i"
+      :x="p.x"
+      :y="p.y"
+      width="1"
+      height="1"
+      :fill="p.color"
+    />
+  </svg>
+</template>
+
+<style scoped>
+.pixel-glove {
+  image-rendering: pixelated;
+  filter: drop-shadow(0 0 3px rgba(255, 45, 120, 0.6));
+}
+</style>