/* ============ 基础入场动画 ============ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============ 弹出动画 ============ */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }
    60% {
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.pop-in {
    animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============ 卡牌动画 ============ */
@keyframes cardGlow {
    0%, 100% {
        box-shadow: 0 8px 32px rgba(255, 210, 102, 0.3);
    }
    50% {
        box-shadow: 0 8px 60px rgba(255, 210, 102, 0.6);
    }
}

@keyframes shimmer {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
}

@keyframes sweep {
    0% {
        background-position: 250% 0;
    }
    100% {
        background-position: -150% 0;
    }
}

@keyframes breathe {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.02);
        opacity: 1;
    }
}

@keyframes cardFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* ============ 盲盒动画 ============ */
@keyframes shake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    10% { transform: translateX(-8px) rotate(-2deg); }
    20% { transform: translateX(8px) rotate(2deg); }
    30% { transform: translateX(-8px) rotate(-2deg); }
    40% { transform: translateX(8px) rotate(2deg); }
    50% { transform: translateX(-6px) rotate(-1deg); }
    60% { transform: translateX(6px) rotate(1deg); }
    70% { transform: translateX(-4px) rotate(-1deg); }
    80% { transform: translateX(4px) rotate(1deg); }
    90% { transform: translateX(-2px) rotate(0deg); }
}

@keyframes explode {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    40% {
        transform: scale(1.3);
        opacity: 1;
        filter: brightness(1.5);
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
        filter: brightness(2);
    }
}

@keyframes burstGlow {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(2);
    }
}

@keyframes cardFlyOut {
    0% {
        transform: scale(0) translateY(0);
        opacity: 0;
    }
    30% {
        transform: scale(1.2) translateY(-20px);
        opacity: 1;
    }
    60% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* ============ 闪光线 ============ */
@keyframes flashOut {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes lightning {
    0%, 100% { opacity: 0; }
    5%, 15% { opacity: 1; }
    10% { opacity: 0.3; }
}

@keyframes spark {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(1.5) rotate(180deg);
        opacity: 0;
    }
}

/* ============ 卡片飘落 ============ */
@keyframes cardFall {
    0% {
        transform: translateY(-200px) rotate(0deg) scale(0.5);
        opacity: 0;
    }
    60% {
        transform: translateY(10px) rotate(5deg) scale(1.1);
        opacity: 1;
    }
    80% {
        transform: translateY(-5px) rotate(-3deg) scale(1);
    }
    100% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* ============ 信封动画 ============ */
@keyframes envelopeOpen {
    0% { transform: scale(0.8) rotate(-5deg); opacity: 0; }
    50% { transform: scale(1.05) rotate(0deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes letterSlide {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* ============ 文字浮现 ============ */
@keyframes textFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes charReveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============ Toast ============ */
@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.toast.leaving {
    animation: toastOut 0.3s ease forwards;
}

/* ============ 呼吸动画 ============ */
@keyframes pulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* ============ 解锁动画 ============ */
@keyframes unlockShimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* ============ 稀有卡牌入场 ============ */
@keyframes rareCardReveal {
    0% {
        opacity: 0;
        transform: scale(0.3) rotateY(180deg);
        filter: blur(20px);
    }
    50% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
    }
}

/* ============ 十连动画 ============ */
@keyframes tenDrawCard {
    0% {
        opacity: 0;
        transform: scale(0) translate(var(--tx, 0), var(--ty, -100px));
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }
}

/* ============ 背景光斑 ============ */
@keyframes floatOrb {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(30px, -20px) scale(1.1);
    }
    50% {
        transform: translate(-20px, 30px) scale(0.95);
    }
    75% {
        transform: translate(20px, 20px) scale(1.05);
    }
}

/* ============ 脉冲光圈 ============ */
@keyframes ripple {
    0% {
        transform: scale(0.4);
        opacity: 0.8;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* ============ 旋转 ============ */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============ 摇晃 ============ */
@keyframes wobble {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}

/* ============ 数字滚动 ============ */
@keyframes numberRoll {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ============ 光线扫描 ============ */
@keyframes scanLine {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

/* ============ 组合动画工具类（有限时长，避免 GPU 累积） ============ */
.animate-float {
    animation: cardFloat 3s ease-in-out forwards;
}

.animate-breathe {
    animation: breathe 2.5s ease-in-out forwards;
}

.animate-pulse-glow {
    animation: pulse 2.5s ease-in-out forwards;
}

.animate-fall {
    animation: cardFall 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-reveal {
    animation: textFadeIn 0.6s ease forwards;
}

/* ============ 盲盒掉落 ============ */
@keyframes blindBoxFall {
    0% {
        transform: translateY(-120vh) rotate(0deg);
        opacity: 0;
    }
    60% {
        transform: translateY(10px) rotate(5deg);
        opacity: 1;
    }
    80% {
        transform: translateY(-5px) rotate(-3deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
}

@keyframes blindBoxOpen {
    0% { transform: scale(1) rotate(0deg); }
    30% { transform: scale(1.15) rotate(-3deg); }
    60% { transform: scale(0.9) rotate(2deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes boxContentReveal {
    0% {
        transform: scale(0.3) rotateY(180deg);
        opacity: 0;
        filter: blur(20px);
    }
    50% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        transform: scale(1) rotateY(0deg);
        opacity: 1;
    }
}

@keyframes sparkleBurst {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(3); opacity: 0; }
}

.blind-box-fall {
    animation: blindBoxFall 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.blind-box-open {
    animation: blindBoxOpen 0.6s ease-in-out forwards;
}

.blind-box-content-reveal {
    animation: boxContentReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ============ 盲盒样式 ============ */
.blind-box {
    position: absolute;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    user-select: none;
}

.blind-box:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 20px 50px rgba(255, 210, 102, 0.5);
}

.blind-box.opened {
    cursor: default;
    pointer-events: none;
}

.blind-box-front {
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #2b243f, #141622);
    border: 3px solid var(--gold);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(255, 210, 102, 0.3);
    transition: all 0.4s ease;
    overflow: hidden;
    position: relative;
}

.blind-box-front::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 210, 102, 0.15) 50%, transparent 70%);
    animation: shimmer 1.5s ease-in-out forwards;
}

.blind-box-back {
    display: none;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    animation: boxContentReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.blind-box-back.show {
    display: block;
}

.blind-box-sparkle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, rgba(255, 210, 102, 0.8), transparent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: sparkleBurst 0.8s ease-out forwards;
}

/* ============ 十连掉落容器 ============ */
.blind-box-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background: rgba(20, 22, 34, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
}

.blind-box-close {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: white;
    cursor: pointer;
    font-size: 14px;
    z-index: 3500;
    transition: all 0.2s ease;
}

.blind-box-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

.blind-box-hint {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--gold);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 0 20px rgba(255, 210, 102, 0.5);
}

.blind-box-summary {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 90%;
}

.blind-box-summary-item {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    font-size: 13px;
    backdrop-filter: blur(4px);
}

.blind-box-cta {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    padding: 14px 36px;
    background: linear-gradient(135deg, var(--gold), var(--pink));
    color: var(--bg-deep);
    font-weight: 700;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 15px;
    box-shadow: 0 10px 30px rgba(255, 210, 102, 0.4);
    transition: all 0.2s ease;
    z-index: 10;
}

.blind-box-cta:hover {
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 15px 40px rgba(255, 210, 102, 0.6);
}

.blind-box-result-card {
    background: linear-gradient(160deg, var(--bg-dark), var(--card-bg-1));
    border: 2px solid var(--gold);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    animation: boxContentReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    max-width: 300px;
}

.blind-box-result-card.win-ur {
    border-color: var(--ur-color);
    box-shadow: 0 0 40px rgba(255, 210, 102, 0.5);
}

.blind-box-result-card.win-ssr {
    border-color: var(--ssr-color);
    box-shadow: 0 0 40px rgba(255, 80, 120, 0.5);
}

.blind-box-result-card.win-sr {
    border-color: var(--sr-color);
    box-shadow: 0 0 30px rgba(155, 89, 182, 0.4);
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1s; }

/* ============ 稀有度揭示特效 ============ */

@keyframes goldenRaySweep {
    0% { transform: rotate(0deg); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: rotate(360deg); opacity: 0; }
}

@keyframes sparkleFloat {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 0;
    }
    30% {
        transform: translate(var(--tx, 0), var(--ty, -40px)) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(calc(var(--tx, 0) * 2), calc(var(--ty, -40px) * 2.5)) scale(0);
        opacity: 0;
    }
}

/* R 卡专用：sparkle 保持可见，不 fade out，匹配长时 duration */
@keyframes sparkleFloatR {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 0;
    }
    10% {
        transform: translate(calc(var(--tx, 0) * 0.3), calc(var(--ty, -40px) * 0.3)) scale(1.2);
        opacity: 1;
    }
    30% {
        transform: translate(var(--tx, 0), var(--ty, -40px)) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(calc(var(--tx, 0) * 1.5), calc(var(--ty, -40px) * 2)) scale(0.8);
        opacity: 0.85;  /* 保持可见！不是 0 */
    }
}

@keyframes dazzlePulse {
    0%, 100% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.5) saturate(1.5); }
}

@keyframes cardGlow {
    0%, 100% { box-shadow: 0 0 20px var(--glow-color, rgba(255,210,102,0.4)); }
    50% { box-shadow: 0 0 60px var(--glow-color, rgba(255,210,102,0.8)), 0 0 120px var(--glow-color, rgba(255,210,102,0.3)); }
}

@keyframes lightRayRotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes particleBurst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--px, 100px), var(--py, -100px)) scale(0);
        opacity: 0;
    }
}

@keyframes rarityTitle {
    0% { transform: translateY(-30px) scale(0.5); opacity: 0; filter: blur(10px); }
    50% { transform: translateY(0) scale(1.1); opacity: 1; filter: blur(0); }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes screenShake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-4px, 2px); }
    20% { transform: translate(4px, -2px); }
    30% { transform: translate(-3px, 3px); }
    40% { transform: translate(3px, -3px); }
    50% { transform: translate(-2px, 2px); }
    60% { transform: translate(2px, -2px); }
    70% { transform: translate(-1px, 1px); }
    80% { transform: translate(1px, -1px); }
    90% { transform: translate(0, 0); }
}

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

