/* FC像素动画效果 */

/* 闪烁动画（FC经典） */
@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.blink {
    animation: blink 1s steps(2, start) infinite;
}

/* 跳动动画 */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.bounce {
    animation: bounce 1s ease-in-out infinite;
}

/* 浮动动画 */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.float {
    animation: float 2s ease-in-out infinite;
}

/* 心跳动画 */
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    10% { transform: scale(1.1); }
    20% { transform: scale(1); }
    30% { transform: scale(1.1); }
    40% { transform: scale(1); }
}

/* 摇晃动画（错误提示）*/
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.3s;
}

/* 脉冲动画（正确提示）*/
@keyframes correctPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); box-shadow: 0 0 20px #00FC00; }
    100% { transform: scale(1); }
}

/* COMBO显示动画 */
@keyframes comboShow {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* 彩虹文字动画 */
@keyframes rainbow {
    0% { color: #FC0000; }
    16% { color: #FCA044; }
    33% { color: #FCFC00; }
    50% { color: #00FC00; }
    66% { color: #00FCFC; }
    83% { color: #0000FC; }
    100% { color: #FC0000; }
}

/* 像素爆炸动画 */
@keyframes pixelExplode {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.8;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.pixel-explode {
    animation: pixelExplode 0.5s;
}

/* 烟花动画 */
@keyframes firework {
    0% {
        transform: translateY(0) scale(0);
        opacity: 0;
    }
    50% {
        transform: translateY(-30px) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-50px) scale(0.5);
        opacity: 0;
    }
}

.firework {
    animation: firework 1s infinite;
}

/* 星星闪烁 */
@keyframes starTwinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.star-twinkle {
    animation: starTwinkle 1.5s ease-in-out infinite;
}

/* 滑入动画 */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in {
    animation: slideIn 0.5s;
}

/* 淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.5s;
}

/* 淡出动画 */
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.fade-out {
    animation: fadeOut 0.5s;
}

/* 旋转动画 */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.rotate {
    animation: rotate 2s linear infinite;
}

/* 脉冲动画 */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.pulse {
    animation: pulse 1s ease-in-out infinite;
}

/* 缩放动画 */
@keyframes scaleUp {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

.scale-up {
    animation: scaleUp 0.3s ease-out;
}

/* 像素粒子扩散 */
@keyframes particleSpread {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty));
        opacity: 0;
    }
}

.particle {
    animation: particleSpread 1s ease-out forwards;
}

/* 打字机光标 */
@keyframes cursorBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.typing-cursor::after {
    content: '▮';
    animation: cursorBlink 0.8s steps(2) infinite;
}

/* 通关闪烁 */
@keyframes clearFlash {
    0%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
    50% { opacity: 1; }
}

.clear-flash {
    animation: clearFlash 0.5s 3;
}

/* 道具获得动画 */
@keyframes itemGet {
    0% {
        transform: translateY(50px) scale(0);
        opacity: 0;
    }
    50% {
        transform: translateY(0) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.item-get {
    animation: itemGet 0.5s ease-out;
}

/* 按钮按下动画 */
@keyframes buttonPress {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.95); }
}

.button-press {
    animation: buttonPress 0.1s;
}

/* 分数增加动画 */
@keyframes scoreIncrease {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-50px);
        opacity: 0;
        color: #FCFC00;
    }
}

.score-increase {
    animation: scoreIncrease 1s ease-out;
}

/* 屏幕转场动画 */
@keyframes screenTransition {
    0% {
        clip-path: inset(0 0 0 0);
    }
    100% {
        clip-path: inset(0 100% 0 0);
    }
}

.screen-transition {
    animation: screenTransition 0.5s ease-in-out;
}

/* 像素化消失效果 */
@keyframes pixelDissolve {
    0% {
        filter: blur(0px);
        opacity: 1;
    }
    50% {
        filter: blur(5px);
    }
    100% {
        filter: blur(10px);
        opacity: 0;
    }
}

.pixel-dissolve {
    animation: pixelDissolve 1s ease-out;
}

/* 抖动效果 */
@keyframes vibrate {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-2px, -2px); }
    20% { transform: translate(2px, 2px); }
    30% { transform: translate(-2px, 2px); }
    40% { transform: translate(2px, -2px); }
    50% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    70% { transform: translate(-2px, 2px); }
    80% { transform: translate(2px, -2px); }
    90% { transform: translate(-2px, -2px); }
}

.vibrate {
    animation: vibrate 0.3s;
}

/* 波浪效果 */
@keyframes wave {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

.wave {
    animation: wave 1s ease-in-out infinite;
    transform-origin: center;
}

/* 渐变背景动画 */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.gradient-shift {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

/* ===== 消消乐专用动画 ===== */

/* 单元格消除动画 */
@keyframes removeCell {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3) rotate(10deg);
        opacity: 0.8;
    }
    100% {
        transform: scale(0) rotate(45deg);
        opacity: 0;
    }
}

/* 单元格下落动画 */
@keyframes dropCell {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    60% {
        transform: translateY(10%);
        opacity: 1;
    }
    80% {
        transform: translateY(-5%);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 提示脉冲动画 */
@keyframes hintPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 25px rgba(255, 105, 180, 0.9);
    }
}

/* 奖励照片出现动画 */
@keyframes rewardAppear {
    0% {
        transform: scale(0) rotate(-10deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.1) rotate(3deg);
    }
    70% {
        transform: scale(0.95) rotate(-2deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* 选中元素脉动 */
@keyframes selectedPulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(0, 252, 0, 0.5);
        border-color: #00FC00;
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 252, 0, 0.9);
        border-color: #00FF00;
    }
}

/* 匹配成功闪光 */
@keyframes matchFlash {
    0% {
        background-color: transparent;
    }
    50% {
        background-color: rgba(252, 252, 0, 0.5);
    }
    100% {
        background-color: transparent;
    }
}

/* 连消加分浮动 */
@keyframes scoreFloat {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-80px) scale(1.5);
        opacity: 0;
    }
}

/* 元素交换动画 */
@keyframes swapLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

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

@keyframes swapUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

@keyframes swapDown {
    0% { transform: translateY(0); }
    100% { transform: translateY(100%); }
}

/* 大消除闪屏效果 */
@keyframes bigMatch {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.5);
    }
}

.big-match {
    animation: bigMatch 0.3s ease-in-out;
}

/* 目标达成庆祝 */
@keyframes celebrate {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.1) rotate(-5deg);
    }
    50% {
        transform: scale(1.2) rotate(0deg);
    }
    75% {
        transform: scale(1.1) rotate(5deg);
    }
}

.celebrate {
    animation: celebrate 0.5s ease-in-out;
}