/* ゲームオーバーエフェクト */
@keyframes gameOver {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    20% {
        transform: scale(1.3);
        opacity: 1;
    }
    100% {
        transform: scale(0.8);
        opacity: 0;
    }
}

@keyframes shakeScreen {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* ノートヒットエフェクト - 判定に応じて異なるエフェクト */
@keyframes perfectHit {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        box-shadow: 0 0 20px rgba(5, 217, 255, 1), 0 0 40px rgba(5, 217, 255, 0.8);
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
        box-shadow: 0 0 40px rgba(5, 217, 255, 0), 0 0 60px rgba(5, 217, 255, 0);
    }
}

@keyframes greatHit {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        box-shadow: 0 0 20px rgba(20, 245, 179, 1), 0 0 40px rgba(20, 245, 179, 0.8);
    }
    100% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
        box-shadow: 0 0 40px rgba(20, 245, 179, 0), 0 0 60px rgba(20, 245, 179, 0);
    }
}

@keyframes goodHit {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        box-shadow: 0 0 20px rgba(255, 236, 68, 1), 0 0 40px rgba(255, 236, 68, 0.8);
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
        box-shadow: 0 0 40px rgba(255, 236, 68, 0), 0 0 60px rgba(255, 236, 68, 0);
    }
}

@keyframes missHit {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        background: linear-gradient(to right, #ff2a6d, #ff0000);
        box-shadow: 0 0 20px rgba(255, 42, 109, 1), 0 0 40px rgba(255, 42, 109, 0.8);
    }
    100% {
        transform: translate(-50%, -50%) scale(1.2) rotate(45deg);
        opacity: 0;
        background: linear-gradient(to right, #ff2a6d, #ff0000);
        box-shadow: 0 0 40px rgba(255, 42, 109, 0), 0 0 60px rgba(255, 42, 109, 0);
    }
}

/* 判定テキストのアニメーション */
@keyframes perfectText {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes greatText {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes goodText {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

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

/* コンボ増加時のエフェクト */
@keyframes comboUp {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
        text-shadow: 0 0 15px rgba(255, 42, 109, 1), 0 0 30px rgba(255, 42, 109, 0.7);
    }
    100% {
        transform: scale(1);
    }
}

/* ヒットエフェクトのパーティクル */
@keyframes particle {
    0% {
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0);
        opacity: 0;
    }
}

/* スクリーンフラッシュ */
@keyframes screenFlash {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
    }
}

/* パーフェクトヒット時の波紋 */
@keyframes ripple {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
        border-width: 1px;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
        border-width: 3px;
    }
}

/* 各判定クラス用のスタイル */
.note-hit-perfect {
    animation: perfectHit 0.4s forwards;
}

.note-hit-great {
    animation: greatHit 0.4s forwards;
}

.note-hit-good {
    animation: goodHit 0.4s forwards;
}

.note-hit-miss {
    animation: missHit 0.4s forwards;
}

/* 判定テキストのスタイル */
.judgment.perfect {
    animation: perfectText 0.8s forwards;
}

.judgment.great {
    animation: greatText 0.8s forwards;
}

.judgment.good {
    animation: goodText 0.8s forwards;
}

.judgment.miss {
    animation: missText 0.8s forwards;
}

/* コンボ増加アニメーション */
.combo-up {
    animation: comboUp 0.3s;
}

/* フラッシュエフェクト */
.screen-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    pointer-events: none;
    z-index: 100;
    opacity: 0;
}

.screen-flash-perfect {
    animation: screenFlash 0.3s;
    background-color: rgba(5, 217, 255, 0.15);
}

.screen-flash-great {
    animation: screenFlash 0.3s;
    background-color: rgba(20, 245, 179, 0.15);
}

/* パーフェクトヒット時の波紋 */
.perfect-ripple {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(5, 217, 255, 0.8);
    box-shadow: 0 0 10px rgba(5, 217, 255, 0.5);
    pointer-events: none;
    animation: ripple 0.6s forwards;
}

/* カウントダウン表示 */
#countdown {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 120px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.8);
    z-index: 100;
    animation: countdownPulse 1s infinite;
}

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

.hidden {
    display: none !important;
}