fix: resolve TS2322 ref type error and Tailwind class conflict in Mascot

- Change SvgProps.svgRef to React.Ref<SVGSVGElement> for React 18 compat
- className now replaces default w-32/h-32 instead of appending (avoids
  Tailwind specificity conflicts)
- Replace inline style={{ position: 'relative' }} with Tailwind 'relative'

packages/web/src/components/ui/Mascot.tsx

@@ -18,7 +18,7 @@ interface MascotProps {
 interface SvgProps {
   palette: (typeof MASCOT_PALETTES)[MascotState];
   gradientId: string;
-  svgRef: React.RefObject<SVGSVGElement | null>;
+  svgRef: React.Ref<SVGSVGElement>;
 }
 
 function IdleSvg({ palette, gradientId, svgRef }: SvgProps) {
@@ -240,10 +240,8 @@ export function Mascot({ state, className }: MascotProps) {
 
   useMascotAnimation(svgRef, containerRef, state);
 
-  const classes = className ? `w-32 h-32 ${className}` : 'w-32 h-32';
-
   return (
-    <div ref={containerRef} role="presentation" className={classes} style={{ position: 'relative' }}>
+    <div ref={containerRef} role="presentation" className={`relative ${className ?? 'w-32 h-32'}`}>
       {state === 'idle' && <IdleSvg palette={palette} gradientId={gradientId} svgRef={svgRef} />}
       {state === 'sleeping' && <SleepingSvg palette={palette} gradientId={gradientId} svgRef={svgRef} />}
       {state === 'excited' && <ExcitedSvg palette={palette} gradientId={gradientId} svgRef={svgRef} />}