From 8aec22cc86e4ba49c39f2dc996b1ea6c2ef10418 Mon Sep 17 00:00:00 2001
From: syui <syui@syui.ai>
Date: Fri, 18 Jul 2025 15:12:31 +0900
Subject: [PATCH] Fix page width overflow issue and remove Favorite Card
 heading
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reduce excessive scale values in animations (scale(50) → scale(3), scale(8) → scale(2.5))
- Add overflow: hidden to card-wrapper to prevent animation overflow
- Remove "Favorite Card" heading from user page
- Fix page width expanding issue caused by large-scale animations

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/pages/UserPage.tsx |  1 -
 src/styles/card-effects.css       | 19 ++++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/pages/UserPage.tsx b/src/components/pages/UserPage.tsx
index d827f43..37af567 100644
--- a/src/components/pages/UserPage.tsx
+++ b/src/components/pages/UserPage.tsx
@@ -63,7 +63,6 @@ export default function UserPage() {
                 if (favCard) {
                   return (
                     <div className="mb-8">
-                      <h2 className="text-xl font-bold mb-4 text-center">Favorite Card</h2>
                       <div className="flex justify-center">
                         <SpecialCard card={favCard} />
                       </div>
diff --git a/src/styles/card-effects.css b/src/styles/card-effects.css
index b7ed208..20335b5 100644
--- a/src/styles/card-effects.css
+++ b/src/styles/card-effects.css
@@ -7,6 +7,7 @@
   width: 100%;
   max-width: 200px;
   margin: 0 auto;
+  overflow: hidden;
 }
 
 .card-reflection {
@@ -39,8 +40,8 @@
 @keyframes reflection {
   0% { transform: scale(0) rotate(45deg); opacity: 0; }
   80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
-  81% { transform: scale(4) rotate(45deg); opacity: 1; }
-  100% { transform: scale(50) rotate(45deg); opacity: 0; }
+  81% { transform: scale(2) rotate(45deg); opacity: 1; }
+  100% { transform: scale(3) rotate(45deg); opacity: 0; }
 }
 
 .card-status {
@@ -291,13 +292,13 @@
 }
 
 @keyframes holographic-sweep {
-  0% { transform: scale(0) rotate(45deg) translateX(-200px); opacity: 0; }
-  10% { transform: scale(0) rotate(45deg) translateX(-200px); opacity: 0; }
-  15% { transform: scale(2) rotate(45deg) translateX(-100px); opacity: 0.6; }
-  20% { transform: scale(4) rotate(45deg) translateX(0px); opacity: 1; }
-  25% { transform: scale(6) rotate(45deg) translateX(100px); opacity: 0.8; }
-  30% { transform: scale(8) rotate(45deg) translateX(200px); opacity: 0; }
-  100% { transform: scale(0) rotate(45deg) translateX(300px); opacity: 0; }
+  0% { transform: scale(0) rotate(45deg) translateX(-50px); opacity: 0; }
+  10% { transform: scale(0) rotate(45deg) translateX(-50px); opacity: 0; }
+  15% { transform: scale(1) rotate(45deg) translateX(-25px); opacity: 0.6; }
+  20% { transform: scale(1.5) rotate(45deg) translateX(0px); opacity: 1; }
+  25% { transform: scale(2) rotate(45deg) translateX(25px); opacity: 0.8; }
+  30% { transform: scale(2.5) rotate(45deg) translateX(50px); opacity: 0; }
+  100% { transform: scale(0) rotate(45deg) translateX(75px); opacity: 0; }
 }
 
 /* Rainbow shimmer effect for special cards */