/* ============================================================
   effects.css —— 按钮状态类 / 领域文字 / 死 / 胜利弹窗
   ============================================================ */

/* ---- 按钮激活 / 状态 ---- */
.sprintBtn.active, .actionBtn.active {
    border-color: var(--accent); color: var(--accent);
    background: rgba(25, 25, 32, 0.85);
    box-shadow: 0 0 15px var(--accent);
}
.actionBtn.redActive { border-color: var(--accent); color: var(--accent); background: rgba(30, 20, 22, 0.85); box-shadow: 0 0 18px var(--accent); }
.actionBtn.ziCharging {
    border-color: var(--accent); color: #f0e8ff;
    background: rgba(30, 25, 40, 0.9);
    box-shadow: 0 0 22px var(--accent), inset 0 0 12px var(--accent);
}
.actionBtn.blocking { border-color: #4ea8ff; color: #4ea8ff; background: rgba(30, 50, 80, 0.85); box-shadow: 0 0 18px rgba(78, 168, 255, 0.7); }
.actionBtn.broken { border-color: #c0392b; color: #c0392b; background: rgba(80, 30, 30, 0.85); box-shadow: 0 0 18px rgba(192, 57, 43, 0.7); }
.sprintBtn.exhausted { border-color: #c0392b; color: #c0392b; background: rgba(80, 30, 30, 0.8); box-shadow: 0 0 15px rgba(192, 57, 43, 0.5); }
.actionBtn.disabled { opacity: 0.4; pointer-events: none; }
.actionBtn.healingActive { border-color: #4ade80; color: #bbf7d0; background: rgba(20, 60, 30, 0.85); box-shadow: 0 0 18px rgba(74, 222, 128, 0.8); }
.actionBtn.wjActive { border-color: #fff; color: #fff; background: rgba(80, 80, 100, 0.85); box-shadow: 0 0 22px rgba(255,255,255,0.8), inset 0 0 12px rgba(200,200,255,0.6); }
.actionBtn.domainReady { border-color: #c084fc; color: #e9d5ff; background: rgba(60, 20, 90, 0.85); box-shadow: 0 0 22px rgba(192,132,252,0.9), inset 0 0 12px rgba(150,80,220,0.7); }
.actionBtn.simpleReady {
    border-color: #4ea8ff; color: #cce8ff;
    background: rgba(20, 40, 80, 0.85);
    box-shadow: 0 0 22px rgba(78, 168, 255, 0.95), inset 0 0 12px rgba(78, 168, 255, 0.6);
}
.actionBtn.simpleActive {
    border-color: #aaddff; color: #ffffff;
    background: rgba(40, 80, 140, 0.95);
    box-shadow: 0 0 28px rgba(170, 221, 255, 0.95), inset 0 0 16px rgba(78, 168, 255, 0.7);
    animation: phasePulse 0.6s ease-in-out infinite;
}
.actionBtn.sixEyesActive {
    border-color: #4ea8ff; color: #cce8ff;
    background: rgba(20, 40, 80, 0.85);
    box-shadow: 0 0 22px rgba(78, 168, 255, 0.95), inset 0 0 12px rgba(78, 168, 255, 0.6);
}
.actionBtn.parsingActive {
    border-color: #c084fc; color: #e9d5ff;
    background: rgba(60, 20, 90, 0.9);
    box-shadow: 0 0 22px rgba(192, 132, 252, 0.95), inset 0 0 12px rgba(150, 80, 220, 0.6);
    animation: phasePulse 0.5s ease-in-out infinite;
}
.actionBtn.adaptReady {
    border-color: #ffdd44; color: #ffdd44;
    background: rgba(60, 50, 10, 0.85);
    box-shadow: 0 0 22px rgba(255, 221, 68, 0.9), inset 0 0 12px rgba(255, 221, 68, 0.6);
}
.actionBtn.boneCharging {
    border-color: #ffffff; color: #cceeff;
    background: rgba(60, 80, 120, 0.85);
    box-shadow: 0 0 22px rgba(255, 255, 255, 0.85), inset 0 0 12px rgba(200, 220, 255, 0.5);
}
.actionBtn.tenseiReady {
    border-color: #ffdd44; color: #ffdd44;
    background: rgba(60, 50, 10, 0.85);
    box-shadow: 0 0 22px rgba(255, 221, 68, 0.9), inset 0 0 12px rgba(255, 221, 68, 0.6);
}
.actionBtn.mahoActive { border-color: #ffdd44; color: #ffdd44; background: rgba(50, 40, 10, 0.85); box-shadow: 0 0 18px rgba(255, 221, 68, 0.7); }

.actionBtn.tenzanActive {
    border-color: #aaddff; color: #ffffff;
    background: rgba(60, 30, 120, 0.95);
    box-shadow: 0 0 30px #7744dd, inset 0 0 20px #aaddff;
    animation: phasePulse 0.5s ease-in-out infinite;
}
.actionBtn.tdmjActive {
    border-color: #dd88ff; color: #ffffff;
    background: rgba(80, 20, 140, 0.95);
    box-shadow: 0 0 36px #aa44ff, inset 0 0 24px #dd88ff;
    animation: phasePulse 0.4s ease-in-out infinite;
}
.actionBtn.tdmjTauntHint {
    border-color: #ffdd44; color: #ffdd44;
    background: rgba(60, 40, 10, 0.9);
    box-shadow: 0 0 22px rgba(255, 221, 68, 0.85), inset 0 0 12px rgba(255, 221, 68, 0.5);
    animation: phasePulse 0.7s ease-in-out infinite;
}
.actionBtn.phasePerfect {
    border-color: #aaddff; color: #ffffff;
    background: rgba(60, 30, 120, 0.95);
    box-shadow: 0 0 30px #7744dd, inset 0 0 20px #aaddff;
    animation: phasePulse 0.5s ease-in-out infinite;
}
@keyframes phasePulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

/* 蓄力时按钮高亮（死） */
.actionBtn.deathReady {
    border-color: #ff2020; color: #ff4040;
    background: rgba(40, 0, 0, 0.85);
    box-shadow: 0 0 22px rgba(255, 32, 32, 0.9),
                inset 0 0 14px rgba(255, 32, 32, 0.6);
}
.actionBtn.deathCharging {
    border-color: #ff8080; color: #fff;
    background: rgba(80, 0, 0, 0.95);
    box-shadow: 0 0 30px #ff2020, inset 0 0 20px #ff2020;
    animation: deathBtnPulse 0.5s ease-in-out infinite;
}
@keyframes deathBtnPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

/* ---- 领域字幕 ---- */
#domainText {
    position: absolute; top: 42%; left: 50%;
    transform: translate(-50%, -50%);
    color: #4ea8ff; font-size: 54px; font-weight: 900;
    letter-spacing: 14px;
    text-shadow: 0 0 20px currentColor, 0 0 45px currentColor, 3px 3px 0 #000, -2px -2px 0 #000;
    display: none; pointer-events: none; z-index: 50;
    text-align: center; white-space: nowrap; opacity: 1;
}

/* ---- 胜利弹窗 ---- */
#victoryOverlay {
    position: absolute; inset: 0; display: none;
    flex-direction: column; align-items: center; justify-content: center;
    z-index: 60; background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.victoryTitle {
    color: #fff; font-size: 64px; font-weight: 900;
    letter-spacing: 12px;
    text-shadow: 3px 3px 0 #c0392b, 6px 6px 0 rgba(0,0,0,0.6), 0 0 30px rgba(255,200,100,0.5);
    margin-bottom: 30px;
    animation: victoryPop 0.45s ease-out;
}
@keyframes victoryPop {
    0%   { transform: scale(0.5); opacity: 0; }
    70%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.victoryQuote {
    color: #c9d6ff; font-size: 22px; font-weight: bold;
    letter-spacing: 3px; margin-bottom: 60px;
    text-shadow: 0 0 12px rgba(120, 160, 255, 0.7);
    padding: 0 40px; text-align: center;
    font-style: italic;
    animation: quoteFade 0.8s ease-out 0.3s backwards;
}
.victoryStats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 40px;
    font-size: 16px;
    letter-spacing: 2px;
    min-width: 340px;
    animation: quoteFade 0.8s ease-out 0.15s backwards;
}
.victoryStats .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 16px;
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid #444;
    border-radius: 4px;
}
.victoryStats .row.winner {
    border-color: #4ade80;
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.4);
}
.victoryStats .row.loser {
    opacity: 0.6;
}
.victoryStats .name {
    color: #fff;
    font-weight: bold;
}
.victoryStats .hp {
    color: #4ade80;
    font-weight: bold;
}
.victoryStats .row.loser .hp {
    color: #ef4444;
}
@keyframes quoteFade {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.victoryBtns { display: flex; flex-direction: column; gap: 16px; pointer-events: auto; }
.victoryBtn {
    width: 320px; height: 60px;
    background: transparent; border: 2px solid #fff;
    color: #fff; font-size: 20px; font-weight: bold;
    letter-spacing: 6px; cursor: pointer; font-family: inherit;
    transition: all 0.15s; position: relative;
}
.victoryBtn::before {
    content: ''; position: absolute;
    top: 4px; left: 4px; right: -4px; bottom: -4px;
    border: 2px solid #c0392b; z-index: -1; transition: all 0.15s;
}
.victoryBtn:hover { background: #c0392b; border-color: #c0392b; transform: translate(-2px, -2px); }
.victoryBtn:hover::before { top: 6px; left: 6px; right: -6px; bottom: -6px; }
.victoryBtn:active { transform: translate(2px, 2px); }
.victoryBtn.secondary { border-color: #666; color: #aaa; }
.victoryBtn.secondary::before { border-color: #444; }
.victoryBtn.secondary:hover { border-color: #888; color: #fff; background: rgba(60, 60, 60, 0.5); }

/* ---- 死·蓄力提示 ---- */
#deathFocusText {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ff2020;
    font-size: 44px;
    font-weight: 900;
    letter-spacing: 12px;
    text-shadow:
        0 0 12px #ff0000,
        0 0 30px #ff0000,
        0 0 50px #ff0000,
        3px 3px 0 #000;
    display: none;
    pointer-events: none;
    z-index: 55;
    white-space: nowrap;
    animation: deathFocusPulse 0.8s ease-in-out infinite;
}
@keyframes deathFocusPulse {
    0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.04); }
}

/* ---- 黑死画面 ---- */
#deathScreen {
    position: absolute;
    inset: 0;
    background: #000;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    pointer-events: none;
}
#deathScreen.show {
    display: flex;
}
.deathChar {
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 92vh;
    font-weight: 900;
    line-height: 1;
    color: #ff0000;
    text-shadow:
        0 0 30px #ff0000,
        0 0 60px #ff0000,
        0 0 120px #ff0000,
        0 0 240px #ff0000,
        0 0 480px #ff0000;
    animation: deathCharPop 0.35s ease-out;
}
@keyframes deathCharPop {
    0%   { transform: scale(0.3); opacity: 0; }
    60%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}