From 2029720006e762b15c76481a2f04dfbedb56f20c Mon Sep 17 00:00:00 2001
From: syui <syui@syui.ai>
Date: Fri, 18 Jul 2025 14:46:02 +0900
Subject: [PATCH] Fix holographic card effects by removing Tailwind CSS
 overrides
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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 |  6 ++++--
 src/utils/constants.ts           | 12 ------------
 2 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/src/components/card/CardGrid.tsx b/src/components/card/CardGrid.tsx
index ffcda1d..6b087da 100644
--- a/src/components/card/CardGrid.tsx
+++ b/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>
             ) : (
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 2605bcb..5dcbecc 100644
--- a/src/utils/constants.ts
+++ b/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',