@keyframes cardFloatReveal {
    0% { transform: translateY(100px) scale(0.5) rotateX(45deg); opacity: 0; }
    60% { transform: translateY(-10px) scale(1.1) rotateX(-5deg); opacity: 1; }
    100% { transform: translateY(0) scale(1) rotateX(0deg); opacity: 1; }
}

@keyframes shockwave {
    0% { transform: scale(0.3); opacity: 1; border-width: 8px; }
    100% { transform: scale(4); opacity: 0; border-width: 1px; }
}

/* ============ 稀有度特效样式 ============ */

.rarity-fx-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2500;
    overflow: hidden;
}

.rarity-fx-overlay.shake {
    animation: screenShake 0.6s ease-in-out;
}

.rarity-light-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: lightRayRotate 8s linear infinite;
}

.rarity-light-rays .ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 400px;
    background: linear-gradient(to top, transparent, var(--gold, #ffd266), transparent);
    transform-origin: bottom center;
    opacity: 0.6;
}

.rarity-sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--sparkle-color, #ffd266);
    border-radius: 50%;
    pointer-events: none;
    animation: sparkleFloat 2s ease-out forwards;
}

.rarity-sparkle.big {
    width: 12px;
    height: 12px;
    box-shadow: 0 0 12px var(--sparkle-color, #ffd266);
}

.rarity-sparkle.diamond {
    width: 10px;
    height: 10px;
    background: transparent;
    border: 2px solid var(--sparkle-color, #ffd266);
    transform: rotate(45deg);
    box-shadow: 0 0 8px var(--sparkle-color, #ffd266);
}

.rarity-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    animation: particleBurst 1.5s ease-out forwards;
}

.rarity-particle.gold {
    background: #ffd266;
    box-shadow: 0 0 10px #ffd266, 0 0 20px rgba(255, 210, 102, 0.5);
}

.rarity-particle.pink {
    background: #ff5078;
    box-shadow: 0 0 10px #ff5078, 0 0 20px rgba(255, 80, 120, 0.5);
}

.rarity-particle.purple {
    background: #9b59b6;
    box-shadow: 0 0 10px #9b59b6, 0 0 20px rgba(155, 89, 182, 0.5);
}

.rarity-particle.white {
    background: #fff;
    box-shadow: 0 0 10px #fff, 0 0 20px rgba(255, 255, 255, 0.8);
}

.rarity-title {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 48px;
    font-weight: 900;
    letter-spacing: 8px;
    text-align: center;
    pointer-events: none;
    animation: rarityTitle 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    white-space: nowrap;
}

.rarity-title.ur {
    background: linear-gradient(135deg, #ffd266, #fff9e0, #ffb84d, #ffd266);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rarityTitle 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, colorWave 3s ease-in-out forwards;
    text-shadow: none;
    filter: drop-shadow(0 4px 20px rgba(255, 210, 102, 0.8));
}

.rarity-title.ssr {
    background: linear-gradient(135deg, #ff5078, #ffc3d0, #ff8fa3, #ff5078);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rarityTitle 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, colorWave 3s ease-in-out forwards;
    filter: drop-shadow(0 4px 20px rgba(255, 80, 120, 0.8));
}

.rarity-title.sr {
    background: linear-gradient(135deg, #9b59b6, #d2b4de, #bb8fce, #9b59b6);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rarityTitle 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, colorWave 4s ease-in-out forwards;
    filter: drop-shadow(0 4px 20px rgba(155, 89, 182, 0.8));
}

.rarity-title.r {
    color: #5b9bd5;
    text-shadow: 0 0 20px rgba(91, 155, 213, 0.8);
}

.rarity-title.n {
    color: #b0b0b0;
    text-shadow: 0 0 10px rgba(176, 176, 176, 0.5);
}

.rarity-shockwave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid var(--shock-color, #ffd266);
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: shockwave 1s ease-out forwards;
}

.rarity-card-glow {
    position: absolute;
    inset: -20px;
    border-radius: 30px;
    pointer-events: none;
    animation: cardGlow 3.5s ease-in-out forwards;
}

.rarity-msg {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 18px;
    text-align: center;
    pointer-events: none;
    animation: textFadeIn 1s ease forwards;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
    max-width: 80%;
}

/* ============ 单卡揭示全屏特效 ============ */

.single-reveal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.single-reveal-card {
    animation: cardFloatReveal 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 不同稀有度的光效强度 */
.glow-level-n { --glow-color: rgba(176, 176, 176, 0.4); }
.glow-level-r { --glow-color: rgba(91, 155, 213, 0.5); }
.glow-level-sr { --glow-color: rgba(155, 89, 182, 0.6); }
.glow-level-ssr { --glow-color: rgba(255, 80, 120, 0.7); }
.glow-level-ur { --glow-color: rgba(255, 210, 102, 0.9); }

/* ============ UR 传说专属动画 ============ */

@keyframes urPhase1Box {
    0% { transform: translate(-50%, -50%) scale(1); }
    20% { transform: translate(-52%, -50%) scale(1.02) rotate(-2deg); }
    40% { transform: translate(-48%, -50%) scale(1.02) rotate(2deg); }
    60% { transform: translate(-52%, -50%) scale(1.03) rotate(-3deg); }
    80% { transform: translate(-48%, -50%) scale(1.03) rotate(3deg); }
    100% { transform: translate(-50%, -50%) scale(1.05) rotate(0deg); }
}

@keyframes urPhase1Halo {
    0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.3; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.5; }
}

@keyframes urPhase1Halo2 {
    0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0.2; }
    50% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0.3; }
}

@keyframes urLidOpen {
    0% { transform: translateY(0) rotateX(0deg); opacity: 1; }
    100% { transform: translateY(-180px) rotateX(-60deg); opacity: 0; }
}

@keyframes urBurstRing {
    0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; border-width: 20px; }
    100% { transform: translate(-50%, -50%) scale(5); opacity: 0; border-width: 1px; }
}

@keyframes urParticleShoot {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx, 300px), var(--dy, -300px)) scale(0); opacity: 0; }
}

@keyframes urScreenGlow {
    0% { opacity: 0; background: radial-gradient(circle at center, rgba(255,210,102,0.3), transparent 70%); }
    50% { opacity: 1; background: radial-gradient(circle at center, rgba(255,210,102,0.6), rgba(255,184,77,0.3) 50%, transparent 80%); }
    100% { opacity: 0.8; background: radial-gradient(circle at center, rgba(255,210,102,0.4), transparent 70%); }
}

@keyframes urCameraPush {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}

@keyframes urCameraShake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-3px, 2px); }
    50% { transform: translate(3px, -2px); }
    75% { transform: translate(-2px, 1px); }
}

@keyframes urCardRise {
    0% { transform: translate(-50%, 100px) rotateY(180deg) scale(0.5); opacity: 0; }
    40% { transform: translate(-50%, -20px) rotateY(0deg) scale(1.05); opacity: 1; }
    70% { transform: translate(-50%, -10px) rotateY(-5deg) scale(1.02); }
    100% { transform: translate(-50%, -50%) rotateY(0deg) scale(1); opacity: 1; }
}

@keyframes urCard3DSpin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

@keyframes urLightBeam {
    0% { transform: translate(-50%, -50%) rotate(0deg); opacity: 0.6; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(360deg); opacity: 0.6; }
}

