/* ==========================================================
   ダーツアプリ ゲームアニメーションライブラリ
   各ゲーム画面に「ゲームらしい動き」を付与する共通CSS
   ========================================================== */

/* ============================================================
   1. 浮遊アニメーション（Float）- 重要オブジェクトをふわふわ
   ============================================================ */
@keyframes anim-float-soft {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
@keyframes anim-float-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-12px) scale(1.03); }
}
.fx-float-soft { animation: anim-float-soft 3s ease-in-out infinite; }
.fx-float-bounce { animation: anim-float-bounce 2.4s ease-in-out infinite; }

/* ============================================================
   2. パルスグロー - 注目要素を強調
   ============================================================ */
@keyframes anim-pulse-glow-y {
    0%, 100% { box-shadow: 0 0 16px rgba(255, 213, 79, 0.4); transform: scale(1); }
    50%      { box-shadow: 0 0 36px rgba(255, 213, 79, 0.95), 0 0 60px rgba(255, 213, 79, 0.5); transform: scale(1.04); }
}
@keyframes anim-pulse-glow-r {
    0%, 100% { box-shadow: 0 0 16px rgba(255, 82, 82, 0.4); transform: scale(1); }
    50%      { box-shadow: 0 0 36px rgba(255, 82, 82, 0.9), 0 0 60px rgba(255, 82, 82, 0.5); transform: scale(1.04); }
}
@keyframes anim-pulse-glow-b {
    0%, 100% { box-shadow: 0 0 16px rgba(79, 195, 247, 0.4); transform: scale(1); }
    50%      { box-shadow: 0 0 36px rgba(79, 195, 247, 0.95), 0 0 60px rgba(79, 195, 247, 0.5); transform: scale(1.04); }
}
@keyframes anim-pulse-glow-g {
    0%, 100% { box-shadow: 0 0 16px rgba(76, 175, 80, 0.4); transform: scale(1); }
    50%      { box-shadow: 0 0 36px rgba(76, 175, 80, 0.95), 0 0 60px rgba(76, 175, 80, 0.5); transform: scale(1.04); }
}
.fx-pulse-y { animation: anim-pulse-glow-y 1.6s ease-in-out infinite; }
.fx-pulse-r { animation: anim-pulse-glow-r 1.4s ease-in-out infinite; }
.fx-pulse-b { animation: anim-pulse-glow-b 1.6s ease-in-out infinite; }
/* 🛠 軽量化: .fx-pulse-g / .fx-pulse-fast-r は未使用のため削除 */

/* ============================================================
   3. ハートビート（呼吸）- ボス・重要キャラ用
   ============================================================ */
@keyframes anim-heartbeat {
    0%, 100% { transform: scale(1); }
    14%      { transform: scale(1.04); }
    28%      { transform: scale(1); }
    42%      { transform: scale(1.04); }
    70%      { transform: scale(1); }
}
/* 🛠 軽量化: anim-breathe-glow / fx-breathe-glow 未使用のため削除（bossBreathe を別途利用中） */
.fx-heartbeat { animation: anim-heartbeat 1.4s ease-in-out infinite; }

/* boss画像用エイリアス（既存の bossBreathe と互換） */
@keyframes bossBreathe {
    0%, 100% { transform: scale(1) translateY(0); filter: brightness(1); box-shadow: 0 0 32px rgba(255,50,50,0.6), inset 0 0 0 4px rgba(255,255,255,0.15); }
    50%      { transform: scale(1.025) translateY(-3px); filter: brightness(1.12); box-shadow: 0 0 60px rgba(255,80,80,0.85), inset 0 0 0 4px rgba(255,255,255,0.18); }
}

/* ============================================================
   4. 回転（Spin / Rotate）— 🛠 軽量化: 未使用の fx-spin-* / fx-wobble 削除
   ============================================================ */
