/* ============================================================
   @keyframes・アニメーションクラス
   ============================================================ */

@keyframes effectHit {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-15deg);
        filter: brightness(2.5);
    }

    12% {
        opacity: 1;
        transform: scale(1.75) rotate(6deg);
        filter: brightness(1.6);
    }

    35% {
        opacity: 1;
        transform: scale(1.38) rotate(-2deg);
        filter: brightness(1.1);
    }

    65% {
        opacity: 0.9;
        transform: scale(1.2) rotate(1deg);
        filter: brightness(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.0) rotate(0deg);
        filter: brightness(1);
    }
}

@keyframes effectCriticalHit {
    0% {
        opacity: 0;
        transform: scale(0.4) rotate(-20deg);
        filter: brightness(4);
    }

    10% {
        opacity: 1;
        transform: scale(2.7) rotate(8deg);
        filter: brightness(2.5);
    }

    25% {
        opacity: 1;
        transform: scale(1.9) rotate(-5deg);
        filter: brightness(1.8);
    }

    45% {
        opacity: 1;
        transform: scale(2.3) rotate(3deg);
        filter: brightness(1.4);
    }

    70% {
        opacity: 0.85;
        transform: scale(1.85) rotate(0deg);
        filter: brightness(1.1);
    }

    100% {
        opacity: 0;
        transform: scale(1.7) rotate(0deg);
        filter: brightness(1);
    }
}

@keyframes effectSlash {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-65deg) scaleX(0.5);
        filter: brightness(3);
    }

    10% {
        opacity: 1;
        transform: scale(1.95) rotate(-14deg) scaleX(1.2);
        filter: brightness(1.8);
    }

    30% {
        opacity: 1;
        transform: scale(1.6) rotate(-3deg) scaleX(1.05);
        filter: brightness(1.2);
    }

    62% {
        opacity: 0.9;
        transform: scale(1.3) rotate(5deg) scaleX(0.97);
        filter: brightness(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.9) rotate(13deg) scaleX(0.9);
        filter: brightness(1);
    }
}

@keyframes effectCrescent {
    0% {
        opacity: 0;
        transform: translate(30px, -30px) scale(1.3);
        filter: brightness(3);
    }

    15% {
        opacity: 1;
        transform: translate(15px, -15px) scale(1.9);
        filter: brightness(1.8);
    }

    65% {
        opacity: 1;
        transform: translate(-15px, 15px) scale(1.3);
        filter: brightness(1.1);
    }

    100% {
        opacity: 0;
        transform: translate(-30px, 30px) scale(0.95);
        filter: brightness(1);
    }
}

/* 必殺技専用：大爆発・色変化 */
@keyframes effectSpAttack {
    0% {
        opacity: 0;
        transform: scale(0.2) rotate(0deg);
        filter: brightness(6) hue-rotate(0deg);
    }

    8% {
        opacity: 1;
        transform: scale(3.2) rotate(-10deg);
        filter: brightness(3.5) hue-rotate(40deg);
    }

    20% {
        opacity: 1;
        transform: scale(2.1) rotate(5deg);
        filter: brightness(2.5) hue-rotate(20deg);
    }

    36% {
        opacity: 1;
        transform: scale(2.7) rotate(-7deg);
        filter: brightness(2) hue-rotate(0deg);
    }

    55% {
        opacity: 1;
        transform: scale(2.15) rotate(3deg);
        filter: brightness(1.5);
    }

    75% {
        opacity: 0.8;
        transform: scale(2.0) rotate(0deg);
        filter: brightness(1.2);
    }

    100% {
        opacity: 0;
        transform: scale(1.85) rotate(0deg);
        filter: brightness(1);
    }
}

/* エフェクト */
@keyframes blink-damage {

    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0.2;
    }
}

.flash-effect {
    animation: blink-damage 0.2s step-end;
}

/* 装備時の高速点滅 (3回点滅) */
@keyframes equip-blink {

    0%,
    33.3%,
    66.6% {
        opacity: 0;
    }

    16.6%,
    49.9%,
    83.3%,
    100% {
        opacity: 1;
    }
}

.equip-flash {
    animation: equip-blink 0.4s linear forwards;
}

