/* フィードバックアニメーション */
.feedback {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 40px;
    border-radius: 10px;
    color: white;
    font-weight: bold;
    font-size: 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

.feedback.show {
    opacity: 1;
}

.feedback.correct {
    background-color: #4CAF50;
}

.feedback.incorrect {
    background-color: #f44336;
}

/* 問題切り替えアニメーション */
@keyframes slideOut {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

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

    100% {
        transform: translateX(0);
    }
}

.problem.slide-out {
    animation: slideOut 0.3s ease-out forwards;
    pointer-events: none;
}

.problem.slide-in {
    animation: slideIn 0.3s ease-out forwards;
    pointer-events: none;
}

/* 数字入力アニメーション */
@keyframes popIn {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.answer-pop {
    animation: popIn 0.2s ease-out;
}

/* レベル変更アニメーション */
@keyframes levelChange {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.level-update {
    animation: levelChange 0.3s ease-out;
}

/* ボタンのタップエフェクト */
.keypad button {
    transition: transform 0.1s ease;
}

.keypad button:active {
    transform: scale(0.95);
}

.submit {
    transition: transform 0.1s ease;
}

.submit:active {
    transform: scale(0.98);
}