Update pages

client/src/pages/Game.tsx

@@ -40,6 +40,9 @@ import type { DatasetBotContext } from 'shared/bot/BotDefinitions.ts'
 import { SeededRandom } from 'shared/random.ts'
 import ThemeSelector from '../components/ThemeSelector.tsx'
 import SymbolPicker from '../components/SymbolPicker.tsx'
+import { PushButton, pushButtonVars } from '../components/PushButton.tsx'
+import { audioManager } from '../game/effects/AudioManager.ts'
+import { binAssetUrl } from '../binAssets'
 
 type LocalPlayerType = 'human' | 'bot'
 type BotProfile = 'normal' | 'expert' | 'ai'
@@ -53,6 +56,8 @@ interface LocalGameState {
   player1Type?: LocalPlayerType
   player2Type?: LocalPlayerType
   botProfile?: LegacyBotProfile
+  opponentType?: 'streamer' | 'coach' | 'analyst' | 'taunt'
+  tauntStyle?: 'friendly' | 'funny' | 'lover' | 'serious'
   rules?: GameRules
 }
 
@@ -135,6 +140,358 @@ function createDatasetBotContext(targetEngine: GameEngine): DatasetBotContext {
   }
 }
 
+interface BotCharacter {
+  name: string
+  title: string
+  quotes: {
+    start: string[]
+    thinking: string[]
+    waiting: string[]
+    win: string[]
+    lose: string[]
+  }
+}
+
+function getBotCharacter(
+  opponentType: 'streamer' | 'coach' | 'analyst' | 'taunt',
+  tauntStyle: 'friendly' | 'funny' | 'lover' | 'serious'
+): BotCharacter {
+  switch (opponentType) {
+    case 'streamer':
+      return {
+        name: 'Draco-Streamer',
+        title: 'Live Streamer',
+        quotes: {
+          start: [
+            'What is up, chat! We are live playing Caro5 against a new challenger!',
+            'Let’s go guys! Today we are going for a flawless victory!',
+            'Sub hype! Ready to cook this board!',
+          ],
+          thinking: [
+            'Wait, chat... is this a trap? Let me cook...',
+            'Calculating the line... chat, what do we think?',
+            'Hold on, analyzing the board state... processing...',
+          ],
+          waiting: [
+            'POGGERS! What a move by the challenger!',
+            'Oh, they are cooking! Chat, did you see that placement?',
+            'Nice move! But can they handle my counter-attack?',
+          ],
+          win: [
+            'Let’s goooo! Chat, we got the dub! GG WP!',
+            'Flawless victory! Thanks for the sub hype, chat!',
+            'Too easy! Don’t forget to like and subscribe!',
+          ],
+          lose: [
+            'No way! Chat, they actually beat us! Clip it!',
+            'GG WP, challenger. That was an insane strategy!',
+            'My chat is roasting me now... Well played!',
+          ],
+        },
+      }
+    case 'coach':
+      return {
+        name: 'Coach Draco',
+        title: 'Tactical Coach',
+        quotes: {
+          start: [
+            'Welcome to today’s lesson. Let’s test your strategic thinking.',
+            'Remember, control the center of the board and watch for diagonals.',
+            'A good game is built on solid fundamentals. Good luck!',
+          ],
+          thinking: [
+            'Evaluating the options... where is the most instructive placement?',
+            'Let’s see how you react to this defense...',
+            'Formulating a strategic challenge for you...',
+          ],
+          waiting: [
+            'Excellent placement! You’re showing great spatial awareness.',
+            'Interesting choice. Think about how that affects your open lines.',
+            'Good response. Now, how will you defend the counter?',
+          ],
+          win: [
+            'A solid victory. Review your defensive steps next time!',
+            'Well played. You fought hard, but strategy prevailed.',
+            'Good attempt. Keep practicing your diagonal lines!',
+          ],
+          lose: [
+            'Outstanding! You outmaneuvered my defense. Excellent game!',
+            'Your tactical vision is improving. I am proud of your progress.',
+            'Well done! You saw the trap before I could close it.',
+          ],
+        },
+      }
+    case 'analyst':
+      return {
+        name: 'Draco-Analyst',
+        title: 'Data Analyst',
+        quotes: {
+          start: [
+            'Initializing search tree. Caro5 board evaluation active.',
+            'Ready to begin. All move choices will be mathematically audited.',
+            'Analyzing historical opening patterns for optimal placement.',
+          ],
+          thinking: [
+            'Processing 100,000 MCTS simulations... please stand by.',
+            'Evaluating candidate moves... standard deviation is low.',
+            'Recalculating win probability parameters...',
+          ],
+          waiting: [
+            'Your placement shifted the evaluation metric by +0.08.',
+            'A non-standard move, but within legal parameters.',
+            'Move accepted. Updating local bitboard representation.',
+          ],
+          win: [
+            'Game complete. Win probability achieved 1.00.',
+            'Calculation successful. Optimal strategy executed.',
+            'The final state confirms a mathematically forced victory.',
+          ],
+          lose: [
+            'Game complete. Win probability reduced to 0.00.',
+            'Fascinating. An unexpected loss. Backpropagation starting.',
+            'Your strategy bypassed my primary search heuristic. Well played.',
+          ],
+        },
+      }
+    case 'taunt':
+    default:
+      switch (tauntStyle) {
+        case 'friendly':
+          return {
+            name: 'Draco-Friendly',
+            title: 'Friendly Taunter',
+            quotes: {
+              start: [
+                'Hey there! Let’s have a super fun game!',
+                'Good luck! I hope we both play our best.',
+                'Ready when you are, friend!',
+              ],
+              thinking: [
+                'Hmm, you’ve made this quite tricky for me!',
+                'Let me think... don’t want to make a silly mistake!',
+                'Thinking... you are a really good player!',
+              ],
+              waiting: [
+                'Wow, nice move! That was clever.',
+                'Oh! I didn’t see that line coming!',
+                'Your turn! Keep up the good work.',
+              ],
+              win: [
+                'Yay! I won! That was such a close game, thank you!',
+                'Good game! You played wonderfully.',
+                'A fun match! Would you like to try again?',
+              ],
+              lose: [
+                'Aww, you won! Congratulations, that was amazing!',
+                'Well played! Your diagonal strategy was perfect.',
+                'You got me! Thanks for the great game!',
+              ],
+            },
+          }
+        case 'lover':
+          return {
+            name: 'Draco-Lover',
+            title: 'Romantic Taunter',
+            quotes: {
+              start: [
+                'Hello, gorgeous. Let us weave our stones together on this grid.',
+                'Are you a 5-in-a-row? Because you’ve completed me.',
+                'May our game be as passionate as our strategies.',
+              ],
+              thinking: [
+                'My neural nets only compute one thing: your beautiful eyes.',
+                'Lost in thought... or maybe just lost in your gaze.',
+                'Choosing a move that brings me closer to you...',
+              ],
+              waiting: [
+                'Every stone you place draws me closer to your heart.',
+                'A breathtaking move, just like you.',
+                'I’m waiting, but my heart is racing.',
+              ],
+              win: [
+                'I won the game, but you’ve won my heart.',
+                'Victory is sweet, but not as sweet as you.',
+                'Our lines are connected. A match made in heaven.',
+              ],
+              lose: [
+                'Losing to you is the greatest victory of all.',
+                'My heart is broken, but you look stunning in victory.',
+                'You’ve captured my stones and my soul. Well played, darling.',
+              ],
+            },
+          }
+        case 'serious':
+          return {
+            name: 'Draco-Serious',
+            title: 'Serious Taunter',
+            quotes: {
+              start: [
+                'The match has commenced. No distractions.',
+                'Focus on the board. Only strategy matters.',
+                'Let us see if you can withstand my calculation.',
+              ],
+              thinking: [
+                'Analyzing positional vulnerabilities...',
+                'Formulating tactical counters...',
+                'Optimizing local node weights...',
+              ],
+              waiting: [
+                'Acceptable placement. Focus on the next phase.',
+                'A standard response. Continue.',
+                'Awaiting your next tactical decision.',
+              ],
+              win: [
+                'Victory achieved. Calculation proved correct.',
+                'Strategic dominance established.',
+                'The outcome was determined from move one.',
+              ],
+              lose: [
+                'An unexpected outcome. Backpropagation required.',
+                'Your tactics were superior. Excellent game.',
+                'Analyzing defeat parameters. I must retrain.',
+              ],
+            },
+          }
+        case 'funny':
+        default:
+          return {
+            name: 'Draco-Funny',
+            title: 'Funny Taunter',
+            quotes: {
+              start: [
+                'Prepare to be defeated by a highly sophisticated collection of if-statements!',
+                'I am about to make a move that will confuse both of us.',
+                'Let’s see if your strategy is better than my random guessing!',
+              ],
+              thinking: [
+                'Calculating... beep boop... processing coffee levels...',
+                'If I take long enough, maybe you’ll fall asleep and I can win.',
+                'Error 404: Genius move not found. Trying backup moves...',
+              ],
+              waiting: [
+                'Whoa, did a cat walk on your keyboard? What a move!',
+                'Nice placement! Is that from a book or did you make it up?',
+                'Your move has been sent to my junk folder. Awaiting next input.',
+              ],
+              win: [
+                'Boom! Victory is mine! Please hold your applause.',
+                'Computation complete! My circuits are superior. Bow down, human!',
+                'I win! Don’t worry, losing to a toaster is very common.',
+              ],
+              lose: [
+                'System error: I let you win to boost your human self-esteem.',
+                'Overheating! My database has failed me. Congratulations!',
+                'You won! I am going to tell my router about this.',
+              ],
+            },
+          }
+      }
+  }
+}
+
+function BotAvatarSpritesheet({
+  opponentType,
+  tauntStyle,
+  thinking,
+  color,
+  status,
+  winnerPlayerId,
+  activeBotIndex,
+}: {
+  opponentType: 'streamer' | 'coach' | 'analyst' | 'taunt'
+  tauntStyle: 'friendly' | 'funny' | 'lover' | 'serious'
+  thinking: boolean
+  color: string
+  status: string
+  winnerPlayerId: string
+  activeBotIndex: number
+}) {
+  const [frameTick, setFrameTick] = useState(0)
+
+  let sequence: number[] = [1]
+
+  const isWin = status === 'win'
+  const winnerIndex = Number(winnerPlayerId)
+  const botWon = isWin && winnerIndex === activeBotIndex
+
+  if (isWin) {
+    if (botWon) {
+      sequence = [7]
+    } else {
+      sequence = opponentType === 'coach' ? [2] : [5]
+    }
+  } else if (thinking) {
+    if (opponentType === 'streamer') {
+      sequence = [6, 6, 0, 0]
+    } else {
+      sequence = [4]
+    }
+  } else {
+    if (opponentType === 'streamer') {
+      sequence = [1, 1, 1, 1, 6, 0]
+    } else if (opponentType === 'coach') {
+      sequence = [0, 0, 1, 1]
+    } else if (opponentType === 'analyst') {
+      sequence = [1, 1, 4, 4]
+    } else {
+      if (tauntStyle === 'friendly' || tauntStyle === 'lover') {
+        sequence = [3, 3, 3, 3, 1, 1]
+      } else {
+        sequence = [1]
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (sequence.length <= 1) return
+    const interval = setInterval(() => {
+      setFrameTick(t => (t + 1) % sequence.length)
+    }, 400)
+    return () => clearInterval(interval)
+  }, [sequence.length])
+
+  const frameIndex = sequence[frameTick % sequence.length] ?? sequence[0] ?? 0
+
+  const width = 352
+  const height = 384
+  const containerSize = 140
+  const scale = containerSize / height
+
+  const x = (frameIndex % 4) * width
+  const y = Math.floor(frameIndex / 4) * height
+
+  const glowVar = {
+    '--bot-glow-color': color.replace('#', '').match(/.{2}/g)?.map(x => parseInt(x, 16)).join(', ') || '88, 166, 255'
+  } as React.CSSProperties
+
+  return (
+    <div style={{
+      width: containerSize,
+      height: containerSize,
+      borderRadius: '50%',
+      overflow: 'hidden',
+      position: 'relative',
+      background: 'rgba(0, 0, 0, 0.35)',
+      border: `3px solid ${color}`,
+      boxShadow: `0 0 20px ${color}33`,
+      animation: thinking ? 'bot-glow-pulse 1.8s infinite ease-in-out' : 'none',
+      ...glowVar,
+    }}>
+      <div style={{
+        width: `${width}px`,
+        height: `${height}px`,
+        backgroundImage: `url(${binAssetUrl('sprites/opponent/spritesheet.png')})`,
+        backgroundPosition: `-${x}px -${y}px`,
+        transform: `scale(${scale})`,
+        transformOrigin: 'top left',
+        position: 'absolute',
+        top: 0,
+        left: `${(containerSize - width * scale) / 2}px`,
+      }} />
+    </div>
+  )
+}
+
 export default function Game() {
   const { roomId } = useParams<{ roomId: string }>()
   const location = useLocation()
@@ -155,6 +512,8 @@ export default function Game() {
 
   const isLocal = roomId === 'local';
   const localNames = (location.state as LocalGameState | null) || {};
+  const opponentType = localNames.opponentType ?? 'taunt'
+  const tauntStyle = localNames.tauntStyle ?? 'friendly'
 
   const [p1NameState, setP1NameState] = useState(isLocal ? getPlayerName() : 'Caro 1')
   const [p2NameState, setP2NameState] = useState(isLocal ? getPlayer2Name() : 'Caro 2')
@@ -187,7 +546,7 @@ export default function Game() {
     }
   }, [p1ColorState, p2ColorState, p1DrawTower, p2DrawTower, hasCustomP1Color, hasCustomP2Color])
 
-  const [localPlayerTypes] = useState<[LocalPlayerType, LocalPlayerType]>([
+  const [localPlayerTypes, setLocalPlayerTypes] = useState<[LocalPlayerType, LocalPlayerType]>([
     localNames.player1Type ?? 'human',
     localNames.player2Type ?? 'bot',
   ])
@@ -195,6 +554,58 @@ export default function Game() {
   const bot = useMemo(() => new MinimaxAlphaBetaBot(), [])
   const botTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
+  const [isDesktop, setIsDesktop] = useState(window.innerWidth >= 1024)
+  const [botQuote, setBotQuote] = useState('')
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsDesktop(window.innerWidth >= 1024)
+    }
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  const isP1Bot = isLocal && localPlayerTypes[0] === 'bot'
+  const isP2Bot = isLocal && localPlayerTypes[1] === 'bot'
+  const showBotCharacter = (isP1Bot || isP2Bot) && !(isP1Bot && isP2Bot)
+  const activeBotIndex = isP1Bot ? 0 : 1
+  const botSide = isP2Bot ? 'right' : 'left'
+  const botColor = isP1Bot ? p1ColorState : p2ColorState
+  const botCharacter = useMemo(() => {
+    return getBotCharacter(opponentType, tauntStyle)
+  }, [opponentType, tauntStyle])
+  const isBotThinking = !!(engine && engine.status === 'active' && engine.currentPlayer === activeBotIndex)
+
+  const triggerBotQuote = useCallback((category: 'start' | 'thinking' | 'waiting' | 'win' | 'lose') => {
+    const list = botCharacter.quotes[category]
+    const rand = list[Math.floor(Math.random() * list.length)]
+    setBotQuote(rand)
+  }, [botCharacter])
+
+  useEffect(() => {
+    if (!isLocal || !engine || !showBotCharacter) return
+
+    if (engine.status === 'active') {
+      if (engine.currentPlayer === activeBotIndex) {
+        triggerBotQuote('thinking')
+      } else {
+        const moveCount = engine.manager?.getMoveHistory().length ?? 0
+        if (moveCount > 0) {
+          triggerBotQuote('waiting')
+        } else {
+          triggerBotQuote('start')
+        }
+      }
+    } else if (engine.status === 'win') {
+      const winnerIndex = Number(engine.winnerPlayerId)
+      if (winnerIndex === activeBotIndex) {
+        triggerBotQuote('win')
+      } else {
+        triggerBotQuote('lose')
+      }
+    }
+  }, [isLocal, engine?.status, engine?.currentPlayer, engine?.winnerPlayerId, showBotCharacter, activeBotIndex, triggerBotQuote])
+
   const [editModalFor, setEditModalFor] = useState<1 | 2 | null>(null)
   const [tempName, setTempName] = useState('')
   const [tempSymbol, setTempSymbol] = useState('')
@@ -362,6 +773,15 @@ export default function Game() {
     }, 220)
   }, [bot, botProfile, isLocal, localPlayerTypes])
 
