/* ========================================
   特效样式 - 回响效果、脉冲动画
   ======================================== */

/* 回响骰子涟漪效果 */
.scene.echo-active {
    position: relative;
    overflow: visible;
}

/* 涟漪容器 - 使用伪元素创建多层涟漪 */
.scene.echo-active::before,
.scene.echo-active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 15;
}

/* 玩家回响涟漪 - 青色 */
#p-dice-container .scene.echo-active::before {
    border: 3px solid rgba(0, 242, 255, 0.8);
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.5), inset 0 0 10px rgba(0, 242, 255, 0.3);
    animation: echo-ripple-player 2.5s ease-out infinite;
}

#p-dice-container .scene.echo-active::after {
    border: 2px solid rgba(0, 242, 255, 0.6);
    box-shadow: 0 0 8px rgba(0, 242, 255, 0.4);
    animation: echo-ripple-player 2.5s ease-out infinite 0.8s;
}

/* NPC回响涟漪 - 红色 */
#n-dice-container .scene.echo-active::before {
    border: 3px solid rgba(255, 46, 77, 0.8);
    box-shadow: 0 0 10px rgba(255, 46, 77, 0.5), inset 0 0 10px rgba(255, 46, 77, 0.3);
    animation: echo-ripple-npc 2.5s ease-out infinite;
}

#n-dice-container .scene.echo-active::after {
    border: 2px solid rgba(255, 46, 77, 0.6);
    box-shadow: 0 0 8px rgba(255, 46, 77, 0.4);
    animation: echo-ripple-npc 2.5s ease-out infinite 0.8s;
}

/* 玩家涟漪动画 */
@keyframes echo-ripple-player {
    0% {
        width: 48px;
        height: 48px;
        opacity: 1;
        border-color: rgba(0, 242, 255, 0.9);
        box-shadow: 0 0 15px rgba(0, 242, 255, 0.7), inset 0 0 10px rgba(0, 242, 255, 0.4);
    }

    50% {
        opacity: 0.6;
    }

    100% {
        width: 100px;
        height: 100px;
        opacity: 0;
        border-color: rgba(0, 242, 255, 0);
        box-shadow: 0 0 20px rgba(0, 242, 255, 0), inset 0 0 10px rgba(0, 242, 255, 0);
    }
}

/* NPC涟漪动画 */
@keyframes echo-ripple-npc {
    0% {
        width: 48px;
        height: 48px;
        opacity: 1;
        border-color: rgba(255, 46, 77, 0.9);
        box-shadow: 0 0 15px rgba(255, 46, 77, 0.7), inset 0 0 10px rgba(255, 46, 77, 0.4);
    }

    50% {
        opacity: 0.6;
    }

    100% {
        width: 100px;
        height: 100px;
        opacity: 0;
        border-color: rgba(255, 46, 77, 0);
        box-shadow: 0 0 20px rgba(255, 46, 77, 0), inset 0 0 10px rgba(255, 46, 77, 0);
    }
}

/* 回响骰子的持续发光效果 */
#p-dice-container .scene.echo-active .cube__face {
    box-shadow: 0 0 8px rgba(0, 242, 255, 0.4);
}

#n-dice-container .scene.echo-active .cube__face {
    box-shadow: 0 0 8px rgba(255, 46, 77, 0.4);
}

/* ========================================
   结算阶段骰子缩放动画
   ======================================== */

/* 骰子脉冲动画 - 结算时加点数用 */
.scene.dice-pulse {
    animation: dice-pulse-anim 0.3s ease-out, dice-pulse-scale 0.3s ease-out;
}

@keyframes dice-pulse-anim {
    0% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.3) drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
    }

    100% {
        filter: brightness(1);
    }
}

@keyframes dice-pulse-scale {
    0% {
        scale: 1;
    }

    50% {
        scale: 1.2;
    }

    100% {
        scale: 1;
    }
}

/* 玩家骰子脉冲 - 青色光效 */
#p-dice-container .scene.dice-pulse .cube__face {
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.6), inset 0 0 5px rgba(0, 242, 255, 0.3);
}

/* NPC骰子脉冲 - 红色光效 */
#n-dice-container .scene.dice-pulse .cube__face {
    box-shadow: 0 0 15px rgba(255, 46, 77, 0.6), inset 0 0 5px rgba(255, 46, 77, 0.3);
}

/* ========================================
   状态栏受击震动动画
   ======================================== */

.status-bar.shake {
    animation: status-bar-shake 0.4s ease-out;
}

@keyframes status-bar-shake {
    0%, 100% {
        transform: translateX(0);
    }
    15% {
        transform: translateX(-6px);
    }
    30% {
        transform: translateX(5px);
    }
    45% {
        transform: translateX(-4px);
    }
    60% {
        transform: translateX(3px);
    }
    75% {
        transform: translateX(-2px);
    }
    90% {
        transform: translateX(1px);
    }
}

/* ========================================
   敌人状态栏和关卡牌滑入/滑出动画
   ======================================== */

/* 敌人状态栏滑入动画 */
.npc-bar.slide-in {
    animation: npc-bar-slide-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 敌人状态栏滑出动画 */
.npc-bar.slide-out {
    animation: npc-bar-slide-out 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes npc-bar-slide-in {
    0% {
        transform: translateY(-120%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes npc-bar-slide-out {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-120%);
        opacity: 0;
    }
}

/* 关卡牌滑入动画 */
.stage-info.slide-in {
    animation: stage-info-slide-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 关卡牌滑出动画 */
.stage-info.slide-out {
    animation: stage-info-slide-out 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes stage-info-slide-in {
    0% {
        transform: translate(-50%, -150%);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@keyframes stage-info-slide-out {
    0% {
        transform: translate(-50%, 0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -150%);
        opacity: 0;
    }
}

/* ========================================
   首次游戏开始时的滑入动画
   ======================================== */

/* 玩家状态栏从下方滑入 */
.player-bar.first-entrance {
    animation: player-bar-slide-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes player-bar-slide-in {
    0% {
        transform: translateY(150%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 按钮区域从下方滑入 */
.controls-footer.first-entrance {
    animation: controls-slide-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.05s;
    opacity: 0;
}

@keyframes controls-slide-in {
    0% {
        transform: translateY(150%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 战斗日志从右方滑入 */
.log-panel.first-entrance {
    animation: log-panel-slide-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.15s;
    opacity: 0;
}

@keyframes log-panel-slide-in {
    0% {
        transform: translateX(120%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 战斗日志向右滑出 */
.log-panel.log-exit {
    animation: log-panel-slide-out 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes log-panel-slide-out {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(120%);
        opacity: 0;
    }
}

/* 左侧栏（天赋栏和技能栏容器）从左方滑入 */
.left-section.first-entrance {
    animation: left-section-slide-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.2s;
    opacity: 0;
}

@keyframes left-section-slide-in {
    0% {
        transform: translateX(-120%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 动画期间允许父容器溢出，避免裁剪 */
.main-grid.animating {
    overflow: visible;
}

.side-column.animating {
    overflow: visible;
}