/* 🎴 精美塔罗风格NFT愿望卡片系统 - 基于参考设计优化 */

/* 卡片容器 - 参考精美塔罗卡片设计 */
.tarot-wish-card {
    width: 320px; /* 优化宽度，更符合塔罗卡片比例 */
    height: 520px; /* 调整高度，保持3:5.2的黄金比例 */
    position: relative;
    margin: 20px auto;
    perspective: 1200px;
    perspective-origin: 50% 50%;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.25));
    border-radius: 16px; /* 添加圆角 */
    overflow: hidden;
    
    /* 添加微妙的发光效果 */
    box-shadow: 
        0 0 20px rgba(212, 175, 55, 0.1),
        0 8px 32px rgba(0, 0, 0, 0.12);
}

/* 卡片翻转容器 - 原地翻转（绝对定位锚定到容器左上角） */
.tarot-card-inner {
    position: absolute; /* 由 relative 改为 absolute，防止翻转触发布局重算 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.8s ease-in-out;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    /* 关键：确保翻转轴在容器几何中心，原地翻转 */
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    will-change: transform; /* 提前合成层，避免抖动/位移 */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 翻转状态 - 只Y轴旋转，不改变位置 */
.tarot-wish-card.flipped .tarot-card-inner {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

/* 卡片外层容器的悬浮效果 - 只改变阴影，避免位置偏移 */
.tarot-wish-card:hover {
    /* 移除 transform，只保留阴影效果，避免翻转时位置偏移 */
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.4));
}

/* 翻转时保持悬浮但不干扰翻转动画 */
.tarot-wish-card.flipped:hover {
    /* 移除 transform，只保留阴影效果 */
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.4));
}

/* 卡片整体发光效果 */
.tarot-wish-card::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        #d4af37, #ffd700, #d4af37, #b8860b, 
        #d4af37, #ffd700, #d4af37);
    background-size: 400% 400%;
    border-radius: 22px;
    z-index: -1;
    animation: cardAura 4s ease-in-out infinite;
    opacity: 0.6;
}

@keyframes cardAura {
    0%, 100% { 
        background-position: 0% 50%;
        opacity: 0.4;
    }
    50% { 
        background-position: 100% 50%;
        opacity: 0.8;
    }
}

/* 卡片正反面基础样式 - 确保位置固定不偏移 */
.tarot-card-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.2);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    /* 确保卡片面不会偏移 */
    transform-origin: center center;
    -webkit-transform-origin: center center;
}


/* 🌟 卡片正面设计 - 参考精美塔罗卡片的温暖色调 */
.tarot-card-front {
    transform: rotateY(0deg);
    z-index: 2;
    -webkit-transform: rotateY(0deg);
    
    /* 精美的渐变背景，模仿参考卡片的温暖色调 */
    background: 
        linear-gradient(160deg, 
            #faf7f2 0%,   /* 极浅奶油色 */
            #f2e8d8 15%,  /* 浅米色 */
            #ead5c1 30%,  /* 温暖米色 */
            #e0c4a8 45%,  /* 中等金米色 */
            #d6b490 60%,  /* 深金米色 */
            #cca578 75%,  /* 古金色 */
            #c29660 90%,  /* 深古金色 */
            #b8875a 100% /* 边缘深色 */
        );
    
    position: relative;
    overflow: hidden;
    border: 2px solid #d4af37;
    border-radius: 16px;
    
    /* 精美的阴影和光泽效果 */
    box-shadow: 
        /* 内部高光和金色光晕 */
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -1px 2px rgba(212, 175, 55, 0.3),
        inset 0 0 20px rgba(212, 175, 55, 0.1),
        /* 外部阴影 */
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 精美装饰纹理 - 模仿参考卡片的华丽边框纹理 */
.tarot-card-front::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* 华丽的装饰纹理 */
        radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.4) 0%, transparent 30%),
        radial-gradient(ellipse at top right, rgba(255, 255, 255, 0.4) 0%, transparent 30%),
        radial-gradient(ellipse at bottom left, rgba(255, 255, 255, 0.3) 0%, transparent 25%),
        radial-gradient(ellipse at bottom right, rgba(255, 255, 255, 0.3) 0%, transparent 25%),
        /* 中心光晕 */
        radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 60%),
        /* 细腻纹理 */
        repeating-linear-gradient(45deg, 
            rgba(255, 255, 255, 0.02) 0px, 
            rgba(255, 255, 255, 0.02) 1px, 
            transparent 1px, 
            transparent 3px);
    animation: gentleShimmer 6s ease-in-out infinite alternate;
}

