/* 뽑기 애니메이션 */
@keyframes gachaBoxShake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    10% { transform: translateX(-10px) rotate(-2deg); }
    20% { transform: translateX(10px) rotate(2deg); }
    30% { transform: translateX(-10px) rotate(-2deg); }
    40% { transform: translateX(10px) rotate(2deg); }
    50% { transform: translateX(-5px) rotate(-1deg); }
    60% { transform: translateX(5px) rotate(1deg); }
    70% { transform: translateX(-5px) rotate(-1deg); }
    80% { transform: translateX(5px) rotate(1deg); }
    90% { transform: translateX(-2px) rotate(0deg); }
}

@keyframes gachaBoxOpen {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(5deg); }
    50% { transform: scale(1.2) rotate(-5deg); }
    75% { transform: scale(1.15) rotate(2deg); }
    100% { transform: scale(1.3) rotate(0deg); opacity: 0; }
}

@keyframes prizeReveal {
    0% { 
        transform: scale(0) rotate(180deg);
        opacity: 0;
    }
    50% { 
        transform: scale(1.3) rotate(90deg);
        opacity: 0.7;
    }
    100% { 
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes sparkle {
    0%, 100% { 
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% { 
        transform: scale(1) rotate(180deg);
        opacity: 1;
    }
}

@keyframes rainbowGlow {
    0% { box-shadow: 0 0 20px rgba(255, 0, 0, 0.6); }
    16.66% { box-shadow: 0 0 20px rgba(255, 165, 0, 0.6); }
    33.33% { box-shadow: 0 0 20px rgba(255, 255, 0, 0.6); }
    50% { box-shadow: 0 0 20px rgba(0, 255, 0, 0.6); }
    66.66% { box-shadow: 0 0 20px rgba(0, 0, 255, 0.6); }
    83.33% { box-shadow: 0 0 20px rgba(75, 0, 130, 0.6); }
    100% { box-shadow: 0 0 20px rgba(238, 130, 238, 0.6); }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOutUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

@keyframes slideOutDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
    70% {
        transform: scale(0.95);
        opacity: 0.9;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

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

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

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

@keyframes wiggle {
    0%, 7% { transform: rotateZ(0); }
    15% { transform: rotateZ(-15deg); }
    20% { transform: rotateZ(10deg); }
    25% { transform: rotateZ(-10deg); }
    30% { transform: rotateZ(6deg); }
    35% { transform: rotateZ(-4deg); }
    40%, 100% { transform: rotateZ(0); }
}

/* 등급별 애니메이션 */
.prize-grade-1 {
    animation: rainbowGlow 2s infinite;
}

.prize-grade-2 {
    animation: pulse 2s infinite;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

.prize-grade-3 {
    animation: float 3s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(138, 43, 226, 0.6);
}

.prize-grade-4 {
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.6);
}

.prize-grade-5 {
    box-shadow: 0 0 5px rgba(108, 117, 125, 0.6);
}

/* 뽑기 화면 애니메이션 클래스 */
.gacha-animation {
    animation: gachaBoxShake 1s ease-in-out;
}

.gacha-opening {
    animation: gachaBoxOpen 0.8s ease-in-out forwards;
}

.prize-revealing {
    animation: prizeReveal 1s ease-out forwards;
}

.sparkle-effect {
    position: relative;
    overflow: visible;
}

.sparkle-effect::before,
.sparkle-effect::after {
    content: '✨';
    position: absolute;
    font-size: 24px;
    animation: sparkle 1.5s infinite;
}

.sparkle-effect::before {
    top: -10px;
    left: -10px;
    animation-delay: 0.3s;
}

.sparkle-effect::after {
    bottom: -10px;
    right: -10px;
    animation-delay: 0.8s;
}

/* 10+1 뽑기 애니메이션 */
.multi-gacha-item {
    animation: slideInUp 0.5s ease-out forwards;
}

.multi-gacha-item:nth-child(1) { animation-delay: 0.1s; }
.multi-gacha-item:nth-child(2) { animation-delay: 0.2s; }
.multi-gacha-item:nth-child(3) { animation-delay: 0.3s; }
.multi-gacha-item:nth-child(4) { animation-delay: 0.4s; }
.multi-gacha-item:nth-child(5) { animation-delay: 0.5s; }
.multi-gacha-item:nth-child(6) { animation-delay: 0.6s; }
.multi-gacha-item:nth-child(7) { animation-delay: 0.7s; }
.multi-gacha-item:nth-child(8) { animation-delay: 0.8s; }
.multi-gacha-item:nth-child(9) { animation-delay: 0.9s; }
.multi-gacha-item:nth-child(10) { animation-delay: 1.0s; }
.multi-gacha-item:nth-child(11) { animation-delay: 1.1s; }

/* 가위바위보 애니메이션 */
.rps-choice {
    transition: all 0.3s ease;
}

.rps-choice:hover {
    transform: scale(1.1);
}

.rps-choice.selected {
    animation: pulse 0.5s ease-in-out;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.6);
}

.rps-computer-choice {
    animation: wiggle 2s ease-in-out;
}

/* 결제 애니메이션 */
.payment-processing {
    animation: pulse 1s infinite;
}

.payment-success {
    animation: bounceIn 0.8s ease-out;
}

/* 인벤토리 애니메이션 */
.inventory-item {
    animation: fadeIn 0.5s ease-out;
}

.inventory-item.selected {
    animation: pulse 1s infinite;
    border: 2px solid var(--primary-gradient-end);
}

.inventory-item.removing {
    animation: zoomOut 0.5s ease-out forwards;
}

/* 로딩 애니메이션 */
.loading-dots::after {
    content: '';
    animation: loading-dots 1.5s infinite;
}

@keyframes loading-dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}

/* 성공/실패 애니메이션 */
.success-animation {
    animation: bounceIn 0.8s ease-out;
}

.error-animation {
    animation: wiggle 0.6s ease-out;
}

/* 호버 효과 비활성화 (모바일) */
@media (hover: none) and (pointer: coarse) {
    .card:hover,
    .btn:hover,
    .rps-choice:hover {
        transform: none;
        box-shadow: inherit;
    }
}