@keyframes urTitle3DIn {
    0% { transform: perspective(800px) rotateX(90deg) scale(0.3); opacity: 0; filter: blur(20px); }
    50% { transform: perspective(800px) rotateX(-10deg) scale(1.2); opacity: 1; filter: blur(0); }
    100% { transform: perspective(800px) rotateX(0deg) scale(1); opacity: 1; filter: blur(0); }
}

@keyframes urTitleFlow {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes urStarDance {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
    25% { transform: translate(var(--dance-x1, 50px), var(--dance-y1, -80px)) rotate(90deg) scale(1.2); opacity: 0.9; }
    50% { transform: translate(var(--dance-x2, -30px), var(--dance-y2, -150px)) rotate(180deg) scale(0.8); opacity: 0.7; }
    75% { transform: translate(var(--dance-x3, 60px), var(--dance-y3, -60px)) rotate(270deg) scale(1.1); opacity: 0.9; }
    100% { transform: translate(0, 0) rotate(360deg) scale(1); opacity: 1; }
}

@keyframes urMiniBurst {
    0% { transform: translate(0, 0) scale(0); opacity: 1; }
    50% { transform: translate(var(--mb-x, 30px), var(--mb-y, -40px)) scale(1.5); opacity: 1; }
    100% { transform: translate(calc(var(--mb-x, 30px) * 2), calc(var(--mb-y, -40px) * 2)) scale(0); opacity: 0; }
}

@keyframes urHaloBreath {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

@keyframes urHaloBreath2 {
    0%, 100% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.25); opacity: 0.9; }
}

@keyframes urFinaleFade {
    0% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--fx, 0), var(--fy, -30px)) scale(0.5); }
}

@keyframes urFinaleHalo {
    0% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
}

@keyframes urFrameBreath {
    0%, 100% { box-shadow: 0 0 30px rgba(255,210,102,0.6), 0 0 60px rgba(255,210,102,0.3); }
    50% { box-shadow: 0 0 50px rgba(255,210,102,0.9), 0 0 100px rgba(255,210,102,0.5), 0 0 140px rgba(255,184,77,0.3); }
}

@keyframes urBoxGlow {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(255,210,102,0.5)); }
    50% { filter: drop-shadow(0 0 40px rgba(255,210,102,0.8)); }
}

@keyframes urTextShine {
    0% { filter: brightness(1) drop-shadow(0 0 10px rgba(255,210,102,0.5)); }
    50% { filter: brightness(1.3) drop-shadow(0 0 30px rgba(255,210,102,0.9)); }
    100% { filter: brightness(1) drop-shadow(0 0 10px rgba(255,210,102,0.5)); }
}

/* ============ UR 样式类 ============ */

.ur-box-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.ur-box {
    position: relative;
    width: 140px;
    height: 140px;
    transform: translate(-50%, -50%);
}

.ur-box-body {
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #3d2d0f, #1a1308);
    border: 3px solid #ffd266;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    box-shadow: 0 0 30px rgba(255,210,102,0.4);
    animation: urBoxGlow 1.5s ease-in-out infinite;
}

.ur-box-lid {
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(180deg, #5a4220, #3d2d0f);
    border: 2px solid #ffd266;
    border-radius: 10px 10px 4px 4px;
    transform-origin: bottom center;
    z-index: 2;
}

.ur-phase1-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.98) 50%, #000 100%);
    z-index: 1;
}

.ur-phase1-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    animation: urPhase1Box 0.6s ease-in-out infinite;
    z-index: 3;
}

.ur-phase1-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 3px solid rgba(255,210,102,0.6);
    box-shadow: 0 0 40px rgba(255,210,102,0.3), inset 0 0 40px rgba(255,210,102,0.2);
    animation: urPhase1Halo 1.2s ease-in-out infinite;
    z-index: 2;
}

.ur-phase1-halo2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 2px solid rgba(255,210,102,0.3);
    animation: urPhase1Halo2 1.5s ease-in-out infinite;
    z-index: 2;
}

.ur-burst-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 15px solid #ffd266;
    box-shadow: 0 0 60px #ffd266, 0 0 120px rgba(255,210,102,0.6);
    animation: urBurstRing 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    z-index: 5;
}

.ur-burst-ring-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 10px solid #fff9e0;
    box-shadow: 0 0 40px #fff9e0;
    animation: urBurstRing 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s forwards;
    z-index: 5;
}

.ur-screen-glow {
    position: absolute;
    inset: 0;
    animation: urScreenGlow 1s ease-out forwards;
    z-index: 4;
    pointer-events: none;
}

.ur-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffd266;
    box-shadow: 0 0 10px #ffd266, 0 0 20px rgba(255,210,102,0.8);
    animation: urParticleShoot 1.5s ease-out forwards;
    z-index: 6;
}

.ur-particle.bright {
    width: 10px;
    height: 10px;
    background: #fff9e0;
    box-shadow: 0 0 20px #fff9e0, 0 0 40px rgba(255,249,224,0.6);
}

.ur-particle.star {
    width: 0;
    height: 0;
    background: transparent;
    box-shadow: none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 12px solid #ffd266;
    position: absolute;
}

.ur-particle.star::after {
    content: '';
    position: absolute;
    top: 4px;
    left: -5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 12px solid #ffd266;
}

.ur-camera-push {
    position: absolute;
    inset: 0;
    animation: urCameraPush 2s ease-out forwards;
    z-index: 2;
}

.ur-camera-shake {
    animation: urCameraShake 0.5s ease-in-out infinite;
}

.ur-card-rise-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 240px;
    height: 340px;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.ur-card-3d {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: urCardRise 3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.ur-card-3d-inner {
    width: 100%;
    height: 100%;
    animation: urCard3DSpin 8s linear infinite;
    transform-style: preserve-3d;
}

.ur-light-beams {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    z-index: 7;
    pointer-events: none;
}

.ur-light-beams-slow {
    animation: urLightBeam 12s linear infinite;
}

.ur-light-beams-fast {
    animation: urLightBeam 6s linear infinite reverse;
}

.ur-light-beam {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 300px;
    background: linear-gradient(to top, transparent, rgba(255,210,102,0.8), rgba(255,249,224,0.6), transparent);
    transform-origin: bottom center;
    border-radius: 2px;
}

.ur-title-3d {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 64px;
    font-weight: 900;
    letter-spacing: 6px;
    text-align: center;
    z-index: 15;
    pointer-events: none;
    white-space: nowrap;
}

.ur-title-3d .title-text {
    display: inline-block;
    background: linear-gradient(90deg, #ffd266, #fff9e0, #ffd266, #ffb84d, #ffd266);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: urTitleFlow 2s linear infinite, urTextShine 1.5s ease-in-out infinite;
    filter: drop-shadow(0 4px 30px rgba(255,210,102,0.9));
}

.ur-title-3d .title-sub {
    display: block;
    font-size: 28px;
    color: #fff9e0;
    margin-top: 4px;
    text-shadow: 0 0 20px rgba(255,210,102,0.8);
    letter-spacing: 12px;
}

.ur-title-star {
    position: absolute;
    color: #fff9e0;
    font-size: 20px;
    animation: sparkleFloat 1.5s ease-out infinite;
}

.ur-star-dance {
    position: absolute;
    z-index: 12;
    pointer-events: none;
}

.ur-star-dance .sd-star {
    position: absolute;
    color: #ffd266;
    animation: urStarDance 3s ease-in-out infinite;
}

.ur-mini-burst {
    position: absolute;
    z-index: 13;
    pointer-events: none;
}

.ur-mini-burst .mb-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffd266;
    box-shadow: 0 0 8px #ffd266;
    animation: urMiniBurst 1s ease-out forwards;
}

.ur-halo-breath {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 8;
}

.ur-halo-breath.outer {
    width: 500px;
    height: 500px;
    border: 4px solid rgba(255,210,102,0.5);
    box-shadow: 0 0 60px rgba(255,210,102,0.4), inset 0 0 60px rgba(255,210,102,0.2);
    animation: urHaloBreath 2s ease-in-out infinite;
}

.ur-halo-breath.middle {
    width: 380px;
    height: 380px;
    border: 3px solid rgba(255,210,102,0.6);
    box-shadow: 0 0 40px rgba(255,210,102,0.5);
    animation: urHaloBreath2 1.8s ease-in-out infinite;
}

.ur-halo-breath.inner {
    width: 280px;
    height: 280px;
    border: 2px solid rgba(255,249,224,0.4);
    animation: urHaloBreath 1.5s ease-in-out infinite 0.2s;
}

.ur-card-frame {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background: linear-gradient(160deg, #1a1308, #2b1e0a);
    border: 3px solid #ffd266;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    position: relative;
    animation: urFrameBreath 2s ease-in-out infinite;
    box-shadow: 0 0 40px rgba(255,210,102,0.6);
}

.ur-card-frame .uf-rarity {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 14px;
    color: #ffd266;
    font-weight: 800;
    letter-spacing: 2px;
}

.ur-card-frame .uf-num {
    position: absolute;
    top: 10px;
    left: 14px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}

.ur-card-frame .uf-icon {
    width: 120px;
    height: 120px;
    margin-top: 30px;
    filter: drop-shadow(0 4px 20px rgba(255,210,102,0.7));
    display: flex;
    align-items: center;
    justify-content: center;
}
.ur-card-frame .uf-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ur-card-frame .uf-name {
    font-size: 20px;
    font-weight: 700;
    color: white;
    margin-top: 10px;
}

.ur-card-frame .uf-story {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    margin-top: 6px;
    padding: 0 10px;
    line-height: 1.4;
}

.ur-finale-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 3px solid rgba(255,210,102,0.8);
    box-shadow: 0 0 50px rgba(255,210,102,0.6), 0 0 100px rgba(255,210,102,0.3);
    animation: urHaloBreath 3s ease-in-out infinite;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
}

.ur-finale-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffd266;
    box-shadow: 0 0 8px #ffd266;
    animation: urFinaleFade 2s ease-out forwards;
    z-index: 6;
}