@keyframes gentleShimmer {
    0% { opacity: 0.6; }
    100% { opacity: 0.9; }
}

/* 华丽装饰边框 - 参考卡片的精美纹理边框 */
.tarot-ornate-border {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 4px solid #d4af37;
    border-radius: 18px;
    background: 
        /* 装饰纹理 */
        repeating-linear-gradient(0deg, 
            rgba(255, 255, 255, 0.15) 0px, 
            rgba(255, 255, 255, 0.15) 2px, 
            transparent 2px, 
            transparent 8px),
        repeating-linear-gradient(90deg, 
            rgba(255, 255, 255, 0.15) 0px, 
            rgba(255, 255, 255, 0.15) 2px, 
            transparent 2px, 
            transparent 8px),
        /* 角落装饰 */
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.3) 0%, transparent 40%),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.3) 0%, transparent 40%),
        radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.3) 0%, transparent 40%),
        radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.3) 0%, transparent 40%);
    box-shadow: 
        inset 0 0 25px rgba(212, 175, 55, 0.4),
        inset 0 0 10px rgba(255, 255, 255, 0.3),
        0 0 20px rgba(212, 175, 55, 0.3);
    padding: 2px;
}

@keyframes borderGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.tarot-inner-border {
    width: 100%;
    height: 100%;
    /* 移除深色背景，让卡片背景透出 */
    background: transparent;
    border-radius: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 16px 14px; /* 调整内边距适应新尺寸 */
    box-sizing: border-box;
}

/* 卡片标题区域 - 参考卡片的优雅排版 */
.tarot-header {
    text-align: center;
    margin-bottom: 15px; /* 减少底部间距 */
    padding: 12px 16px 8px; /* 减少内边距 */
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 100%);
    border-radius: 12px 12px 0 0;
}

.tarot-title {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 18px; /* 调整字体大小适应新尺寸 */
    font-weight: 600;
    color: #8b4513;
    text-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 0 8px rgba(139, 69, 19, 0.3);
    margin-bottom: 6px;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.2;
}

.tarot-subtitle {
    font-family: 'Cinzel', serif;
    font-size: 12px; /* 调整副标题字体 */
    color: #8b4513;
    opacity: 0.8;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* 中央愿望能量符号 - 参考卡片中仙女手中的发光球体 */
.wish-energy-orb {
    position: relative;
    width: 100px; /* 调整能量球尺寸适应新卡片 */
    height: 100px;
    margin: 12px auto; /* 减少间距 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.energy-core {
    width: 70px; /* 调整能量核心尺寸 */
    height: 70px;
    border-radius: 50%;
    background: 
        /* 内核光芒 */
        radial-gradient(circle at 30% 30%, 
            rgba(255, 255, 255, 0.9) 0%, 
            rgba(255, 248, 220, 0.8) 20%, 
            rgba(255, 215, 0, 0.7) 40%, 
            rgba(255, 165, 0, 0.6) 60%, 
            rgba(218, 165, 32, 0.4) 80%, 
            transparent 100%);
    position: relative;
    animation: magicalGlow 3s ease-in-out infinite;
    box-shadow: 
        /* 外层光晕 */
        0 0 30px rgba(255, 215, 0, 0.8),
        0 0 60px rgba(255, 215, 0, 0.4),
        0 0 90px rgba(255, 215, 0, 0.2),
        /* 内层高光 */
        inset 0 0 25px rgba(255, 255, 255, 0.4),
        inset -5px -5px 15px rgba(255, 215, 0, 0.3);
}

@keyframes magicalGlow {
    0%, 100% { 
        transform: scale(1) rotate(0deg);
        box-shadow: 
            0 0 30px rgba(255, 215, 0, 0.8),
            0 0 60px rgba(255, 215, 0, 0.4),
            0 0 90px rgba(255, 215, 0, 0.2),
            inset 0 0 25px rgba(255, 255, 255, 0.4);
    }
    33% { 
        transform: scale(1.05) rotate(120deg);
        box-shadow: 
            0 0 40px rgba(255, 215, 0, 0.9),
            0 0 80px rgba(255, 215, 0, 0.5),
            0 0 120px rgba(255, 215, 0, 0.3),
            inset 0 0 30px rgba(255, 255, 255, 0.5);
    }
    66% { 
        transform: scale(0.98) rotate(240deg);
        box-shadow: 
            0 0 35px rgba(255, 215, 0, 0.85),
            0 0 70px rgba(255, 215, 0, 0.45),
            0 0 105px rgba(255, 215, 0, 0.25),
            inset 0 0 28px rgba(255, 255, 255, 0.45);
    }
}

.energy-rings {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.energy-ring {
    position: absolute;
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 50%;
    animation: ringRotate 4s linear infinite;
}

.ring-1 {
    top: -10px; left: -10px; right: -10px; bottom: -10px;
    border-color: rgba(255, 215, 0, 0.4);
    animation-duration: 3s;
}

.ring-2 {
    top: -20px; left: -20px; right: -20px; bottom: -20px;
    border-color: rgba(255, 192, 203, 0.3);
    animation-duration: 4s;
    animation-direction: reverse;
}

.ring-3 {
    top: -30px; left: -30px; right: -30px; bottom: -30px;
    border-color: rgba(138, 43, 226, 0.2);
    animation-duration: 5s;
}

@keyframes ringRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fairy-avatar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px; /* 调整仙女头像大小 */
    z-index: 2;
    animation: fairyFloat 3s ease-in-out infinite;
}

@keyframes fairyFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
    50% { transform: translate(-50%, -50%) translateY(-5px); }
}