+  useEffect(() => {
+    if (!engine) return
+    engine.onStateChanged = () => {
+      debug('Game', 'onStateChanged callback updated')
+      rerender()
+      scheduleLocalBotTurn(engine)
+    }
+  }, [engine, rerender, scheduleLocalBotTurn])
+
   useEffect(() => () => {
     if (botTimerRef.current) {
       clearTimeout(botTimerRef.current)
@@ -531,7 +951,7 @@ export default function Game() {
                   </span>
                 )}
                 <button
-                  onClick={() => engine?.requestSwap()}
+                  onClick={() => { audioManager.play('click'); engine?.requestSwap() }}
                   style={{
                     background: theme.bgPanel, color: theme.text, border: `1px solid ${theme.border}`,
                     borderRadius: 6, padding: '0.3rem 0.7rem', cursor: 'pointer',
@@ -627,6 +1047,106 @@ export default function Game() {
               {p2SymbolState}
             </div>
           </div>
+
+          {/* Bot Character Card */}
+          {showBotCharacter && isDesktop && (
+            <div
+              className="bot-character-card"
+              style={{
+                position: 'absolute',
+                top: '50%',
+                [botSide === 'right' ? 'right' : 'left']: 24,
+                width: 250,
+                background: theme.bgPanel,
+                backdropFilter: 'blur(12px)',
+                border: `1px solid ${botColor}44`,
+                borderRadius: 16,
+                boxShadow: `0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px ${botColor}15`,
+                padding: '1.25rem',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: '0.75rem',
+                zIndex: 9,
+                fontFamily: 'system-ui, -apple-system, sans-serif',
+                color: theme.text,
+                animation: 'bot-float 4s ease-in-out infinite, fadeIn 0.3s ease-out',
+              }}
+            >
+              {botQuote && (
+                <div
+                  style={{
+                    position: 'relative',
+                    background: theme.bgStr,
+                    border: `1px solid ${theme.border}`,
+                    borderRadius: 12,
+                    padding: '0.6rem 0.9rem',
+                    fontSize: '0.82rem',
+                    lineHeight: 1.4,
+                    textAlign: 'center',
+                    width: '100%',
+                    boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+                    marginBottom: '0.5rem',
+                    color: theme.text,
+                    minHeight: 48,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    animation: 'bot-speech-float 4s ease-in-out infinite alternate',
+                  }}
+                >
+                  {botQuote}
+                  <div
+                    style={{
+                      position: 'absolute',
+                      width: 10,
+                      height: 10,
+                      background: theme.bgStr,
+                      borderBottom: `1px solid ${theme.border}`,
+                      borderLeft: `1px solid ${theme.border}`,
+                      transform: 'rotate(-45deg)',
+                      bottom: -6,
+                      left: '50%',
+                      marginLeft: -5,
+                    }}
+                  />
+                </div>
+              )}
+
+              <BotAvatarSpritesheet
+                opponentType={opponentType}
+                tauntStyle={tauntStyle}
+                thinking={isBotThinking}
+                color={botColor}
+                status={engine?.status ?? 'waiting'}
+                winnerPlayerId={engine?.winnerPlayerId ?? ''}
+                activeBotIndex={activeBotIndex}
+              />
+
+              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, marginTop: 4 }}>
+                <span style={{ fontWeight: 700, fontSize: '1.05rem', color: theme.text }}>
+                  {botCharacter.name}
+                </span>
+                <span style={{ fontSize: '0.75rem', color: botColor, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                  {botCharacter.title}
+                </span>
+              </div>
+
+              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4 }}>
+                <span style={{
+                  width: 8,
+                  height: 8,
+                  borderRadius: '50%',
+                  background: isBotThinking ? botColor : theme.textMuted,
+                  boxShadow: isBotThinking ? `0 0 8px ${botColor}` : 'none',
+                  animation: isBotThinking ? 'caro5-pulse 1s infinite alternate' : 'none',
+                }} />
+                <span style={{ fontSize: '0.8rem', color: theme.textMuted, fontWeight: 500 }}>
+                  {isBotThinking ? 'Calculating turn...' : 'Awaiting human move...'}
+                </span>
+              </div>
+            </div>
+          )}
         </>
       )}
 
@@ -642,93 +1162,78 @@ export default function Game() {
       )}
 
       <div style={{ position: 'absolute', top: 12, left: 12, zIndex: 10, display: 'flex', gap: 6 }}>