/* ============ SR 超稀有动画 ============ */

@keyframes srBoxShake {
    0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
    20% { transform: translate(-54%, -50%) rotate(-5deg) scale(1.03); }
    40% { transform: translate(-46%, -50%) rotate(5deg) scale(1.03); }
    60% { transform: translate(-54%, -50%) rotate(-6deg) scale(1.04); }
    80% { transform: translate(-46%, -50%) rotate(6deg) scale(1.04); }
}

@keyframes srHaloPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.4; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.9; }
}

@keyframes srLidFly {
    0% { transform: translate(0,0) rotateX(0deg); opacity: 1; }
    100% { transform: translate(0, -300px) rotateX(-90deg); opacity: 0; }
}

@keyframes srOverFlash {
    0% { opacity: 0; }
    30% { opacity: 1; }
    60% { opacity: 0.3; }
    100% { opacity: 0; }
}

@keyframes srGoldFoil {
    0% { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
    100% { transform: translate(var(--fx, 200px), var(--fy, -200px)) rotate(var(--rot, 360deg)) scale(0); opacity: 0; }
}

@keyframes srCardFlip {
    0% { transform: translate(-50%, 50px) rotateY(-180deg) scale(0.6); opacity: 0; }
    50% { transform: translate(-50%, -10px) rotateY(0deg) scale(1.08); opacity: 1; }
    100% { transform: translate(-50%, -50%) rotateY(0deg) scale(1); opacity: 1; }
}

@keyframes srGoldFlow {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes srHaloExpand {
    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; border-width: 12px; }
    100% { transform: translate(-50%, -50%) scale(4); opacity: 0; border-width: 1px; }
}

@keyframes srTextIn {
    0% { transform: scale(0.3); opacity: 0; filter: blur(15px); }
    60% { transform: scale(1.15); opacity: 1; filter: blur(0); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes srHaloBreath {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

@keyframes srFoilDance {
    0% { transform: translate(0,0) rotate(0deg); opacity: 1; }
    50% { transform: translate(var(--dx, 60px), var(--dy, -100px)) rotate(180deg); opacity: 0.8; }
    100% { transform: translate(calc(var(--dx, 60px) * 1.4), calc(var(--dy, -100px) * 1.4)) rotate(360deg); opacity: 0; }
}

@keyframes srCardSurfaceFlow {
    0% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.3) saturate(1.4); }
    100% { filter: brightness(1) saturate(1); }
}

/* SR 样式类 */
.sr-phase1-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(10,5,20,0.95) 0%, rgba(5,2,15,0.98) 50%, #000 100%);
    z-index: 1;
}

.sr-phase1-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110px;
    height: 110px;
    animation: srBoxShake 0.4s ease-in-out infinite;
    z-index: 3;
}

.sr-phase1-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 3px solid rgba(255,210,102,0.7);
    box-shadow: 0 0 40px rgba(255,210,102,0.4), inset 0 0 40px rgba(255,210,102,0.3);
    animation: srHaloPulse 0.8s ease-in-out infinite;
    z-index: 2;
}

.sr-lid-fly {
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 25px;
    background: linear-gradient(180deg, #5a4220, #3d2d0f);
    border: 2px solid #ffd266;
    border-radius: 8px 8px 4px 4px;
    transform-origin: bottom center;
    animation: srLidFly 0.6s cubic-bezier(0.5, 0, 0.5, 1) forwards;
    z-index: 4;
}

.sr-over-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,249,224,0.95), rgba(255,210,102,0.6) 40%, transparent 70%);
    animation: srOverFlash 0.6s ease-out forwards;
    z-index: 5;
    pointer-events: none;
}

.sr-gold-foil {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #ffd266, #fff9e0, #ffb84d);
    box-shadow: 0 0 10px #ffd266;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    animation: srGoldFoil 1.5s ease-out forwards;
    z-index: 6;
}

.sr-gold-foil.small {
    width: 5px;
    height: 5px;
}

.sr-gold-foil.large {
    width: 12px;
    height: 12px;
}

.sr-card-flip-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220px;
    height: 310px;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.sr-card-flip {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: srCardFlip 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.sr-card-frame {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background: linear-gradient(160deg, #1a0f2e, #2d1a4a);
    border: 3px solid #9b59b6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px;
    text-align: center;
    position: relative;
    box-shadow: 0 0 30px rgba(155,89,182,0.7), 0 0 60px rgba(255,210,102,0.4);
    animation: srCardSurfaceFlow 2s ease-in-out infinite;
}

.sr-card-frame .sr-rarity {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 13px;
    color: #d2b4de;
    font-weight: 800;
    letter-spacing: 2px;
}

.sr-card-frame .sr-num {
    position: absolute;
    top: 10px;
    left: 12px;
    font-size: 11px;
    color: rgba(255,255,255,0.5);
}

.sr-card-frame .sr-icon {
    width: 110px;
    height: 110px;
    margin-top: 25px;
    filter: drop-shadow(0 4px 20px rgba(155,89,182,0.8));
    display: flex;
    align-items: center;
    justify-content: center;
}
.sr-card-frame .sr-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sr-card-frame .sr-name {
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin-top: 8px;
}

.sr-card-frame .sr-story {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    margin-top: 5px;
    padding: 0 8px;
    line-height: 1.4;
}

.sr-gold-overlay {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,210,102,0.3) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: srGoldFlow 2s linear infinite;
    pointer-events: none;
    z-index: 1;
}

.sr-halo-expand {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 10px solid #ffd266;
    box-shadow: 0 0 40px #ffd266;
    animation: srHaloExpand 1.2s ease-out forwards;
    z-index: 8;
    pointer-events: none;
}

.sr-halo-expand.purple {
    border-color: #9b59b6;
    box-shadow: 0 0 40px #9b59b6;
    animation-delay: 0.15s;
}

.sr-title {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 52px;
    font-weight: 900;
    letter-spacing: 4px;
    text-align: center;
    z-index: 15;
    pointer-events: none;
    white-space: nowrap;
    animation: srTextIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.sr-title .sr-title-main {
    display: inline-block;
    color: #fff;
    -webkit-text-stroke: 2px #ffd266;
    text-shadow: 0 0 20px rgba(255,210,102,0.8), 0 0 40px rgba(255,210,102,0.4);
}

.sr-title .sr-title-sub {
    display: block;
    font-size: 24px;
    color: #d2b4de;
    margin-top: 4px;
    text-shadow: 0 0 15px rgba(210,180,222,0.7);
    letter-spacing: 10px;
}

.sr-halo-breath {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 8;
}

.sr-halo-breath.outer {
    width: 420px;
    height: 420px;
    border: 3px solid rgba(255,210,102,0.5);
    box-shadow: 0 0 50px rgba(255,210,102,0.4);
    animation: srHaloBreath 1.8s ease-in-out infinite;
}

.sr-halo-breath.inner {
    width: 300px;
    height: 300px;
    border: 2px solid rgba(155,89,182,0.5);
    box-shadow: 0 0 30px rgba(155,89,182,0.3);
    animation: srHaloBreath 1.4s ease-in-out infinite 0.2s;
}

.sr-foil {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, #ffd266, #fff9e0);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    animation: srFoilDance 2s ease-out forwards;
    z-index: 11;
    pointer-events: none;
}

/* ============ SSR 极稀有动画 ============ */

@keyframes ssrBoxShake {
    0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
    15% { transform: translate(-55%, -50%) rotate(-7deg) scale(1.04); }
    30% { transform: translate(-45%, -50%) rotate(7deg) scale(1.04); }
    45% { transform: translate(-55%, -50%) rotate(-8deg) scale(1.05); }
    60% { transform: translate(-45%, -50%) rotate(8deg) scale(1.05); }
    75% { transform: translate(-54%, -50%) rotate(-6deg) scale(1.04); }
    90% { transform: translate(-46%, -50%) rotate(6deg) scale(1.04); }
}

@keyframes ssrHaloAccumulate {
    0%, 100% { transform: translate(-50%, -50%) scale(0.7); opacity: 0.3; }
    50% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.9; }
}

@keyframes ssrLidExplode {
    0% { transform: translate(0,0) rotateX(0deg); opacity: 1; }
    40% { transform: translate(0, -80px) rotateX(-30deg); opacity: 0.8; }
    100% { transform: translate(var(--lx, 200px), -400px) rotateX(-120deg) rotateZ(var(--lz, 45deg)); opacity: 0; }
}

@keyframes ssrShockwave {
    0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; border-width: 25px; }
    100% { transform: translate(-50%, -50%) scale(6); opacity: 0; border-width: 1px; }
}