/* 愿望显示区域 - 参考卡片的优雅文字区域 */
.wish-display-scroll {
    background: 
        linear-gradient(145deg, 
            rgba(255, 255, 255, 0.15) 0%, 
            rgba(255, 248, 220, 0.1) 50%, 
            rgba(255, 255, 255, 0.05) 100%);
    border: 2px solid rgba(139, 69, 19, 0.3);
    border-radius: 15px;
    padding: 12px 10px; /* 进一步优化内边距 */
    margin: 10px 0; /* 减少间距 */
    backdrop-filter: blur(8px);
    box-shadow: 
        inset 0 2px 10px rgba(255, 255, 255, 0.2),
        inset 0 -2px 10px rgba(139, 69, 19, 0.1),
        0 4px 15px rgba(0, 0, 0, 0.1);
    min-height: 80px; /* 确保有足够高度显示愿望文字 */
}

.wish-label {
    font-family: 'Cinzel', serif;
    font-size: 14px; /* 增大标签字体 */
    color: #8b4513;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.wish-text {
    font-family: 'Noto Serif SC', serif;
    font-size: 12px; /* 调整愿望文字大小 */
    color: #fff;
    text-align: center;
    line-height: 1.3;
    font-style: italic;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 愿望能量进度条 */
.wish-energy-progress {
    margin: 15px 0; /* 优化间距 */
}

.energy-label {
    font-family: 'Cinzel', serif;
    font-size: 14px; /* 增大标签字体 */
    color: #8b4513;
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.energy-bar-container {
    position: relative;
    height: 24px; /* 增加进度条高度 */
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.energy-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, 
        #ff6b6b 0%, 
        #ffd93d 25%, 
        #6bcf7f 50%, 
        #4d96ff 75%, 
        #9b59b6 100%);
    border-radius: 10px;
    position: relative;
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.energy-bar-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        transparent 100%);
    animation: energyFlow 2s linear infinite;
}

@keyframes energyFlow {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.energy-percentage {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-family: 'Cinzel', serif;
    font-size: 14px; /* 增大百分比字体 */
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* 卡片底部信息 - 参考卡片的底部设计 */
.tarot-footer {
    margin-top: auto;
    text-align: center;
    padding: 15px 20px;
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 100%);
    border-radius: 0 0 12px 12px;
}

.fairy-blessing {
    font-family: 'Noto Serif SC', serif;
    font-size: 16px; /* 增大祝福文字 */
    color: #8b4513;
    margin-bottom: 12px;
    line-height: 1.4;
    font-style: italic;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.nft-number {
    font-family: 'Cinzel', serif;
    font-size: 14px; /* 增大NFT编号 */
    color: #8b4513;
    opacity: 0.7;
    letter-spacing: 2px;
    font-weight: 600;
    text-transform: uppercase;
}

/* 🧚‍♀️ 卡片背面设计 - 与正面保持一致的温暖色调 */
.tarot-card-back {
    transform: rotateY(180deg);
    z-index: 1;
    -webkit-transform: rotateY(180deg); /* Safari 兼容性 */
    background: linear-gradient(145deg, 
        #f4e4bc 0%,   /* 与正面一致的温暖奶油色 */
        #e8d5a3 15%,  
        #dcc48a 30%,  
        #d4b574 50%,  
        #c9a96e 70%,  
        #b8956b 85%,  
        #a08660 100%  
    );
    position: relative;
    border: 3px solid #d4af37;
    box-shadow: 
        inset 0 0 30px rgba(212, 175, 55, 0.3),
        0 8px 32px rgba(0, 0, 0, 0.3);
}

.tarot-back-border {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border: 3px solid transparent;
    border-radius: 16px;
    background: linear-gradient(45deg, 
        #cd853f 0%, 
        #daa520 25%, 
        #b8860b 50%, 
        #daa520 75%, 
        #cd853f 100%);
    background-size: 400% 400%;
    animation: borderGlow 3s ease-in-out infinite;
    padding: 2px;
}

.tarot-back-inner {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #2c1810, #3d2817);
    border-radius: 14px;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20px 18px; /* 优化内边距以匹配正面 */
    box-sizing: border-box;
    z-index: 10; /* 确保内容在最上层 */
}

/* 仙女插画区域 */
.fairy-illustration {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 15; /* 确保仙女插画可见 */
    margin: 20px 0;
}

.fairy-portrait-container {
    position: relative;
    width: 140px;
    height: 140px;
    margin-bottom: 20px;
}

.fairy-main-portrait {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(255, 192, 203, 0.2) 0%, 
        rgba(138, 43, 226, 0.1) 50%, 
        transparent 80%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    position: relative;
    animation: fairyGlow 3s ease-in-out infinite alternate;
}

@keyframes fairyGlow {
    0% { 
        box-shadow: 0 0 20px rgba(255, 192, 203, 0.3);
        transform: scale(1);
    }
    100% { 
        box-shadow: 0 0 30px rgba(255, 192, 203, 0.5);
        transform: scale(1.02);
    }
}

/* 仙女等级指示器 */
.fairy-level-indicators {
    position: absolute;
    top: -10px;
    right: -10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.level-stars {
    font-size: 16px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

.gem-frame {
    font-size: 20px;
    animation: gemSparkle 2s ease-in-out infinite;
}

@keyframes gemSparkle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(5deg); }
}

.divine-halo {
    font-size: 24px;
    animation: divinePulse 2s ease-in-out infinite;
}

@keyframes divinePulse {
    0%, 100% { 
        transform: scale(1);
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    }
    50% { 
        transform: scale(1.1);
        text-shadow: 0 0 20px rgba(255, 215, 0, 1);
    }
}

/* 赋能消息 */
.empowerment-message {
    text-align: center;
    margin-bottom: 20px;
}

.empower-text {
    font-family: 'Noto Serif SC', serif;
    font-size: 13px;
    color: #daa520;
    line-height: 1.4;
    font-style: italic;
}

/* 供奉系统 */
.offerings-section {
    margin-bottom: 20px;
}

.offerings-title {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    color: #cd853f;
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.offerings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.offering-btn {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(205, 133, 63, 0.3);
    border-radius: 10px;
    padding: 12px 6px; /* 增大按钮内边距 */
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    min-height: 60px; /* 确保按钮有足够高度 */
}

.offering-btn:hover {
    background: rgba(205, 133, 63, 0.2);
    border-color: rgba(205, 133, 63, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(205, 133, 63, 0.3);
}

.offering-icon {
    font-size: 24px; /* 增大供奉图标 */
    margin-bottom: 6px;
    display: block;
}

.offering-name {
    font-family: 'Cinzel', serif;
    font-size: 12px; /* 增大供奉名称字体 */
    color: #daa520;
    letter-spacing: 0.3px;
}

/* 仙女指导 */
.fairy-guidance {
    text-align: center;
    margin-bottom: 15px;
}

.guidance-text {
    font-family: 'Noto Serif SC', serif;
    font-size: 12px;
    color: #ffb6c1;
    line-height: 1.4;
    font-style: italic;
}

/* 进化状态 */
.evolution-status {
    text-align: center;
}

.evolution-btn {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    color: white;
    border: none;
    padding: 14px 20px; /* 增大按钮内边距 */
    border-radius: 25px;
    font-family: 'Cinzel', serif;
    font-size: 14px; /* 增大按钮字体 */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
    min-width: 120px; /* 确保按钮有足够宽度 */
}

.evolution-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
}

.max-evolution {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    color: #ffd700;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

/* 仙女进化等级样式 */
.fairy-basic .fairy-main-portrait {
    background: radial-gradient(circle, 
        rgba(255, 192, 203, 0.2) 0%, 
        rgba(255, 182, 193, 0.1) 50%, 
        transparent 80%);
}

.fairy-empowered .fairy-main-portrait {
    background: radial-gradient(circle, 
        rgba(255, 215, 0, 0.3) 0%, 
        rgba(255, 192, 203, 0.2) 50%, 
        transparent 80%);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.4);
}

.fairy-rare .fairy-main-portrait {
    background: radial-gradient(circle, 
        rgba(138, 43, 226, 0.4) 0%, 
        rgba(147, 112, 219, 0.3) 50%, 
        transparent 80%);
    box-shadow: 0 0 30px rgba(138, 43, 226, 0.5);
}

.fairy-legendary .fairy-main-portrait {
    background: radial-gradient(circle, 
        rgba(255, 215, 0, 0.5) 0%, 
        rgba(255, 20, 147, 0.3) 30%, 
        rgba(138, 43, 226, 0.2) 60%, 
        transparent 80%);
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.7);
    animation: legendaryAura 2s ease-in-out infinite alternate;
}

@keyframes legendaryAura {
    0% { 
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.7);
    }
    100% { 
        box-shadow: 0 0 60px rgba(255, 215, 0, 0.9), 0 0 80px rgba(255, 20, 147, 0.5);
    }
}

/* 粒子效果 */
.particle-system {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.8), transparent);
    border-radius: 50%;
    animation: particleFloat 4s linear infinite;
}

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-10px) rotate(360deg);
        opacity: 0;
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .tarot-wish-card {
        width: 240px;
        height: 400px;
    }
    
    .tarot-title {
        font-size: 16px;
    }
    
    .wish-energy-orb {
        width: 100px;
        height: 100px;
    }
    
    .energy-core {
        width: 70px;
        height: 70px;
    }
    
    .fairy-avatar {
        font-size: 30px;
    }
    
    .fairy-portrait-container {
        width: 120px;
        height: 120px;
    }
    
    .fairy-main-portrait {
        font-size: 56px;
    }
}