/* クリティカル：速い5回点滅 */
@keyframes blink-critical {
    0% {
        opacity: 1;
    }

    11% {
        opacity: 0;
    }

    22% {
        opacity: 1;
    }

    33% {
        opacity: 0;
    }

    46% {
        opacity: 1;
    }

    57% {
        opacity: 0;
    }

    70% {
        opacity: 1;
    }

    80% {
        opacity: 0.2;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

.flash-critical {
    animation: blink-critical 0.7s linear;
}

/* 必殺技：超高速7回点滅 */
@keyframes blink-sp {
    0% {
        opacity: 1;
    }

    7% {
        opacity: 0;
    }

    14% {
        opacity: 1;
    }

    21% {
        opacity: 0;
    }

    28% {
        opacity: 1;
    }

    36% {
        opacity: 0;
    }

    43% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    58% {
        opacity: 1;
    }

    65% {
        opacity: 0;
    }

    72% {
        opacity: 1;
    }

    80% {
        opacity: 0.3;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

.flash-sp {
    animation: blink-sp 1.0s linear;
}

/* 必殺技：バトルビュー全体を白いオーバーレイでフラッシュ */
.battle-white-flash {
    position: absolute;
    inset: 0;
    background: #fff;
    pointer-events: none;
    z-index: 10;
    animation: battle-white-flash-anim 0.7s ease-out forwards;
}

@keyframes battle-white-flash-anim {
    0%   { opacity: 0.8; }
    12%  { opacity: 0.8; }
    100% { opacity: 0; }
}

/* 被ダメージ：ステータスウィンドウを赤いオーバーレイでフラッシュ */
.damage-flash-overlay {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: rgba(220, 30, 30, 1);
    pointer-events: none;
    z-index: 2;
    animation: damage-flash-anim 0.5s ease-out forwards;
}

@keyframes damage-flash-anim {
    0%   { opacity: 0.65; }
    25%  { opacity: 0.15; }
    50%  { opacity: 0.45; }
    75%  { opacity: 0.05; }
    100% { opacity: 0; }
}

/* クリティカル：細かい高速揺れ（.monster-container に適用） */
@keyframes shake-critical-monster {
    0% {
        transform: translate(0, 0);
    }

    9% {
        transform: translate(-5px, 2px);
    }

    18% {
        transform: translate(5px, -3px);
    }

    27% {
        transform: translate(-7px, -2px);
    }

    36% {
        transform: translate(7px, 3px);
    }

    45% {
        transform: translate(-5px, -3px);
    }

    55% {
        transform: translate(5px, 2px);
    }

    64% {
        transform: translate(-4px, 3px);
    }

    73% {
        transform: translate(4px, -2px);
    }

    82% {
        transform: translate(-2px, 1px);
    }

    91% {
        transform: translate(2px, -1px);
    }

    100% {
        transform: translate(0, 0);
    }
}

.shake-critical-monster {
    animation: shake-critical-monster 0.7s ease-out;
}

/* 必殺技：激しい揺れ＋回転（.monster-container に適用） */
@keyframes shake-sp-monster {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    6% {
        transform: translate(-10px, 5px) rotate(-2deg);
    }

    12% {
        transform: translate(10px, -5px) rotate(2deg);
    }

    18% {
        transform: translate(-13px, -6px) rotate(-2.5deg);
    }

    24% {
        transform: translate(13px, 6px) rotate(2.5deg);
    }

    30% {
        transform: translate(-11px, 4px) rotate(-2deg);
    }

    36% {
        transform: translate(11px, -4px) rotate(2deg);
    }

    43% {
        transform: translate(-8px, 5px) rotate(-1.5deg);
    }

    50% {
        transform: translate(8px, -5px) rotate(1.5deg);
    }

    58% {
        transform: translate(-6px, 3px) rotate(-1deg);
    }

    65% {
        transform: translate(6px, -3px) rotate(1deg);
    }

    72% {
        transform: translate(-4px, 2px);
    }

    80% {
        transform: translate(4px, -2px);
    }

    88% {
        transform: translate(-2px, 1px);
    }

    94% {
        transform: translate(2px, -1px);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

.shake-sp-monster {
    animation: shake-sp-monster 1.0s ease-out;
}

@keyframes shake {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    20% {
        transform: translate(-6px, 4px) rotate(2deg);
    }

    40% {
        transform: translate(6px, -4px) rotate(-2deg);
    }

    60% {
        transform: translate(-6px, -4px) rotate(2deg);
    }

    80% {
        transform: translate(6px, 4px) rotate(-2deg);
    }
}

.shake-effect {
    animation: shake 0.4s;
}

@keyframes dodge {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(20%);
    }

    50% {
        transform: translateX(0);
    }
}

.dodge-effect {
    animation: dodge 0.6s ease-out;
}

@keyframes monster-attack {

    0%,
    100% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.2);
    }

    60% {
        transform: scale(1);
    }
}

.attack-effect {
    /* ぬるっとうごく2割拡大 */
    animation: monster-attack 0.5s ease-out;
}

@keyframes monster-damage {

    0%,
    80% {
        transform: scale(1.3);
    }

    81%,
    100% {
        transform: scale(1);
    }
}

.damage-effect {
    /* アニメーションなしで突然3割拡大 */
    animation: monster-damage 0.5s;
}

@keyframes angry-img-pulse {

    0%,
    100% {
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 6px rgba(255, 80, 0, 0.7)) drop-shadow(0 0 20px rgba(255, 0, 0, 0.4));
    }

    50% {
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 1)) drop-shadow(0 0 12px rgba(255, 60, 0, 1)) drop-shadow(0 0 40px rgba(255, 0, 0, 0.8));
    }
}

@keyframes auraFloat {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1.0);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* ============================================================
   ATKupエフェクト（青いグラデーション帯が下から上へ流れる）
   パネルエリア（ユーザーウィンドウ）に対して適用
   ============================================================ */