@keyframes ssrMultiFlash {
    0%, 100% { opacity: 0; }
    15% { opacity: 1; }
    30% { opacity: 0.3; }
    45% { opacity: 0.9; }
    60% { opacity: 0.2; }
    75% { opacity: 0.8; }
}

@keyframes ssrColorParticle {
    0% { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
    100% { transform: translate(var(--cx, 250px), var(--cy, -250px)) rotate(var(--crot, 720deg)) scale(0); opacity: 0; }
}

@keyframes ssrCard3D {
    0% { transform: translate(-50%, 60px) rotateY(-220deg) scale(0.5); opacity: 0; }
    40% { transform: translate(-50%, -15px) rotateY(0deg) scale(1.1); opacity: 1; }
    65% { transform: translate(-50%, -8px) rotateY(-8deg) scale(1.04); }
    85% { transform: translate(-50%, -5px) rotateY(5deg) scale(1.02); }
    100% { transform: translate(-50%, -50%) rotateY(0deg) scale(1); }
}

@keyframes ssrRadialBeam {
    0% { transform: translate(-50%, -50%) rotate(0deg); opacity: 0.5; }
    50% { opacity: 0.9; }
    100% { transform: translate(-50%, -50%) rotate(360deg); opacity: 0.5; }
}

@keyframes ssrTextShine {
    0% { background-position: -300% center; filter: brightness(1); }
    50% { filter: brightness(1.4); }
    100% { background-position: 300% center; filter: brightness(1); }
}

@keyframes ssrHaloBreath {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.22); opacity: 1; }
}

@keyframes ssrFoilFloat {
    0% { transform: translate(0,0) rotate(0deg); opacity: 1; }
    100% { transform: translate(var(--fx, 80px), var(--fy, -200px)) rotate(var(--frot, 540deg)); opacity: 0; }
}

@keyframes ssrLightSweep {
    0% { transform: translateX(-100%); opacity: 0; }
    30% { opacity: 1; }
    70% { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

/* SSR 样式类 */
.ssr-phase1-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(15,5,25,0.95) 0%, rgba(8,3,18,0.98) 50%, #000 100%);
    z-index: 1;
}

.ssr-phase1-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    animation: ssrBoxShake 0.35s ease-in-out infinite;
    z-index: 3;
}

.ssr-phase1-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 3px solid rgba(255,184,77,0.7);
    box-shadow: 0 0 50px rgba(255,184,77,0.5), inset 0 0 50px rgba(255,210,102,0.3);
    animation: ssrHaloAccumulate 0.7s ease-in-out infinite;
    z-index: 2;
}

.ssr-phase1-halo-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 2px solid rgba(255,210,102,0.4);
    animation: ssrHaloAccumulate 0.9s ease-in-out infinite;
    z-index: 2;
}

.ssr-lid-explode {
    position: absolute;
    top: -25px;
    left: -10px;
    width: 120%;
    height: 30px;
    background: linear-gradient(180deg, #6a4c2a, #4a3518);
    border: 2px solid #ffd266;
    border-radius: 10px 10px 4px 4px;
}

/* ============ 抽卡 reveal 高级动画 ============ */

.reveal-card-stage {
    transform-style: preserve-3d;
    perspective: 900px;
    border: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* reveal 卡清除卡册里带的稀有度边框和阴影 */
.reveal-card-stage.card-rarity-n,
.reveal-card-stage.card-rarity-r,
.reveal-card-stage.card-rarity-sr,
.reveal-card-stage.card-rarity-ssr,
.reveal-card-stage.card-rarity-ur {
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* reveal 卡的偏光层不要显示任何边缘效果 */
.reveal-card-stage::before,
.reveal-card-stage::after {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* ============ reveal 层：所有稀有度统一发光呼吸 ============ */
.reveal-glow-ur  { animation: revealGlowUR  3.5s ease-in-out forwards; }
.reveal-glow-ssr { animation: revealGlowSSR 3.5s ease-in-out forwards; }
.reveal-glow-sr  { animation: revealGlowSR  3.5s ease-in-out forwards; }
.reveal-glow-r   { animation: revealGlowR   3.5s ease-in-out forwards; }
.reveal-glow-n   { animation: revealGlowN   3.5s ease-in-out forwards; }

/* reveal 卡偏光效果（类似卡册 UR 卡 shimmer + sweep） */
.reveal-card-stage::before,
.reveal-card-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: 20px;
}
/* 呼吸径向光（有限时长，避免 GPU 累积） */
.reveal-card-stage::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 210, 102, 0.25), rgba(255, 210, 102, 0.04) 55%, transparent 70%);
    animation: shimmer 3.5s ease-in-out forwards;
    animation-fill-mode: forwards;
}
/* 斜向偏光扫过（有限时长） */
.reveal-card-stage::after {
    background: linear-gradient(
        120deg,
        transparent 25%,
        rgba(255, 210, 102, 0.16) 45%,
        rgba(255, 240, 180, 0.35) 50%,
        rgba(255, 210, 102, 0.16) 55%,
        transparent 75%
    );
    background-size: 250% 100%;
    animation: sweep 3.5s linear forwards;
    mix-blend-mode: screen;
}
/* SSR 粉色偏光 */
.reveal-card-stage.card-rarity-ssr::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 80, 120, 0.25), rgba(255, 80, 120, 0.04) 55%, transparent 70%);
}
.reveal-card-stage.card-rarity-ssr::after {
    background: linear-gradient(
        120deg,
        transparent 25%,
        rgba(255, 80, 120, 0.18) 45%,
        rgba(255, 195, 208, 0.4) 50%,
        rgba(255, 80, 120, 0.18) 55%,
        transparent 75%
    );
    background-size: 250% 100%;
}
/* SR 紫色偏光 */
.reveal-card-stage.card-rarity-sr::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(155, 89, 182, 0.25), rgba(155, 89, 182, 0.04) 55%, transparent 70%);
}
.reveal-card-stage.card-rarity-sr::after {
    background: linear-gradient(
        120deg,
        transparent 25%,
        rgba(155, 89, 182, 0.18) 45%,
        rgba(210, 180, 222, 0.4) 50%,
        rgba(155, 89, 182, 0.18) 55%,
        transparent 75%
    );
    background-size: 250% 100%;
}
/* R 蓝色偏光 */
.reveal-card-stage.card-rarity-r::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(91, 155, 213, 0.22), rgba(91, 155, 213, 0.03) 55%, transparent 70%);
}
.reveal-card-stage.card-rarity-r::after {
    background: linear-gradient(
        120deg,
        transparent 25%,
        rgba(91, 155, 213, 0.15) 45%,
        rgba(180, 210, 240, 0.35) 50%,
        rgba(91, 155, 213, 0.15) 55%,
        transparent 75%
    );
    background-size: 250% 100%;
}

/* revealGlow keyframes */

/* 各稀有度专属发光呼吸 keyframes（纯外发光 + 内发光，无厚度/边框） */
@keyframes revealGlowUR {
    0%, 100% { box-shadow: 0 0 36px rgba(255,210,102,0.7),   0 0 14px rgba(255,224,102,0.8) inset; }
    50%      { box-shadow: 0 0 130px rgba(255,224,102,1),    0 0 36px rgba(255,248,196,1)   inset; }
}
@keyframes revealGlowSSR {
    0%, 100% { box-shadow: 0 0 36px rgba(255, 80,120,0.7),  0 0 14px rgba(255,224,102,0.75) inset; }
    50%      { box-shadow: 0 0 115px rgba(255, 80,120,1),   0 0 34px rgba(255,248,196,1)   inset; }
}
@keyframes revealGlowSR {
    0%, 100% { box-shadow: 0 0 32px rgba(155, 89,182,0.65),  0 0 14px rgba(255,224,102,0.75) inset; }
    50%      { box-shadow: 0 0 105px rgba(155, 89,182,1),    0 0 32px rgba(255,248,196,1)    inset; }
}
@keyframes revealGlowR {
    0%, 100% { box-shadow: 0 0 26px rgba( 91,155,213,0.6),   0 0 12px rgba(255,224,102,0.7)  inset; }
    50%      { box-shadow: 0 0 82px rgba( 91,155,213,0.95),  0 0 28px rgba(255,248,196,1)    inset; }
}
@keyframes revealGlowN {
    0%, 100% { box-shadow: 0 0 20px rgba(160,160,160,0.5),   0 0 10px rgba(255,224,102,0.6)  inset; }
    50%      { box-shadow: 0 0 60px rgba(160,160,160,0.85),  0 0 24px rgba(255,248,196,1)    inset; }
}