/* 特殊动画效果 */
.energy-boost-animation {
    animation: energyBoostEffect 1.5s ease-out;
}

@keyframes energyBoostEffect {
    0% { transform: scale(1); }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
    }
    100% { transform: scale(1); }
}

.offering-success-effect {
    animation: offeringGlow 2s ease-out;
}

@keyframes offeringGlow {
    0% { 
        background: rgba(0, 0, 0, 0.3);
        border-color: rgba(205, 133, 63, 0.3);
    }
    50% { 
        background: rgba(255, 215, 0, 0.3);
        border-color: rgba(255, 215, 0, 0.8);
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    }
    100% { 
        background: rgba(0, 0, 0, 0.3);
        border-color: rgba(205, 133, 63, 0.3);
    }
}

/* 浮动文字效果 */
.floating-energy-text {
    font-family: 'Cinzel', serif;
    color: #ffd700;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

.floating-emoji {
    font-size: 32px;
    margin-bottom: 8px;
    animation: floatingEmojiSpin 2s ease-out;
}

.floating-text {
    font-size: 18px;
    background: linear-gradient(45deg, #ffd700, #ff6b6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes floatingEmojiSpin {
    0% { 
        transform: scale(0.5) rotate(0deg);
        opacity: 0;
    }
    50% { 
        transform: scale(1.2) rotate(180deg);
        opacity: 1;
    }
    100% { 
        transform: scale(1) rotate(360deg);
        opacity: 1;
    }
}

@keyframes floatingTextEffect {
    0% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5) translateY(0px);
    }
    20% { 
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2) translateY(-10px);
    }
    80% { 
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) translateY(-30px);
    }
    100% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8) translateY(-50px);
    }
}

/* NFT收藏品特性 */
.nft-rarity-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.rarity-basic { background: linear-gradient(45deg, #95a5a6, #bdc3c7); }
.rarity-empowered { background: linear-gradient(45deg, #3498db, #2980b9); }
.rarity-rare { background: linear-gradient(45deg, #9b59b6, #8e44ad); }
.rarity-legendary { background: linear-gradient(45deg, #f39c12, #e67e22); animation: legendaryGlow 2s ease-in-out infinite alternate; }

@keyframes legendaryGlow {
    0% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
    100% { box-shadow: 0 4px 20px rgba(243, 156, 18, 0.6), 0 0 30px rgba(243, 156, 18, 0.4); }
}

/* 卡片收藏价值显示 */
.nft-value-indicator {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #ffd700;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 215, 0, 0.3);
}

/* 仙女进化视觉效果 */
.evolution-glow {
    animation: evolutionAura 3s ease-in-out infinite;
}

@keyframes evolutionAura {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 20, 147, 0.4);
        transform: scale(1.02);
    }
}