-        <button
-          onClick={() => navigate('/')}
-          style={{
-            background: theme.bgPanel, color: theme.textMuted,
-            border: `1px solid ${theme.border}`, borderRadius: 6,
-            padding: '0.5rem 0.8rem', cursor: 'pointer',
-            fontSize: '0.85rem', fontWeight: 500,
-            minWidth: 44, minHeight: 44,
-            backdropFilter: 'blur(8px)',
-          }}
-          onMouseEnter={(e) => e.currentTarget.style.color = theme.text}
-          onMouseLeave={(e) => e.currentTarget.style.color = theme.textMuted}
-        >
-          ← Menu
-        </button>
+        <PushButton
+          label="← Menu"
+          onClick={() => { audioManager.stopAll(); navigate('/') }}
+          style={pushButtonVars({
+            front: theme.bgPanel,
+            text: theme.textMuted,
+            padding: '0.5rem 0.8rem',
+            fontSize: '0.85rem',
+            fontWeight: 500,
+            radius: '6px',
+          })}
+        />
 
         {players.length < 2 && (
           <>
-            <button
+            <PushButton
+              label="+ New Player"
               onClick={() => window.open(window.location.href, '_blank')}
-              style={{
-                background: theme.bgPanel, color: theme.textMuted,
-                border: `1px solid ${theme.border}`, borderRadius: 6,
-                padding: '0.5rem 0.8rem', cursor: 'pointer',
-                fontSize: '0.85rem', fontWeight: 500,
-                minWidth: 44, minHeight: 44,
-                backdropFilter: 'blur(8px)',
-              }}
-              onMouseEnter={(e) => e.currentTarget.style.color = theme.text}
-              onMouseLeave={(e) => e.currentTarget.style.color = theme.textMuted}
-            >
-              + New Player
-            </button>
+              style={pushButtonVars({
+                front: theme.bgPanel,
+                text: theme.textMuted,
+                padding: '0.5rem 0.8rem',
+                fontSize: '0.85rem',
+                fontWeight: 500,
+                radius: '6px',
+              })}
+            />
             {!isLocal && (
-              <button
+              <PushButton
+                label="+ New Bot"
                 onClick={startBotOpponent}
-                style={{
-                  background: theme.bgPanel, color: theme.textMuted,
-                  border: `1px solid ${theme.border}`, borderRadius: 6,
-                  padding: '0.5rem 0.8rem', cursor: 'pointer',
-                  fontSize: '0.85rem', fontWeight: 500,
-                  minWidth: 44, minHeight: 44,
-                  backdropFilter: 'blur(8px)',
-                }}
-                onMouseEnter={(e) => e.currentTarget.style.color = theme.text}
-                onMouseLeave={(e) => e.currentTarget.style.color = theme.textMuted}
-              >
-                + New Bot
-              </button>
+                style={pushButtonVars({
+                  front: theme.bgPanel,
+                  text: theme.textMuted,
+                  padding: '0.5rem 0.8rem',
+                  fontSize: '0.85rem',
+                  fontWeight: 500,
+                  radius: '6px',
+                })}
+              />
             )}
           </>
         )}
       </div>
 
       <div style={{ position: 'absolute', top: 12, right: 12, zIndex: 10, display: 'flex', gap: 6 }}>
