/* effect.css（エフェクトスタイル）- テーマ変数対応版 */

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
    animation: particleFade 1s ease-out forwards;
    background-color: var(--accent-secondary);
}

@keyframes particleFade {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx, 0), var(--ty, 0)) scale(0);
    }
}

.hit-effect {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    pointer-events: none;
    animation: hitExpand 0.3s ease-out forwards;
}

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

/* コンボフロートテキストアニメーション */
@keyframes floatTextFade {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -100%) scale(1.2);
    }
}

/* コンボ5: 金色オーラ */
.ball.combo-5::after {
    content: "";
    position: absolute;
    top: -4px; /* 調整 */
    left: -4px; /* 調整 */
    width: 24px; /* ボール本体より少し大きめに */
    height: 24px; /* ボール本体より少し大きめに */
    border: 2px solid var(--powerup-shrink); /* 黄色系 */
    border-radius: 50%;
    animation: comboPulseGold 1s infinite;
    box-shadow: 0 0 10px var(--powerup-shrink); /* 控えめに */
}

@keyframes comboPulseGold {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.6; /* より透明に */
    }
    50% {
        transform: scale(1.05); /* 拡大率を控えめに */
        opacity: 0.8;
    }
}

/* コンボ10: 炎エフェクト */
.ball.combo-10 {
    box-shadow:
        0 0 15px var(--block-strong),
        0 0 30px var(--accent-secondary),
        0 0 45px var(--block-strong);
    animation: comboFire 0.8s infinite alternate;
}

@keyframes comboFire {
    0% {
        box-shadow:
            0 0 10px var(--block-strong),
            0 0 20px var(--accent-secondary),
            0 0 30px var(--block-strong);
    }
    100% {
        box-shadow:
            0 0 15px var(--accent-secondary),
            0 0 25px var(--block-strong),
            0 0 35px var(--accent-secondary);
    }
}

/* コンボ15: 電撃エフェクト */
.ball.combo-15 {
    box-shadow:
        0 0 15px var(--powerup-slow),
        0 0 30px var(--accent-secondary),
        0 0 45px var(--powerup-slow);
    animation: comboElectric 0.5s infinite alternate;
}

@keyframes comboElectric {
    0% {
        box-shadow:
            0 0 10px var(--powerup-slow),
            0 0 20px var(--accent-secondary),
            0 0 30px var(--powerup-slow);
        transform: scale(1);
    }
    100% {
        box-shadow:
            0 0 15px var(--accent-secondary),
            0 0 25px var(--powerup-slow),
            0 0 35px var(--accent-secondary);
        transform: scale(1.02); /* 控えめに */
    }
}

/* コンボ20: 虹色エフェクト */
.ball.combo-20 {
    background: radial-gradient(
        circle at 30% 30%,
        var(--ball-color),
        var(--accent-secondary) 20%,
        var(--powerup-shrink) 40%,
        var(--powerup-slow) 60%,
        var(--powerup-multiball) 80%
    );
    animation: comboRainbow 2s linear infinite;
    box-shadow:
        0 0 20px var(--accent-secondary),
        0 0 40px var(--powerup-shrink),
        0 0 60px var(--powerup-slow);
}

@keyframes comboRainbow {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

/* コンボ表示スタイル */
#combo-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 8px 15px;
    background: var(--ui-background);
    border-radius: 8px;
    margin: 0 auto 15px auto;
    max-width: 600px;
    width: 100%;
    font-size: 0.9em;
    color: var(--accent-secondary);
    font-weight: bold;
    border: 1px solid var(--ui-border);
}

#combo-count,
#combo-multiplier {
    font-size: 1em;
}

/* コンボ表示の色変化 */
#combo-count {
    transition: color 0.3s ease;
}

#combo-display:has(~ .combo-5) #combo-count {
    color: var(--powerup-shrink);
}

#combo-display:has(~ .combo-10) #combo-count {
    color: var(--block-strong);
    text-shadow: 0 0 10px var(--block-strong);
}

#combo-display:has(~ .combo-15) #combo-count {
    color: var(--powerup-slow);
    text-shadow: 0 0 10px var(--powerup-slow);
}

#combo-display:has(~ .combo-20) #combo-count {
    background: linear-gradient(
        45deg,
        var(--accent-secondary),
        var(--powerup-shrink),
        var(--powerup-slow),
        var(--powerup-multiball)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

/* メインボール用コンボエフェクト - サイズ変化を控えめに */
#ball.combo-5 {
    transform: scale(1);
}

#ball.combo-10 {
    transform: scale(1);
}

#ball.combo-15 {
    transform: scale(1);
}

#ball.combo-20 {
    transform: scale(1);
}

/* 追加ボール用コンボエフェクト - サイズ変化を控えめに */
.ball.combo-5 {
    transform: scale(1);
}

.ball.combo-10 {
    transform: scale(1);
}

.ball.combo-15 {
    transform: scale(1);
}

.ball.combo-20 {
    transform: scale(1);
}

/* 爆発エフェクト */
.explosion-effect {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--block-bomb), var(--accent-secondary), var(--accent-primary), transparent);
    animation: explosionExpand 0.6s ease-out forwards;
    pointer-events: none;
    z-index: 15;
    mix-blend-mode: screen;
}

@keyframes explosionExpand {
    0% {
        transform: scale(0);
        opacity: 1;
        box-shadow: 0 0 20px var(--block-bomb);
    }
    50% {
        transform: scale(4);
        opacity: 0.8;
        box-shadow: 0 0 40px var(--accent-secondary);
    }
    100% {
        transform: scale(8);
        opacity: 0;
        box-shadow: 0 0 60px var(--accent-primary);
    }
}

/* 衝撃波エフェクト */
.shockwave-effect {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: shockwaveExpand 0.8s ease-out forwards;
    pointer-events: none;
    z-index: 14;
}

@keyframes shockwaveExpand {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(12);
        opacity: 0;
    }
}

/* テーマ切り替え時のスムーズな遷移 */
.particle,
.hit-effect,
.explosion-effect,
.shockwave-effect,
.ball {
    transition:
        background 0.5s ease,
        box-shadow 0.5s ease,
        border-color 0.5s ease;
}