Fix holographic card effects by removing Tailwind CSS overrides

- Replace CARD_STATUS_COLORS Tailwind classes with CSS pattern/color effects in CardGrid.tsx
- Add card-effects.css import to CardGrid component
- Remove unused CARD_STATUS_COLORS constant
- Now special status cards display proper holographic effects instead of solid gradients

🤖 Generated with [Claude Code](https://claude.ai/code)

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

src/components/card/CardGrid.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import type { Card, User } from '../../types';
-import { SKILL_ICONS, CARD_STATUS_COLORS } from '../../utils/constants';
+import { SKILL_ICONS } from '../../utils/constants';
+import '../../styles/card-effects.css';
 
 interface CardGridProps {
   cards: Card[];
@@ -87,7 +88,8 @@ export default function CardGrid({ cards }: CardGridProps) {
                       className="w-full rounded-lg"
                     />
                   </div>
-                  <div className={`card-status ${CARD_STATUS_COLORS[card.status]}`}></div>
+                  <div className={`card-status pattern-${card.status}`}></div>
+                  <div className={`card-status color-${card.status}`}></div>
                 </div>
               </div>
             ) : (

src/utils/constants.ts

@@ -1,15 +1,3 @@
-export const CARD_STATUS_COLORS = {
-  yui: 'bg-gradient-to-br from-yellow-400 to-yellow-600',
-  first: 'bg-gradient-to-br from-cyan-400 to-blue-500',
-  second: 'bg-gradient-to-br from-gray-600 to-black',
-  third: 'bg-gradient-to-br from-pink-500 to-yellow-400',
-  fourth: 'bg-gradient-to-br from-blue-400 to-blue-600',
-  fifth: 'bg-gradient-to-br from-red-500 to-red-800',
-  sixth: 'bg-gradient-to-br from-gray-100 to-gray-800',
-  seven: 'bg-gradient-to-br from-yellow-400 to-yellow-700',
-  normal: 'bg-white'
-} as const;
-
 export const SKILL_ICONS = {
   critical: 'icon-sandar',
   post: 'icon-moon',