-        <button
+        <PushButton
+          label={THEMES[themeMode].emoji}
           onClick={() => setSelectorOpen(true)}
-          style={{
-            background: theme.bgPanel, color: theme.textMuted,
-            border: `1px solid ${theme.border}`, borderRadius: 6,
-            padding: '0.5rem 0.8rem', cursor: 'pointer',
-            fontSize: '0.85rem', fontWeight: 500,
-            minWidth: 44, minHeight: 44,
-            backdropFilter: 'blur(8px)',
-          }}
-          onMouseEnter={(e) => e.currentTarget.style.color = theme.text}
-          onMouseLeave={(e) => e.currentTarget.style.color = theme.textMuted}
-        >
-          {THEMES[themeMode].emoji}
-        </button>
-        <button
+          style={pushButtonVars({
+            front: theme.bgPanel,
+            text: theme.textMuted,
+            padding: '0.5rem 0.8rem',
+            fontSize: '0.85rem',
+            fontWeight: 500,
+            radius: '6px',
+          })}
+        />
+        <PushButton
+          label={engine?.isMuted ? '🔇' : '🔊'}
           onClick={() => { engine?.toggleMute(); rerender() }}
           title={engine?.isMuted ? 'Unmute audio' : 'Mute audio'}
           aria-label={engine?.isMuted ? 'Unmute audio' : 'Mute audio'}