/* ============================================================
   R 卡随机动画 —— 可扩展，每个类对应一种动画
   新增动画：1) 在 gacha.js ANIM_REGISTRY.R 注册新函数
            2) 在下面追加对应 CSS keyframes
   ============================================================ */

/* ---------- R2：旋转光圈 ---------- */
.r-ring-flash {
    position: absolute;
    width: var(--ring-size, 260px);
    height: var(--ring-size, 260px);
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid var(--ring-color, #ffe066);
    box-shadow:
        0 0 20px var(--ring-color, #ffe066),
        inset 0 0 20px var(--ring-color, #ffe066),
        0 0 40px var(--ring-color, #ffe066);
    animation: rRingSpin 2.6s linear forwards;
    opacity: 0.9;
    will-change: transform, opacity;
}
.r-ring-flash:nth-child(2) { opacity: 0.5; animation-delay: 0.3s; }

@keyframes rRingSpin {
    0%   { transform: translate(-50%, -50%) rotate(0deg) scale(0.4);    opacity: 0; }
    15%  { transform: translate(-50%, -50%) rotate(60deg) scale(1.1);   opacity: 1; }
    85%  { transform: translate(-50%, -50%) rotate(540deg) scale(1);    opacity: 0.7; }
    100% { transform: translate(-50%, -50%) rotate(720deg) scale(1.25); opacity: 0; }
}

.r-pulse-dot {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--pulse-color, #ffe066cc) 0%, transparent 70%);
    animation: rPulseBreathe 2.6s ease-out forwards;
    will-change: transform, opacity;
}

@keyframes rPulseBreathe {
    0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    15%  { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
    50%  { transform: translate(-50%, -50%) scale(1);   opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

.r-ring-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffe066;
    box-shadow: 0 0 6px 2px #ffe066;
    animation: rDotTwinkle 2.4s ease-out forwards;
    will-change: transform, opacity;
}

@keyframes rDotTwinkle {
    0%   { opacity: 0;   transform: scale(0.5); }
    20%  { opacity: 1;   transform: scale(1.5); }
    50%  { opacity: 0.7; transform: scale(1); }
    100% { opacity: 0;   transform: scale(0.3); }
}

/* ---------- R3：火花爆炸 ---------- */
.r-spark-particle {
    position: absolute;
    width: 5px;
    height: 5px;
    left: 0;
    top: 0;
    border-radius: 50%;
    background: var(--spark-color, #ffd266);
    box-shadow: 0 0 8px var(--spark-color, #ffd266), 0 0 14px var(--spark-color, #ffd266);
    animation: rSparkBurst 1.6s ease-out var(--spark-delay, 0s) forwards;
}

@keyframes rSparkBurst {
    0%   { transform: translate(0, 0) scale(1);   opacity: 1; }
    40%  { transform: translate(var(--fx), var(--fy)) scale(0.8); opacity: 0.9; }
    100% { transform: translate(var(--fx), var(--fy)) scale(0.2); opacity: 0; }
}

/* ---------- R4：星光场 ---------- */
.r-star-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--star-color, #ffe88a);
    box-shadow: 0 0 6px 1px var(--star-color, #ffe88a);
    animation: rStarFlow 2.4s ease-out forwards;
}

@keyframes rStarFlow {
    0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
    15%  { transform: translate(calc(var(--tx) * 0.15), calc(var(--ty) * 0.15)) scale(1.2); opacity: 1; }
    50%  { transform: translate(calc(var(--tx) * 0.5),  calc(var(--ty) * 0.5))  scale(0.9); opacity: 0.7; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0.3); opacity: 0; }
}

/* ---------- R5：金色光刃交错斩击 ---------- */
.r-light-blade {
    position: absolute;
    width: 6px;
    height: 480px;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%) rotate(var(--blade-angle, 0deg)) scaleX(0);
    background: linear-gradient(to left, transparent 0%, var(--blade-color, #ffe066) 30%, #ffffff 50%, var(--blade-color, #ffe066) 70%, transparent 100%);
    box-shadow:
        0 0 10px var(--blade-color, #ffe066),
        0 0 30px var(--blade-color, #ffe066),
        0 0 60px var(--blade-color, #ffe066);
    animation: rBladeSweep 1.1s ease-out forwards;
    transform-origin: center;
}

@keyframes rBladeSweep {
    0%   { transform: translate(-50%, -50%) rotate(var(--blade-angle, 0deg)) scaleX(0);   opacity: 0; }
    15%  { transform: translate(-50%, -50%) rotate(var(--blade-angle, 0deg)) scaleX(1);  opacity: 1; }
    65%  { transform: translate(-50%, -50%) rotate(var(--blade-angle, 0deg)) scaleX(1);  opacity: 0.8; }
    100% { transform: translate(-50%, -50%) rotate(var(--blade-angle, 0deg)) scaleX(1.2);opacity: 0; }
}

.r-blade-flash {
    position: absolute;
    width: 120px;
    height: 120px;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--flash-color, #fff8c4) 0%, transparent 70%);
    animation: rBladeFlash 1.3s ease-out forwards;
}

@keyframes rBladeFlash {
    0%   { transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
    30%  { transform: translate(-50%, -50%) scale(2.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(3);   opacity: 0; }
}

.r-blade-spark {
    position: absolute;
    width: 3px;
    height: 3px;
    left: 0;
    top: 0;
    border-radius: 50%;
    background: #ffe066;
    box-shadow: 0 0 6px #ffe066;
    animation: rBladeSpark 1.6s ease-out forwards;
}

@keyframes rBladeSpark {
    0%   { transform: translate(0, 0) scale(1);   opacity: 1; }
    100% { transform: translate(var(--sfx), var(--sfy)) scale(0.2); opacity: 0; }
}

/* ---------- R6：金色尘埃涡旋 ---------- */
.r-vortex-core {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--core-color, #ffd266) 0%, transparent 70%);
    box-shadow: 0 0 30px var(--core-color, #ffd266), 0 0 60px var(--core-color, #ffd266);
    animation: rVortexCorePulse 2.4s ease-in-out forwards;
    will-change: transform, opacity;
}

@keyframes rVortexCorePulse {
    0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
    20%  { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
    60%  { transform: translate(-50%, -50%) scale(1);   opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

.r-vortex-ring {
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%) rotate(0deg);
    animation: rVortexSpinFade 2.8s linear forwards;
    will-change: transform, opacity;
}

@keyframes rVortexSpinFade {
    0%   { transform: translate(-50%, -50%) rotate(0deg);        opacity: 0; }
    15%  { transform: translate(-50%, -50%) rotate(45deg);       opacity: 1; }
    80%  { transform: translate(-50%, -50%) rotate(540deg);      opacity: 0.8; }
    100% { transform: translate(-50%, -50%) rotate(calc(720deg * var(--ring-dir, 1))); opacity: 0; }
}

.r-vortex-dust {
    position: absolute;
    width: 4px;
    height: 4px;
    transform: translate(calc(var(--dust-x, 0px) - 50%), calc(var(--dust-y, 0px) - 50%));
    border-radius: 50%;
    background: #ffd266;
    box-shadow: 0 0 6px 2px #ffd266;
    animation: rDustTwinkleFade 2.2s ease-in-out forwards;
    animation-delay: var(--dust-delay, 0s);
    will-change: transform, opacity;
}

@keyframes rDustTwinkleFade {
    0%   { opacity: 0;   transform: translate(calc(var(--dust-x, 0px) - 50%), calc(var(--dust-y, 0px) - 50%)) scale(0.6); }
    20%  { opacity: 1;   transform: translate(calc(var(--dust-x, 0px) - 50%), calc(var(--dust-y, 0px) - 50%)) scale(1.3); }
    60%  { opacity: 0.7; transform: translate(calc(var(--dust-x, 0px) - 50%), calc(var(--dust-y, 0px) - 50%)) scale(1); }
    100% { opacity: 0;   transform: translate(calc(var(--dust-x, 0px) - 50%), calc(var(--dust-y, 0px) - 50%)) scale(0.3); }
}

.r-vortex-sink {
    position: absolute;
    width: 80px;
    height: 80px;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid rgba(255, 210, 102, 0.6);
    animation: rVortexSink 0.8s ease-out forwards;
}

@keyframes rVortexSink {
    0%   { transform: translate(-50%, -50%) scale(2); opacity: 0.8; border-width: 2px; }
    100% { transform: translate(-50%, -50%) scale(0.1); opacity: 0;   border-width: 0; }
}

/* ---------- R7：金色闪电链 ---------- */
.r-flash-bolt {
    position: absolute;
    width: 200px;
    height: 3px;
    left: 0;
    top: 0;
    transform-origin: 0% 50%;
    transform: rotate(var(--bolt-angle, 0deg)) translateX(0) scaleX(0);
    background: linear-gradient(to right, transparent 0%, var(--bolt-color, #ffec8a) 30%, #ffffff 60%, var(--bolt-color, #ffec8a) 100%);
    box-shadow: 0 0 8px var(--bolt-color, #ffec8a), 0 0 20px var(--bolt-color, #ffec8a);
    animation: rBoltStrike 0.5s ease-out forwards;
}

@keyframes rBoltStrike {
    0%   { transform: rotate(var(--bolt-angle, 0deg)) translateX(0) scaleX(0);   opacity: 0; }
    20%  { transform: rotate(var(--bolt-angle, 0deg)) translateX(0) scaleX(1);   opacity: 1; }
    60%  { transform: rotate(var(--bolt-angle, 0deg)) translateX(0) scaleX(1);   opacity: 0.9; }
    100% { transform: rotate(var(--bolt-angle, 0deg)) translateX(0) scaleX(1.1); opacity: 0; }
}

.r-flash-arc {
    position: absolute;
    width: 60px;
    height: 60px;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--arc-color, #fff8c4) 0%, rgba(255,248,196,0.5) 40%, transparent 70%);
    animation: rArcPulse 1.8s ease-out forwards;
}

@keyframes rArcPulse {
    0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
    30%  { transform: translate(-50%, -50%) scale(2);   opacity: 1; }
    60%  { transform: translate(-50%, -50%) scale(1.5); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

.ssr-lid-explode {
    position: absolute;
    top: -25px;
    left: -10px;
    width: 120%;
    height: 30px;
    background: linear-gradient(180deg, #6a4c2a, #4a3518);
    border: 2px solid #ffd266;
    border-radius: 10px 10px 4px 4px;
    transform-origin: bottom center;
    animation: ssrLidExplode 0.8s cubic-bezier(0.5, 0, 0.5, 1) forwards;
    z-index: 4;
}

.ssr-shockwave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 20px solid #ffd266;
    box-shadow: 0 0 80px #ffd266, 0 0 160px rgba(255,210,102,0.6);
    animation: ssrShockwave 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    z-index: 6;
    pointer-events: none;
}

.ssr-multi-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,249,224,0.98), rgba(255,210,102,0.7) 30%, rgba(255,80,120,0.4) 60%, transparent 80%);
    animation: ssrMultiFlash 1.5s ease-out forwards;
    z-index: 5;
    pointer-events: none;
}

.ssr-color-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    box-shadow: 0 0 12px currentColor;
    animation: ssrColorParticle 1.8s ease-out forwards;
    z-index: 7;
}

.ssr-color-particle.gold { background: #ffd266; color: #ffd266; }
.ssr-color-particle.pink { background: #ff5078; color: #ff5078; }
.ssr-color-particle.purple { background: #9b59b6; color: #9b59b6; }
.ssr-color-particle.white { background: #fff9e0; color: #fff9e0; }
.ssr-color-particle.orange { background: #ffb84d; color: #ffb84d; }

.ssr-card-3d-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 230px;
    height: 320px;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.ssr-card-3d {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: ssrCard3D 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.ssr-card-frame {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background: linear-gradient(160deg, #2a1025, #3d1a30);
    border: 3px solid #ff5078;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px;
    text-align: center;
    position: relative;
    box-shadow: 0 0 40px rgba(255,80,120,0.7), 0 0 80px rgba(255,210,102,0.4);
    animation: srCardSurfaceFlow 2s ease-in-out infinite;
}

.ssr-card-frame .ssr-rarity {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 13px;
    color: #ffc3d0;
    font-weight: 800;
    letter-spacing: 2px;
}

.ssr-card-frame .ssr-num {
    position: absolute;
    top: 10px;
    left: 12px;
    font-size: 11px;
    color: rgba(255,255,255,0.5);
}

.ssr-card-frame .ssr-icon {
    width: 115px;
    height: 115px;
    margin-top: 28px;
    filter: drop-shadow(0 4px 20px rgba(255,80,120,0.8));
    display: flex;
    align-items: center;
    justify-content: center;
}
.ssr-card-frame .ssr-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ssr-card-frame .ssr-name {
    font-size: 19px;
    font-weight: 700;
    color: white;
    margin-top: 8px;
}

.ssr-card-frame .ssr-story {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    margin-top: 5px;
    padding: 0 8px;
    line-height: 1.4;
}

.ssr-radial-beams {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 650px;
    height: 650px;
    transform: translate(-50%, -50%);
    z-index: 8;
    pointer-events: none;
}

.ssr-radial-beams.slow {
    animation: ssrRadialBeam 10s linear infinite;
}

.ssr-radial-beams.fast {
    animation: ssrRadialBeam 5s linear infinite reverse;
}

.ssr-radial-beam {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 320px;
    background: linear-gradient(to top, transparent, rgba(255,210,102,0.9), rgba(255,249,224,0.7), transparent);
    transform-origin: bottom center;
    border-radius: 2px;
}

.ssr-radial-beam.pink {
    background: linear-gradient(to top, transparent, rgba(255,80,120,0.7), rgba(255,195,208,0.5), transparent);
}

.ssr-title {
    position: absolute;
    top: 16%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 56px;
    font-weight: 900;
    letter-spacing: 5px;
    text-align: center;
    z-index: 15;
    pointer-events: none;
    white-space: nowrap;
    animation: srTextIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.ssr-title .ssr-title-main {
    display: inline-block;
    background: linear-gradient(90deg, #ffd266, #fff9e0, #ff5078, #ffd266, #fff9e0);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: ssrTextShine 2.5s linear infinite;
    filter: drop-shadow(0 4px 25px rgba(255,210,102,0.9));
}

.ssr-title .ssr-title-sub {
    display: block;
    font-size: 26px;
    color: #ffc3d0;
    margin-top: 4px;
    text-shadow: 0 0 20px rgba(255,80,120,0.8);
    letter-spacing: 12px;
}

.ssr-halo-breath {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 8;
}

.ssr-halo-breath.outer {
    width: 480px;
    height: 480px;
    border: 4px solid rgba(255,210,102,0.5);
    box-shadow: 0 0 60px rgba(255,210,102,0.4), inset 0 0 60px rgba(255,80,120,0.2);
    animation: ssrHaloBreath 2s ease-in-out infinite;
}

.ssr-halo-breath.middle {
    width: 380px;
    height: 380px;
    border: 3px solid rgba(255,80,120,0.5);
    box-shadow: 0 0 40px rgba(255,80,120,0.4);
    animation: ssrHaloBreath 1.6s ease-in-out infinite 0.2s;
}

.ssr-halo-breath.inner {
    width: 280px;
    height: 280px;
    border: 2px solid rgba(255,249,224,0.4);
    animation: ssrHaloBreath 1.3s ease-in-out infinite 0.4s;
}

.ssr-foil {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, #ffd266, #fff9e0, #ffb84d);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    animation: ssrFoilFloat 2.5s ease-out forwards;
    z-index: 11;
    pointer-events: none;
}

.ssr-foil.pink {
    background: linear-gradient(135deg, #ff5078, #ffc3d0, #ff8fa3);
}

.ssr-light-sweep {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280px;
    height: 140px;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, transparent, rgba(255,249,224,0.6), transparent);
    filter: blur(8px);
    animation: ssrLightSweep 1.2s ease-out forwards;
    z-index: 12;
    pointer-events: none;
}

/* ============================================================
   R 卡新动画（参考原型）— 全部 finite forwards，严禁 infinite
   ============================================================ */

/* ---------- R8：粒子爆开 ---------- */
.r-burst-core {
    position: absolute;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #ffe066 40%, transparent 72%);
    box-shadow: 0 0 40px 20px rgba(255,224,102,0.8), 0 0 80px 40px rgba(255,210,102,0.4);
    animation: rBurstCore 0.5s ease-out forwards;
    will-change: transform, opacity;
}
@keyframes rBurstCore {
    0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
    30%  { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
}

.r-burst-particle {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: rBurstParticleFade var(--life, 1s) ease-out forwards;
    will-change: transform, opacity;
}
@keyframes rBurstParticleFade {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--vx)), calc(-50% + var(--vy) + var(--gravity))); opacity: 0; }
}
/* 粒子物理近似：vx/vy 由 CSS 变量提供，drag 用 opacity 衰减模拟 */
.r-burst-particle {
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.r-burst-streak {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,249,224,0.9), transparent);
    transform-origin: left center;
    animation: rBurstStreak 0.8s ease-out forwards;
    will-change: transform, opacity;
}
@keyframes rBurstStreak {
    0%   { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scaleX(0); opacity: 1; }
    30%  { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scaleX(1); }
    100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rot, 0deg)) scaleX(0.3); opacity: 0; }
}

/* ---------- R9：光条纹旋转 ---------- */
.r-light-rays {
    position: absolute;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%) rotate(0deg);
    animation: rRaysSpin 2.4s linear forwards;
    will-change: transform, opacity;
}
.r-light-rays::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 0; height: 0;
    /* 12 条从中心发散的光束 */
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255,249,224,0) 0deg,
        rgba(255,249,224,0) calc(360deg / var(--ray-count, 12) / 2 - 2deg),
        rgba(255,224,102,0.6) calc(360deg / var(--ray-count, 12) / 2),
        rgba(255,224,102,0) calc(360deg / var(--ray-count, 12) / 2 + 4deg),
        rgba(255,224,102,0) calc(360deg / var(--ray-count, 12) - 4deg),
        rgba(255,224,102,0.6) calc(360deg / var(--ray-count, 12) - 2deg),
        rgba(255,249,224,0) calc(360deg / var(--ray-count, 12))
    );
    width: calc(var(--ray-length, 300px) * 2);
    height: calc(var(--ray-length, 300px) * 2);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    filter: blur(12px);
    opacity: 0.7;
}
.r-light-rays::after {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 0; height: 0;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255,249,224,0) 0deg,
        rgba(255,224,102,0.3) calc(360deg / var(--ray-count, 12) / 2 - 3deg),
        rgba(255,224,102,0) calc(360deg / var(--ray-count, 12) / 2 + 1deg)
    );
    width: calc(var(--ray-length, 300px) * 2);
    height: calc(var(--ray-length, 300px) * 2);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0.5;
}

@keyframes rRaysSpin {
    0%   { transform: translate(-50%, -50%) rotate(0deg);   opacity: 0; }
    15%  { transform: translate(-50%, -50%) rotate(60deg);  opacity: 0.9; }
    50%  { transform: translate(-50%, -50%) rotate(360deg); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) rotate(540deg); opacity: 0; }
}

.r-rays-halo {
    position: absolute;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,249,224,0.9) 0%, rgba(255,224,102,0.5) 30%, transparent 70%);
    box-shadow: 0 0 30px rgba(255,224,102,0.6);
    animation: rRaysHalo 2.4s ease-in-out forwards;
    will-change: transform, opacity;
}
@keyframes rRaysHalo {
    0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    15%  { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
    60%  { transform: translate(-50%, -50%) scale(1);   opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
}

/* ---------- R10：暗角 + 能量核心 + 闪爆 ---------- */
.r-vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(0,0,0,0.75) 100%);
    animation: rVignetteIn 2.6s ease-out forwards;
    will-change: opacity;
    z-index: 1000;
}
@keyframes rVignetteIn {
    0%   { opacity: 0; }
    10%  { opacity: 0.8; }
    80%  { opacity: 0.7; }
    100% { opacity: 0; }
}

.r-core-burst {
    position: absolute;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #ffe066 40%, transparent 72%);
    box-shadow: 0 0 30px rgba(255,224,102,0.8), 0 0 60px rgba(255,210,102,0.5);
    filter: blur(1px);
    animation: rCorePulse 2.6s ease-out forwards;
    will-change: transform, opacity;
}
.r-core-burst::after {
    content: '';
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    border: 1.5px solid rgba(247,212,136,0.5);
    animation: rCoreRing 1.1s ease-out forwards;
    will-change: transform, opacity;
}
@keyframes rCorePulse {
    0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
    20%  { transform: translate(-50%, -50%) scale(1.8); opacity: 1; }
    55%  { transform: translate(-50%, -50%) scale(0.9); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
}
@keyframes rCoreRing {
    0%   { transform: scale(0.5); opacity: 0.9; }
    100% { transform: scale(2.2); opacity: 0; }
}

.r-flash-burst {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: #fff;
    mix-blend-mode: screen;
    z-index: 1001;
    animation: rFlashBurst 0.5s ease-out forwards;
    will-change: opacity;
}
@keyframes rFlashBurst {
    0%   { opacity: 0; }
    10%  { opacity: 0.9; }
    30%  { opacity: 0; }
    100% { opacity: 0; }
}

.r-critical-shake {
    position: absolute;
    left: 0; top: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1002;
    animation: rCriticalShake var(--dur, 0.12s) ease-in-out forwards;
    will-change: transform;
}
@keyframes rCriticalShake {
    0%, 100% { transform: translate(0, 0); }
    20%      { transform: translate(-6px, 3px); }
    40%      { transform: translate(5px, -4px); }
    60%      { transform: translate(-4px, 4px); }
    80%      { transform: translate(3px, -3px); }
}

/* ============ R11：雷霆降世 ============ */
@keyframes rThunderCloud {
    0%   { opacity: 0; transform: translateY(-20px) scale(0.8); }
    60%  { opacity: 0.35; transform: translateY(0) scale(1); }
    100% { opacity: 0.2; transform: translateY(0) scale(1.1); }
}
.r-thunder-cloud { animation: rThunderCloud 2.2s ease-out forwards; }

.r-thunder-bolt {
    position: absolute;
    left: 50%;
    top: 0;
    width: 3px;
    height: 0;
    background: linear-gradient(to bottom, #fff 0%, #cfe4ff 40%, transparent 100%);
    box-shadow: 0 0 12px #cfe4ff, 0 0 24px #9ab8e0;
    transform-origin: top center;
    transform: translateX(-50%) rotate(-8deg);
    animation: rThunderBolt 0.55s ease-out forwards;
    opacity: 0;
}
@keyframes rThunderBolt {
    0%   { height: 0; opacity: 0; }
    5%   { height: 0; opacity: 1; }
    8%   { height: 85%; opacity: 1; }
    20%  { height: 90%; opacity: 0.9; }
    30%  { height: 85%; opacity: 1; transform: translateX(-50%) rotate(8deg); }
    40%  { height: 92%; opacity: 0.8; transform: translateX(-50%) rotate(-6deg); }
    100% { height: 0; opacity: 0; }
}

.r-thunder-flash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    animation: rThunderFlash 0.55s ease-out forwards;
}
@keyframes rThunderFlash {
    0%   { opacity: 0; }
    8%   { opacity: 0.9; }
    30%  { opacity: 0.3; }
    100% { opacity: 0; }
}

/* ============ R12：棱镜重组 ============ */
.r-prism-frag {
    left: 50%;
    top: 50%;
    animation: rPrismFly 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes rPrismFly {
    0%   { transform: translate(calc(var(--sx) * 1.5), calc(var(--sy) * 1.5)) rotate(720deg); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}

.r-prism-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: rPrismRing 1.4s ease-out forwards;
    animation-delay: 1.8s;
}
@keyframes rPrismRing {
    0%   { width: 20px; height: 20px; opacity: 0; }
    20%  { opacity: 0.8; }
    100% { width: 260px; height: 202px; opacity: 0; }
}

/* ============ R13：金莲绽放 ============ */
.r-lotus-petal {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    transform-origin: center 0;
    transform: translate(-50%, -10px) rotate(var(--angle)) scale(0);
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: calc(var(--len) * 0.5) solid transparent;
    border-image: linear-gradient(to top, #8b6f3a 0%, #e8b551 40%, #f7d488 70%, #fffae1 100%) 1;
    animation: rLotusPetal 1.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
@keyframes rLotusPetal {
    0%   { transform: translate(-50%, -10px) rotate(var(--angle)) scale(0); }
    30%  { transform: translate(-50%, -10px) rotate(var(--angle)) scale(1.1); }
    100% { transform: translate(-50%, -10px) rotate(var(--angle)) scale(1); }
}

.r-lotus-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, #fffceb 0%, #f7d488 40%, rgba(247,212,136,0) 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: rLotusCore 1.2s ease-out forwards;
    animation-delay: 2.4s;
}
@keyframes rLotusCore {
    0%   { width: 10px; height: 10px; opacity: 0; }
    30%  { opacity: 1; }
    100% { width: 110px; height: 110px; opacity: 0.9; }
}

/* ============ R12：熔金浇铸 ============ */
@keyframes moltenMoldAppear {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    30%  { opacity: 1; }
    100% { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
}
@keyframes moltenRise {
    0%   { height: 0; opacity: 0; }
    15%  { opacity: 1; }
    100% { height: 100%; opacity: 0.95; }
}
@keyframes moltenSurface {
    0%, 100% { transform: translateY(-2px) scaleY(1); }
    50%      { transform: translateY(1px) scaleY(1.3); }
}
@keyframes moltenSpark {
    0%   { opacity: 0; transform: rotate(var(--ang)) translate(0, 0) scale(0); }
    15%  { opacity: 1; transform: rotate(var(--ang)) translate(0, -10px) scale(1.3); }
    100% { opacity: 0; transform: rotate(var(--ang)) translate(calc(var(--dist) * 0.3), calc(-1 * var(--dist))) scale(0.3); }
}
@keyframes moltenCool {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}