.atkup-effect {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    /* グラデーション帯: 上下が薄く(透明)、中央が濃い青 */
    background: linear-gradient(to top,
            transparent 0%,
            rgba(0, 150, 255, 0.30) 20%,
            rgba(0, 180, 255, 0.70) 50%,
            rgba(0, 150, 255, 0.30) 80%,
            transparent 100%);
    pointer-events: none;
    animation: atkUpSweep 2.5s ease-in-out forwards;
}

@keyframes atkUpSweep {

    /* 開始: 帯が画面下で待機（見えない） */
    0% {
        transform: translateY(100%);
        opacity: 1;
    }

    /* ウィンドウを通過中: 帯で塗りつぶし */
    50% {
        opacity: 1;
    }

    /* 終了: 帯が画面上に抜けながらフェード */
    100% {
        transform: translateY(-110%);
        opacity: 0;
    }
}

/* ============================================================
   HEALupエフェクト（緑グラデーション帯が下から上へ流れる）
   かいふくモンスターによる回復時にパネルエリアに適用
   ============================================================ */
.healup-effect {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(to top,
            transparent 0%,
            rgba(0, 200, 80, 0.30) 20%,
            rgba(0, 230, 100, 0.70) 50%,
            rgba(0, 200, 80, 0.30) 80%,
            transparent 100%);
    pointer-events: none;
    animation: healUpSweep 2.5s ease-in-out forwards;
}

@keyframes healUpSweep {
    0% {
        transform: translateY(100%);
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(-110%);
        opacity: 0;
    }
}

/* ============================================================
   DEFupエフェクト（青いグラデーション帯が下から上へ流れる）
   ぼうぎょだま使用時（ミスターてっぱん効果など）にパネルエリアに適用
   ============================================================ */
.defup-effect {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(to top,
            transparent 0%,
            rgba(0, 150, 255, 0.30) 20%,
            rgba(0, 180, 255, 0.70) 50%,
            rgba(0, 150, 255, 0.30) 80%,
            transparent 100%);
    pointer-events: none;
    animation: defUpSweep 2.5s ease-in-out forwards;
}

@keyframes defUpSweep {
    0% {
        transform: translateY(100%);
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(-110%);
        opacity: 0;
    }
}

/* ============================================================
   GOLDupエフェクト（黄色いグラデーション帯が下から上へ流れる）
   ミスターきんか効果時にパネルエリアに適用
   ============================================================ */
.goldup-effect {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(to top,
            transparent 0%,
            rgba(255, 200, 0, 0.30) 20%,
            rgba(255, 220, 0, 0.70) 50%,
            rgba(255, 200, 0, 0.30) 80%,
            transparent 100%);
    pointer-events: none;
    animation: goldUpSweep 2.5s ease-in-out forwards;
}

@keyframes goldUpSweep {
    0% {
        transform: translateY(100%);
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(-110%);
        opacity: 0;
    }
}

/* ============================================================
   EXPupエフェクト（紫のグラデーション帯が下から上へ流れる）
   ミスターねんりん効果時にパネルエリアに適用
   ============================================================ */
.expup-effect {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(to top,
            transparent 0%,
            rgba(150, 0, 255, 0.30) 20%,
            rgba(180, 0, 255, 0.70) 50%,
            rgba(150, 0, 255, 0.30) 80%,
            transparent 100%);
    pointer-events: none;
    animation: expUpSweep 2.5s ease-in-out forwards;
}

@keyframes expUpSweep {
    0% {
        transform: translateY(100%);
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(-110%);
        opacity: 0;
    }
}

@keyframes item-use-zoom {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2);
    }

    25% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15);
    }

    70% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.0);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
}


@keyframes shake-img-wrapper {

    0%,
    100% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(-8px) rotate(-1deg);
    }

    30% {
        transform: translateX(7px) rotate(1deg);
    }

    45% {
        transform: translateX(-5px) rotate(-1deg);
    }

    60% {
        transform: translateX(4px);
    }

    75% {
        transform: translateX(-2px);
    }

    90% {
        transform: translateX(1px);
    }
}

.shake-img-wrapper {
    animation: shake-img-wrapper 0.3s ease-out;
}

@keyframes shake-img-wrapper-crit {

    0%,
    100% {
        transform: translateX(0);
    }

    12% {
        transform: translateX(-12px) rotate(-1.5deg);
    }

    24% {
        transform: translateX(11px) rotate(1.5deg);
    }

    36% {
        transform: translateX(-9px) rotate(-1deg);
    }

    48% {
        transform: translateX(8px) rotate(1deg);
    }

    60% {
        transform: translateX(-6px) rotate(-0.5deg);
    }

    72% {
        transform: translateX(5px);
    }

    84% {
        transform: translateX(-3px);
    }

    96% {
        transform: translateX(2px);
    }
}

.shake-img-wrapper-crit {
    animation: shake-img-wrapper-crit 0.45s ease-out;
}

@keyframes specialQuoteFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}