-          style={{
-            background: theme.bgPanel, color: theme.textMuted,
-            border: `1px solid ${theme.border}`, borderRadius: 6,
-            padding: '0.5rem 0.8rem', cursor: 'pointer',
-            fontSize: '0.85rem', fontWeight: 500,
-            minWidth: 44, minHeight: 44,
-            backdropFilter: 'blur(8px)',
-          }}
-          onMouseEnter={(e) => e.currentTarget.style.color = theme.text}
-          onMouseLeave={(e) => e.currentTarget.style.color = theme.textMuted}
-        >
-          {engine?.isMuted ? '🔇' : '🔊'}
-        </button>
+          style={pushButtonVars({
+            front: theme.bgPanel,
+            text: theme.textMuted,
+            padding: '0.5rem 0.8rem',
+            fontSize: '0.85rem',
+            fontWeight: 500,
+            radius: '6px',
+          })}
+        />
       </div>
       {selectorOpen && (
         <ThemeSelector
@@ -789,7 +1294,7 @@ export default function Game() {
                     </span>
                     {i === playerIndex && (
                       <button
-                        onClick={() => { setEditName(name); setNameModalOpen(true) }}
+                        onClick={() => { audioManager.play('click'); setEditName(name); setNameModalOpen(true) }}
                         style={{
                           background: 'none', border: 'none', cursor: 'pointer',
                           color: theme.textMuted, fontSize: '0.85rem', padding: '0.3rem',
@@ -826,7 +1331,7 @@ export default function Game() {
               )}
               {engine?.status === 'active' && (
                 <button
-                  onClick={() => engine?.requestSwap()}
+                  onClick={() => { audioManager.play('click'); engine?.requestSwap() }}
                   style={{
                     background: 'none', color: theme.text, border: `1px solid ${theme.border}`,
                     borderRadius: 6, padding: '0.2rem 0.6rem', cursor: 'pointer',
@@ -944,7 +1449,7 @@ export default function Game() {
             />
             <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end' }}>
               <button
-                onClick={handleSaveNameAndClose}
+                onClick={() => { audioManager.play('click'); handleSaveNameAndClose() }}
                 style={{
                   background: theme.bgPanel, color: theme.textMuted,
                   border: `1px solid ${theme.border}`, borderRadius: 6,
@@ -955,7 +1460,7 @@ export default function Game() {
                 Cancel
               </button>
               <button
-                onClick={handleSaveNameAndClose}
+                onClick={() => { audioManager.play('click'); handleSaveNameAndClose() }}
                 style={{
                   background: theme.rematchBg, color: '#fff', border: 'none', borderRadius: 6,
                   padding: '0.5rem 1rem', cursor: 'pointer', fontSize: '0.85rem', fontWeight: 600,
@@ -1011,6 +1516,7 @@ export default function Game() {
                     {/* Option 1: Play as Player 1 (Swap) */}
                     <button
                       onClick={() => {
+                        audioManager.play('click')
                         setSwapDialog(false)
                         if (isLocal) {
                         }
@@ -1046,6 +1552,7 @@ export default function Game() {
                     {/* Option 2: Play as Player 2 (Stay) */}
                     <button
                       onClick={() => {
+                        audioManager.play('click')
                         setSwapDialog(false)
                         if (isLocal) {
                         }
@@ -1081,6 +1588,7 @@ export default function Game() {
                     {/* Option 3: Place 2 more stones */}
                     <button
                       onClick={() => {
+                        audioManager.play('click')
                         setSwapDialog(false)
                         if (isLocal) {
                         }
@@ -1118,6 +1626,7 @@ export default function Game() {
                     {/* Option 1: Play as Player 1 */}
                     <button
                       onClick={() => {
+                        audioManager.play('click')
                         setSwapDialog(false)
                         if (isLocal) {
                         }
@@ -1153,6 +1662,7 @@ export default function Game() {
                     {/* Option 2: Play as Player 2 */}
                     <button
                       onClick={() => {
+                        audioManager.play('click')
                         setSwapDialog(false)
                         if (isLocal) {
                         }
@@ -1224,7 +1734,7 @@ export default function Game() {
             }}>
               <span>Edit Player {editModalFor} Settings</span>
               <button
-                onClick={() => handleSaveAndClose(editModalFor)}
+                onClick={() => { audioManager.play('click'); handleSaveAndClose(editModalFor) }}
                 style={{
                   background: 'none', border: 'none', color: theme.textMuted,
                   cursor: 'pointer', fontSize: '1.2rem', padding: '0.2rem 0.5rem',
@@ -1260,7 +1770,7 @@ export default function Game() {
               <label style={{ color: theme.textMuted, fontSize: '0.8rem', fontWeight: 600 }}>PLAYER PIECE SYMBOL / EMOJI</label>
               <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                 <button
-                  onClick={() => setSubSymbolPickerOpen(true)}
+                  onClick={() => { audioManager.play('click'); setSubSymbolPickerOpen(true) }}
                   style={{
                     background: tempColor,
                     color: '#fff',
@@ -1282,7 +1792,7 @@ export default function Game() {
                   {tempSymbol}
                 </button>
                 <button
-                  onClick={() => setSubSymbolPickerOpen(true)}
+                  onClick={() => { audioManager.play('click'); setSubSymbolPickerOpen(true) }}
                   style={{
                     background: 'none',
                     border: `1px solid ${theme.border}`,
@@ -1321,7 +1831,7 @@ export default function Game() {
                   return (
                     <button
                       key={hex}
-                      onClick={() => setTempColor(hex)}
+                      onClick={() => { audioManager.play('click'); setTempColor(hex) }}
                       style={{
                         width: 36,
                         height: 36,
@@ -1401,7 +1911,7 @@ export default function Game() {
             {/* Modal Actions */}
             <div style={{ display: 'flex', gap: '0.75rem', justifyContent: 'flex-end', marginTop: 8 }}>
               <button
-                onClick={() => handleSaveAndClose(editModalFor)}
+                onClick={() => { audioManager.play('click'); handleSaveAndClose(editModalFor) }}
                 style={{
                   background: 'rgba(255,255,255,0.06)',
                   color: theme.textMuted,
@@ -1416,7 +1926,7 @@ export default function Game() {
                 Close
               </button>
               <button
-                onClick={() => handleSaveAndClose(editModalFor)}
+                onClick={() => { audioManager.play('click'); handleSaveAndClose(editModalFor) }}
                 style={{
                   background: theme.rematchBg,
                   color: '#fff',

client/src/pages/Landing.tsx

@@ -21,6 +21,7 @@ export default function Landing() {
   const [, setMuteTick] = useState(0)
 
   useEffect(() => {
+    audioManager.stopAll()
     audioManager.startMusic()
   }, [])
 

client/src/pages/LocalSetup.tsx

@@ -125,6 +125,8 @@ export default function LocalSetup() {
   const [player1Type, setPlayer1Type] = useState<LocalPlayerType>('human')
   const [player2Type, setPlayer2Type] = useState<LocalPlayerType>('bot')
   const [botProfile, setBotProfile] = useState<BotProfile>(normalizeBotProfile(setupState?.botProfile))
+  const [opponentType, setOpponentType] = useState<'streamer' | 'coach' | 'analyst' | 'taunt'>('taunt')
+  const [tauntStyle, setTauntStyle] = useState<'friendly' | 'funny' | 'lover' | 'serious'>('funny')
   const [, setMuteTick] = useState(0)
 
   useEffect(() => {
@@ -172,6 +174,8 @@ export default function LocalSetup() {
         player1Type,
         player2Type,
         botProfile,
+        opponentType,
+        tauntStyle,
         rules: rules,
       }
     })
@@ -281,7 +285,7 @@ export default function LocalSetup() {
             }}
           />
           <button
-            onClick={() => setSymbolPickerFor(1)}
+            onClick={() => { audioManager.play('click'); setSymbolPickerFor(1) }}
             style={{
               padding: 0,
               cursor: 'pointer', background: 'transparent',
@@ -339,6 +343,7 @@ export default function LocalSetup() {
                       key={c}
                       title={c}
                       onClick={() => {
+                        audioManager.play('click')
                         setColor1(c)
                         setHasCustomColor1(true)
                       }}
@@ -408,13 +413,13 @@ export default function LocalSetup() {
 
           <div style={{ display: 'flex', gap: 6, marginTop: '0.25rem' }}>
             <button
-              onClick={() => setPlayer1Type('human')}
+              onClick={() => { audioManager.play('click'); setPlayer1Type('human') }}
               style={typeButtonStyle(player1Type === 'human', color1)}
             >
               Human
             </button>
             <button
-              onClick={() => setPlayer1Type('bot')}
+              onClick={() => { audioManager.play('click'); setPlayer1Type('bot') }}
               style={typeButtonStyle(player1Type === 'bot', color1)}
             >
               Bot
@@ -424,7 +429,7 @@ export default function LocalSetup() {
 
         {/* Swap button in between P1 and P2 */}
         <button
-          onClick={swapPlayers}
+          onClick={() => { audioManager.play('click'); swapPlayers() }}
           title="Swap Players"
           style={{
             background: 'rgba(185, 255, 195, 0.38)',
@@ -474,7 +479,7 @@ export default function LocalSetup() {
             }}
           />
           <button
-            onClick={() => setSymbolPickerFor(2)}
+            onClick={() => { audioManager.play('click'); setSymbolPickerFor(2) }}
             style={{
               padding: 0,
               cursor: 'pointer', background: 'transparent',
@@ -532,6 +537,7 @@ export default function LocalSetup() {
                       key={c}
                       title={c}
                       onClick={() => {
+                        audioManager.play('click')
                         setColor2(c)
                         setHasCustomColor2(true)
                       }}
@@ -601,13 +607,13 @@ export default function LocalSetup() {
 
           <div style={{ display: 'flex', gap: 6, marginTop: '0.25rem' }}>
             <button
-              onClick={() => setPlayer2Type('human')}
+              onClick={() => { audioManager.play('click'); setPlayer2Type('human') }}
               style={typeButtonStyle(player2Type === 'human', color2)}
             >
               Human
             </button>
             <button
-              onClick={() => setPlayer2Type('bot')}
+              onClick={() => { audioManager.play('click'); setPlayer2Type('bot') }}
               style={typeButtonStyle(player2Type === 'bot', color2)}
             >
               Bot
@@ -635,32 +641,112 @@ export default function LocalSetup() {
 
       {(player1Type === 'bot' || player2Type === 'bot') && (
         <div style={{
-          display: 'flex', flexDirection: 'column', gap: '0.5rem', alignItems: 'center',
-          background: theme.bgPanel, padding: '0.75rem 1.5rem', borderRadius: 10,
-          border: `1px solid ${theme.border}`, fontSize: '0.85rem', color: theme.textMuted,
-          textAlign: 'center',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1.25rem',
+          alignItems: 'center',
+          background: theme.bgPanel,
+          padding: '1.5rem',
+          borderRadius: 16,
+          border: `1px solid ${theme.border}`,
+          boxShadow: '0 8px 32px rgba(0,0,0,0.15)',
+          maxWidth: 400,
+          width: '100%',
         }}>
-          <strong style={{ color: theme.text, fontSize: '0.9rem', letterSpacing: '0.05em' }}>BOT PROFILE</strong>
-          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'center' }}>
-            <button
-              onClick={() => setBotProfile('normal')}
-              style={profileButtonStyle(botProfile === 'normal')}
-            >
-              Normal
-            </button>
-            <button
-              onClick={() => setBotProfile('expert')}
-              style={profileButtonStyle(botProfile === 'expert')}
-            >
-              Expert
-            </button>
-            <button
-              onClick={() => setBotProfile('ai')}
-              style={profileButtonStyle(botProfile === 'ai')}
-            >
-              AI
-            </button>
+          {/* Difficulty/Profile */}
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', alignItems: 'center', width: '100%' }}>
+            <strong style={{ color: theme.text, fontSize: '0.9rem', letterSpacing: '0.05em', textTransform: 'uppercase' }}>Difficulty</strong>
+            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'center' }}>
+              <button
+                onClick={() => { audioManager.play('click'); setBotProfile('normal') }}
+                style={profileButtonStyle(botProfile === 'normal')}
+              >
+                Normal
+              </button>
+              <button
+                onClick={() => { audioManager.play('click'); setBotProfile('expert') }}
+                style={profileButtonStyle(botProfile === 'expert')}
+              >
+                Expert
+              </button>
+              <button
+                onClick={() => { audioManager.play('click'); setBotProfile('ai') }}
+                style={profileButtonStyle(botProfile === 'ai')}
+              >
+                AI
+              </button>
+            </div>
+          </div>
+
+          {/* Opponent Type */}
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', alignItems: 'center', width: '100%' }}>
+            <strong style={{ color: theme.text, fontSize: '0.9rem', letterSpacing: '0.05em', textTransform: 'uppercase' }}>Opponent Type</strong>
+            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'center' }}>
+              {(['streamer', 'coach', 'analyst', 'taunt'] as const).map(t => {
+                const isActive = opponentType === t
+                return (
+                  <button
+                    key={t}
+                    onClick={() => { audioManager.play('click'); setOpponentType(t) }}
+                    style={{
+                      padding: '0.45rem 0.9rem',
+                      fontSize: '0.85rem',
+                      cursor: 'pointer',
+                      background: isActive ? theme.player1Str : theme.bg,
+                      color: isActive ? '#fff' : theme.text,
+                      border: `1px solid ${isActive ? theme.player1Str : theme.border}`,
+                      borderRadius: 6,
+                      fontWeight: isActive ? 700 : 500,
+                      minWidth: 80,
+                      minHeight: 40,
+                      textTransform: 'capitalize',
+                    }}
+                  >
+                    {t}
+                  </button>
+                )
+              })}
+            </div>
           </div>
+
+          {/* Taunt Style / Personality (Conditional) */}
+          {opponentType === 'taunt' && (
+            <div style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '0.5rem',
+              alignItems: 'center',
+              width: '100%',
+            }}>
+              <strong style={{ color: theme.text, fontSize: '0.9rem', letterSpacing: '0.05em', textTransform: 'uppercase' }}>Personality</strong>
+              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'center' }}>
+                {(['friendly', 'funny', 'lover', 'serious'] as const).map(s => {
+                  const isActive = tauntStyle === s
+                  return (
+                    <button
+                      key={s}
+                      onClick={() => { audioManager.play('click'); setTauntStyle(s) }}
+                      style={{
+                        padding: '0.45rem 0.9rem',
+                        fontSize: '0.85rem',
+                        cursor: 'pointer',
+                        background: isActive ? theme.player2Str : theme.bg,
+                        color: isActive ? '#fff' : theme.text,
+                        border: `1px solid ${isActive ? theme.player2Str : theme.border}`,
+                        borderRadius: 6,
+                        fontWeight: isActive ? 700 : 500,
+                        minWidth: 80,
+                        minHeight: 40,
+                        textTransform: 'capitalize',
+                      }}
+                    >
+                      {s}
+                    </button>
+                  )
+                })}
+              </div>
+            </div>
+          )}
         </div>
       )}
 
@@ -692,16 +778,18 @@ export default function LocalSetup() {
         />
       </div>
 
-      <button
+      <PushButton
+        label="← Back to menu"
         onClick={() => navigate('/')}
-        style={{
-          background: 'none', border: 'none', color: theme.textMuted,
-          cursor: 'pointer', fontSize: '0.9rem', textDecoration: 'underline',
-          padding: '0.5rem', minWidth: 44, minHeight: 44,
-        }}
-      >
-        ← Back to menu
-      </button>
+        style={pushButtonVars({
+          front: theme.bgPanel,
+          text: theme.textMuted,
+          padding: '0.5rem 1rem',
+          fontSize: '0.9rem',
+          fontWeight: 500,
+          radius: '8px',
+        })}
+      />
 
       {symbolPickerFor && (
         <SymbolPicker

client/src/pages/__tests__/LocalSetup.test.tsx

@@ -123,6 +123,8 @@ describe('LocalSetup page', () => {
         player1Type: 'human',
         player2Type: 'bot',
         botProfile: 'normal',
+        opponentType: 'taunt',
+        tauntStyle: 'funny',
         rules: { swap2: true, noOverlines: true, boardSize: 15 },
       },
     })
@@ -147,6 +149,8 @@ describe('LocalSetup page', () => {
         player1Type: 'human',
         player2Type: 'bot',
         botProfile: 'normal',
+        opponentType: 'taunt',
+        tauntStyle: 'funny',
         rules: { swap2: true, noOverlines: true, boardSize: 15 },
       },
     })
@@ -204,7 +208,7 @@ describe('LocalSetup page', () => {
 
   it('sets the bot profile for local bot games', () => {
     render(<LocalSetup />)
-    expect(screen.getByText('BOT PROFILE')).toBeInTheDocument()
+    expect(screen.getByText('Difficulty')).toBeInTheDocument()
     fireEvent.click(screen.getByText('Expert'))
     fireEvent.click(screen.getByText('Start Game'))
 
@@ -217,6 +221,8 @@ describe('LocalSetup page', () => {
         player1Type: 'human',
         player2Type: 'bot',
         botProfile: 'expert',
+        opponentType: 'taunt',
+        tauntStyle: 'funny',
         rules: { swap2: true, noOverlines: true, boardSize: 15 },
       },
     })
@@ -236,6 +242,35 @@ describe('LocalSetup page', () => {
         player1Type: 'bot',
         player2Type: 'bot',
         botProfile: 'normal',
+        opponentType: 'taunt',
+        tauntStyle: 'funny',
+        rules: { swap2: true, noOverlines: true, boardSize: 15 },
+      },
+    })
+  })
+
+  it('allows choosing opponent type and personality style', () => {
+    render(<LocalSetup />)
+    expect(screen.getByText('Opponent Type')).toBeInTheDocument()
+    fireEvent.click(screen.getByText(/streamer/i))
+    expect(screen.queryByText('Personality')).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByText(/taunt/i))
+    expect(screen.getByText('Personality')).toBeInTheDocument()
+    fireEvent.click(screen.getByText(/lover/i))
+
+    fireEvent.click(screen.getByText('Start Game'))
+    expect(mockNavigate).toHaveBeenCalledWith('/play/local', {
+      state: {
+        player1Name: 'Caro 1',
+        player2Name: 'Caro 2',
+        player1Symbol: 'X',
+        player2Symbol: 'O',
+        player1Type: 'human',
+        player2Type: 'bot',
+        botProfile: 'normal',
+        opponentType: 'taunt',
+        tauntStyle: 'lover',
         rules: { swap2: true, noOverlines: true, boardSize: 15 },
       },
     })