/* gyroSpin alias（インラインで利用中） */
@keyframes gyroSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ============================================================
   5. シェイク — 🛠 軽量化: 未使用 fx-shake 削除（dungeon は fx-screen-shake を使用）
   ============================================================ */

/* ============================================================
   6. ポップイン（要素出現）
   ============================================================ */
@keyframes anim-pop-in {
    0%   { transform: scale(0.4) rotate(-10deg); opacity: 0; }
    60%  { transform: scale(1.1) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); }
}
@keyframes anim-bounce-in {
    0%   { transform: scale(0); opacity: 0; }
    50%  { transform: scale(1.2); opacity: 1; }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}
/* forwards: 終端の見える状態を保持（無いと opacity:0 のまま消える事故を防ぐ） */
.fx-pop-in { animation: anim-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.fx-bounce-in { animation: anim-bounce-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* ============================================================
   7. 3Dフリップ（カード反転）
   ============================================================ */
@keyframes anim-flip-y {
    0%   { transform: perspective(600px) rotateY(0); }
    50%  { transform: perspective(600px) rotateY(180deg); }
    100% { transform: perspective(600px) rotateY(360deg); }
}
@keyframes anim-flip-x {
    0%   { transform: perspective(600px) rotateX(0); }
    50%  { transform: perspective(600px) rotateX(180deg); }
    100% { transform: perspective(600px) rotateX(360deg); }
}
.fx-flip-y { animation: anim-flip-y 0.7s ease-in-out both; }
.fx-flip-x { animation: anim-flip-x 0.7s ease-in-out both; }

/* ============================================================
   8. グラデーションシマー — 🛠 軽量化: 未使用のため削除
      9. デジタル点滅 — 🛠 軽量化: 未使用のため削除
   ============================================================ */

/* ============================================================
   10. ヒット時の閃光エフェクト（command-strike）
   ============================================================ */
@keyframes anim-strike-flash {
    0%   { transform: scale(0.5) rotate(-12deg); opacity: 0; }
    20%  { transform: scale(1.5) rotate(0); opacity: 1; }
    100% { transform: scale(2.5) rotate(12deg); opacity: 0; }
}
.strike-flash {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    pointer-events: none;
    font-size: 200px;
    font-weight: 900;
    color: #ffd54f;
    text-shadow: 0 0 60px #ff5722, 0 0 120px #f44336;
    animation: anim-strike-flash 0.7s cubic-bezier(0.5, 0, 0.5, 1) forwards;
}

/* ============================================================
   11. 火花エフェクト（コンボ・連続ヒット）
   ============================================================ */
@keyframes anim-flame-jiggle {
    0%, 100% { transform: scale(1) translateY(0); filter: hue-rotate(0); }
    25%      { transform: scale(1.08) translateY(-3px); filter: hue-rotate(-15deg) brightness(1.15); }
    75%      { transform: scale(1.06) translateY(-2px); filter: hue-rotate(15deg) brightness(1.1); }
}
.fx-flame { animation: anim-flame-jiggle 0.6s ease-in-out infinite; }

/* ============================================================
   12. 凍結エフェクト — 🛠 軽量化: 未使用のため削除
   ============================================================ */

/* ============================================================
   13. ターゲット出現（モグラ等）
   ============================================================ */
@keyframes anim-mole-pop {
    0%   { transform: translateY(40px) scale(0.6); opacity: 0; }
    40%  { transform: translateY(-8px) scale(1.15); opacity: 1; }
    60%  { transform: translateY(2px) scale(0.95); }
    100% { transform: translateY(0) scale(1); }
}
.fx-mole-pop { animation: anim-mole-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* ============================================================
   14. プレイヤーマーカー進行（すごろく） — fx-marker-jump 直接使用は0だが
       下方の `.sg-marker` と `.mole-card` が anim-marker-jump を参照するため keyframes は残す
   ============================================================ */
@keyframes anim-marker-jump {
    0%, 100% { transform: translateY(0); }
    25%      { transform: translateY(-6px) scale(1.1); }
    50%      { transform: translateY(0) scale(1); }
    75%      { transform: translateY(-4px) scale(1.05); }
}

/* ============================================================
   15. ジャックポット（スロット・大当たり）
   ============================================================ */
@keyframes anim-jackpot {
    0%   { transform: scale(0.5); filter: brightness(0.5); }
    20%  { transform: scale(1.4); filter: brightness(2); }
    40%  { transform: scale(0.9); filter: brightness(1.5); }
    60%  { transform: scale(1.2); filter: brightness(1.8); }
    80%  { transform: scale(0.95); filter: brightness(1.3); }
    100% { transform: scale(1); filter: brightness(1); }
}
.fx-jackpot { animation: anim-jackpot 1.4s ease-in-out both; }

/* ============================================================
   16. スロットリール回転
   ============================================================ */
@keyframes anim-slot-spin {
    0%   { transform: translateY(0); filter: blur(2px); }
    50%  { transform: translateY(-200%); filter: blur(4px); }
    100% { transform: translateY(0); filter: blur(0); }
}
.fx-slot-spin { animation: anim-slot-spin 0.8s ease-out; }

/* ============================================================
   17. 横スライド入場（ポップアップメッセージ）
   ============================================================ */
@keyframes anim-slide-in-right {
    0%   { transform: translateX(120%); opacity: 0; }
    60%  { transform: translateX(-10%); opacity: 1; }
    100% { transform: translateX(0); }
}
@keyframes anim-slide-in-up {
    0%   { transform: translateY(40px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
.fx-slide-right { animation: anim-slide-in-right 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.fx-slide-up { animation: anim-slide-in-up 0.4s ease-out both; }

/* ============================================================
   18. レーダーパルス（ターゲット指示）— fx-radar は使用中
   ============================================================ */
@keyframes anim-radar-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 213, 79, 0.7); }
    70%  { box-shadow: 0 0 0 24px rgba(255, 213, 79, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 213, 79, 0); }
}
.fx-radar { animation: anim-radar-pulse 1.6s ease-out infinite; }

/* ============================================================
   19. プログレスバーの流れる光 — 🛠 軽量化: 未使用のため削除
   ============================================================ */

/* ============================================================
   20. 画面シェイク（ダメージ受けた時など）
   ============================================================ */
@keyframes anim-screen-shake {
    0%, 100% { transform: translate(0); }
    10% { transform: translate(-4px, 2px); }
    20% { transform: translate(3px, -1px); }
    30% { transform: translate(-2px, -2px); }
    40% { transform: translate(2px, 1px); }
    50% { transform: translate(-1px, 2px); }
    60% { transform: translate(2px, -1px); }
    70% { transform: translate(-1px, 1px); }
    80% { transform: translate(1px, -1px); }
    90% { transform: translate(0, 1px); }
}
.fx-screen-shake { animation: anim-screen-shake 0.5s ease-in-out; }

/* ============================================================
   既存 keyframes のバックフィル
   ============================================================ */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 16px rgba(255, 213, 79, 0.4); }
    50%      { box-shadow: 0 0 36px rgba(255, 213, 79, 0.95); }
}

/* ============================================================
   ゲーム別: モグラ（既存「.fx-mole-pop」に + ジャンプし続ける動き）
   ============================================================ */
.mole-card {
    animation: anim-marker-jump 1.6s ease-in-out infinite;
}

/* ============================================================
   ゲーム別: 数字積み上げ NEXT TARGET 用
   ============================================================ */
.stack-target {
    animation: anim-pulse-glow-g 1.4s ease-in-out infinite;
}

/* ============================================================
   ゲーム別: ハイ&ロー 矢印アニメ — 🛠 軽量化: 未使用のため削除
   ゲーム別: 風車回転 — 🛠 軽量化: 未使用のため削除
   ============================================================ */

/* ============================================================
   ゲーム別: ビンゴカードのマーク登場
   ============================================================ */
@keyframes anim-bingo-mark {
    0%   { transform: scale(0) rotate(0); opacity: 0; }
    50%  { transform: scale(1.3) rotate(180deg); opacity: 1; }
    100% { transform: scale(1) rotate(360deg); }
}
.fx-bingo-mark { animation: anim-bingo-mark 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* ============================================================
   ゲーム別: ポーカーのカードめくり
   ============================================================ */
@keyframes anim-card-deal {
    0%   { transform: translateY(-200px) rotate(-180deg); opacity: 0; }
    100% { transform: translateY(0) rotate(0); opacity: 1; }
}
.fx-card-deal { animation: anim-card-deal 0.6s cubic-bezier(0.5, 0, 0.5, 1) both; }

/* ============================================================
   ゲーム別: バトロワ KOエフェクト
   ============================================================ */
@keyframes anim-ko {
    0%   { transform: scale(1) rotate(0); }
    20%  { transform: scale(1.2) rotate(-5deg); filter: brightness(1.5); }
    50%  { transform: scale(0.8) rotate(10deg); filter: brightness(0.5); }
    100% { transform: scale(0.7) rotate(15deg); filter: brightness(0.3); opacity: 0.5; }
}
.fx-ko { animation: anim-ko 1s ease-in-out forwards; }

/* ============================================================
   ゲーム別: 巡回ボーダー — 🛠 軽量化: 未使用のため削除
   ============================================================ */

/* ============================================================
   全画面エフェクト: ヒット時の白いフラッシュ
   ============================================================ */
@keyframes anim-flash-white {
    0%   { background: rgba(255, 255, 255, 0); }
    20%  { background: rgba(255, 255, 255, 0.3); }
    100% { background: rgba(255, 255, 255, 0); }
}
.fx-flash-overlay {
    position: fixed; inset: 0; pointer-events: none; z-index: 999;
    animation: anim-flash-white 0.4s ease-out forwards;
}

/* ============================================================
   ボーナステキスト「+50点」がフワッと飛ぶ
   ============================================================ */
@keyframes anim-score-popup {
    0%   { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
    20%  { transform: translate(-50%, -20px) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -120px) scale(1); opacity: 0; }
}
.fx-score-popup {
    position: fixed;
    left: 50%; top: 50%;
    transform: translate(-50%, 0);
    z-index: 9000;
    font-size: 60px;
    font-weight: 900;
    color: #ffd54f;
    text-shadow: 0 0 30px rgba(255, 213, 79, 0.9), 0 0 60px rgba(255, 152, 0, 0.6);
    pointer-events: none;
    animation: anim-score-popup 1.2s cubic-bezier(0.5, 0, 0.5, 1) forwards;
}

/* ============================================================
   ゴールフラッグ（すごろく）
   ============================================================ */
@keyframes anim-flag-wave {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50%      { transform: rotate(2deg) translateY(-2px); }
}
.fx-flag-wave { animation: anim-flag-wave 1.4s ease-in-out infinite; }

/* ============================================================
   既存ゲームUIへの自動アニメーション付与
   ============================================================ */

/* すごろく中央の街イラスト: ゆらゆら */
.sg-center {
    animation: anim-float-soft 6s ease-in-out infinite;
}

/* すごろくのプレイヤーマーカー: 跳ねる */
.sg-marker {
    animation: anim-marker-jump 1.4s ease-in-out infinite;
}

/* マラソン HP/距離バー: 流れる光 — 🛠 軽量化: 未使用のため削除 */

/* ターゲットスコア (ナンバーハント等): 心臓の鼓動 */
.target-pulse {
    animation: anim-heartbeat 1.4s ease-in-out infinite;
}

/* スコアハイライト用: シマー */
@keyframes anim-text-shimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
.fx-text-shimmer {
    background: linear-gradient(90deg, #ffd54f, #ff9800, #ff5722, #ffd54f);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: anim-text-shimmer 3s linear infinite;
}

/* タイル類のホバー時の動き（既存スタイルとの統合） */
.sg-tile-bonus, .sg-tile-big_bonus, .sg-tile-treasure {
    animation: anim-pulse-glow-y 2.5s ease-in-out infinite;
}
.sg-tile-trap, .sg-tile-river, .sg-tile-gate {
    animation: anim-pulse-glow-r 3s ease-in-out infinite;
}
.sg-tile-warp, .sg-tile-rocket {
    animation: anim-pulse-glow-b 2s ease-in-out infinite;
}
.sg-tile-fire {
    animation: anim-flame-jiggle 1s ease-in-out infinite;
}
/* sg-tile-goal: 旗のゆれ + 黄色いグロー（box-shadow のみ。transform は flag-wave に任せる）*/
@keyframes anim-goal-glow-shadow {
    0%, 100% { box-shadow: 0 0 16px rgba(255, 213, 79, 0.4); }
    50%      { box-shadow: 0 0 36px rgba(255, 213, 79, 0.95), 0 0 60px rgba(255, 213, 79, 0.5); }
}
.sg-tile-goal {
    animation: anim-goal-glow-shadow 1s ease-in-out infinite, anim-flag-wave 2s ease-in-out infinite;
}

/* クリケットの "scoring" 行: パルス */
.crk-num-cell.target-scoring {
    animation: anim-pulse-glow-y 1.5s ease-in-out infinite;
}

/* キャプチャー所有セル: シマー — 🛠 軽量化: 削除（21セル全部に常時無限アニメは重い） */
.terr-cell.owned-p1, .terr-cell.owned-p2, .terr-cell.owned-p3, .terr-cell.owned-p4 {
    position: relative;
    overflow: hidden;
}

/* ============================================================
   役発動バナー (ハットトリック等)
   ============================================================ */
.achievement-banner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    pointer-events: none;
    animation: anim-achievement-show 3.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.achievement-inner {
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.85), rgba(20,20,30,0.95));
    border: 4px solid var(--ach-color, #ffd54f);
    border-radius: 24px;
    padding: 32px 70px;
    text-align: center;
    box-shadow: 0 0 80px var(--ach-color, #ffd54f), inset 0 0 30px rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
}
.achievement-label {
    font-size: clamp(40px, 7vw, 80px);
    font-weight: 900;
    color: var(--ach-color, #ffd54f);
    text-shadow: 0 0 30px var(--ach-color, #ffd54f), 0 0 60px var(--ach-color, #ffd54f);
    letter-spacing: 0.05em;
    line-height: 1;
    animation: anim-achievement-pulse 0.6s ease-in-out infinite alternate;
}
.achievement-sub {
    font-size: clamp(16px, 2vw, 24px);
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.2em;
    margin-top: 12px;
    font-weight: 700;
}
.achievement-player {
    font-size: 16px;
    color: rgba(255,255,255,0.7);
    margin-top: 14px;
    font-weight: 600;
}
.achievement-bonus {
    font-size: 22px;
    color: #ffd54f;
    margin-top: 10px;
    font-weight: 900;
    text-shadow: 0 0 12px rgba(255,213,79,0.6);
    animation: anim-bonus-pop 0.6s ease-out;
}
@keyframes anim-achievement-show {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(-15deg); opacity: 0; }
    15%  { transform: translate(-50%, -50%) scale(1.2) rotate(5deg); opacity: 1; }
    25%  { transform: translate(-50%, -50%) scale(0.95) rotate(-2deg); opacity: 1; }
    35%  { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
    85%  { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.8) rotate(0); opacity: 0; }
}
@keyframes anim-achievement-pulse {
    0%   { filter: brightness(1); transform: scale(1); }
    100% { filter: brightness(1.3); transform: scale(1.04); }
}
@keyframes anim-bonus-pop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}