/* ========== 就绪状态：金色呼吸光晕 ========== */
#clickBtn.burst-ready {
    animation: readyGlow 1.5s ease-in-out infinite;
    border: 2px solid #ffbb00;
}

@keyframes readyGlow {
    0%   { box-shadow: 0 0 8px #ffbb00, 0 0 20px rgba(255, 187, 0, 0.5); }
    50%  { box-shadow: 0 0 20px #ffbb00, 0 0 40px rgba(255, 187, 0, 0.8); }
    100% { box-shadow: 0 0 8px #ffbb00, 0 0 20px rgba(255, 187, 0, 0.5); }
}

/* ========== 爆发状态：流光 + 橙红边框抖动 ========== */
#clickBtn.burst-active {
    background: linear-gradient(90deg, #ff8c42, #ff416c, #ff8c42);
    background-size: 200% 100%;
    animation: burstShimmer 0.6s linear infinite, burstShake 0.2s infinite;
    border: 2px solid #ff3b3b;
    color: #fff;
    text-shadow: 0 0 6px black;
}

@keyframes burstShimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes burstShake {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(-2px, 1px); }
    50%      { transform: translate(2px, -1px); }
    75%      { transform: translate(-1px, -1px); }
}

/* ========== 触发瞬间：轻微震动 + 屏幕闪烁 ========== */
#clickBtn.burst-trigger {
    animation: triggerShake 0.25s ease-out;
}

@keyframes triggerShake {
    0%   { transform: translate(0, 0); }
    15%  { transform: translate(-4px, 2px); }
    30%  { transform: translate(4px, -2px); }
    45%  { transform: translate(-2px, -1px); }
    60%  { transform: translate(2px, 1px); }
    75%  { transform: translate(-1px, 0); }
    100% { transform: translate(0, 0); }
}

/* 屏幕闪烁：通过一个覆盖全屏的半透明层实现 */
#burstFlash {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255, 165, 0, 0.25);
    pointer-events: none;
    z-index: 9999;
    animation: flashFade 0.25s ease-out forwards;
}

@keyframes flashFade {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}