Drill Studio UI refinements and background analysis during play

- Add collapsible category headers (Open Games, Semi-Open, etc.) with
  auto-expand when searching
- Lighten small text for readability, fix uppercase PGN in category labels
- Rename opponents to "Maia-3 1500" format with 600-2600 range
- Fix Start Drilling button visibility with proper flex layout
- Fix Vercel build errors (GameBoard check prop, <piece> JSX element)
- Match drill Stockfish analysis to main analysis (depth 18, staged
  search with Maia candidate moves)
- Run Maia + Stockfish analysis in background during drill play so
  post-drill results are available immediately

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

Author: ashtonanderson

src/components/Board/GameBoard.tsx

@@ -142,7 +142,9 @@ export const GameBoard: React.FC<Props> = ({
       fen,
       lastMove,
       check: currentNode.check
-        ? (currentNode.turn === 'w' ? 'white' : 'black')
+        ? currentNode.turn === 'w'
+          ? 'white'
+          : 'black'
         : false,
       orientation: orientation as 'white' | 'black',
     }
@@ -172,7 +174,7 @@ export const GameBoard: React.FC<Props> = ({
           },
           fen: boardConfig.fen,
           lastMove: boardConfig.lastMove as Key[],
-          check: boardConfig.check,
+          check: boardConfig.check as boolean | 'white' | 'black' | undefined,
           orientation: boardConfig.orientation,
         }}
       />

src/components/Board/GameClock.tsx

@@ -59,9 +59,7 @@ export const GameClock: React.FC<Props> = (
   const showTenths = minutes < 1 && seconds <= 20
 
   return (
-    <div
-      className="flex flex-row items-center justify-between bg-glass-strong md:flex-col md:items-start md:justify-start"
-    >
+    <div className="flex flex-row items-center justify-between bg-glass-strong md:flex-col md:items-start md:justify-start">
       <div className="flex w-full items-center justify-between gap-3 px-4 py-2">
         <span
           className={`flex items-center gap-2 transition-colors ${
@@ -96,9 +94,7 @@ export const GameClock: React.FC<Props> = (
       </div>
       <div
         className={`inline-flex self-start px-4 py-2 transition-all duration-200 md:text-3xl ${
-          active
-            ? 'font-semibold text-primary'
-            : 'text-white/55'
+          active ? 'font-semibold text-primary' : 'text-white/55'
         }`}
       >
         {minutes}:{('00' + seconds).slice(-2)}

src/components/Common/MaterialBalance.tsx

@@ -2,6 +2,18 @@ import { useMemo } from 'react'
 import type { Color } from 'src/types'
 import { Chess } from 'chess.ts'
 
+declare module 'react' {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      piece: React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      >
+    }
+  }
+}
+
 type PieceType = 'p' | 'n' | 'b' | 'r' | 'q' | 'k'
 type MaterialCount = Record<PieceType, number>
 
@@ -170,8 +182,7 @@ export const MaterialBalance = ({
 
   const capturedPieceColor = color === 'white' ? 'black' : 'white'
   const capturedPieceFilter =
-    pieceFilter ??
-    capturedPieceColor === 'black'
+    (pieceFilter ?? capturedPieceColor === 'black')
       ? 'drop-shadow(0 0 0.8px rgba(255,255,255,0.82)) drop-shadow(0 0 1.5px rgba(255,255,255,0.28))'
       : 'drop-shadow(0 0 0.8px rgba(0,0,0,0.82)) drop-shadow(0 0 1.5px rgba(0,0,0,0.22))'