/* 星約冒險：戰鬥特效樣式
 * 動畫時間點由 戰鬥特效.js 以 --d（延遲）變數傳入；
 * 使用者若開啟「減少動態效果」，檔尾的 prefers-reduced-motion 會關閉全部動畫。 */

.battle { position: relative; overflow: hidden; }
.battle .field { position: relative; padding-top: 44px; } /* 上方留空間給飄字，避免被卡片邊框切掉 */
.battle .mon { position: relative; }

/* ===== 舞台：角色本體＋特效層 ===== */
.stage { position: relative; display: inline-block; min-width: 110px; --lx: 56px; --ly: 0px; --dir: 1; }
.mon.foe .stage { --dir: -1; }
.stage .idle { display: inline-block; }
.stage .mover { display: inline-block; transform-origin: 50% 90%; }
.mon.me .stage .idle { animation: 呼吸 3.2s ease-in-out infinite; }
.mon.foe .stage .idle { animation: 彈跳 1.8s ease-in-out infinite; transform-origin: 50% 100%; }
.battle .mon .emoji { line-height: 0; }
.battle .mon .emoji svg { filter: drop-shadow(0 3px 2px rgba(60, 40, 10, .25)); }
@keyframes 呼吸 { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.015, 1.03); } }
@keyframes 彈跳 { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-8px) scale(.97, 1.04); } 80% { transform: translateY(0) scale(1.05, .95); } }

/* 倒下後的靜態樣子（重新整理畫面時用） */
.stage.dead .mover { opacity: .3; filter: grayscale(1); transform: scale(.8) rotate(-14deg) translateY(10px); }

/* ===== 角色動作（由 JS 直接寫在 style 的 animation 裡串接） ===== */
@keyframes 衝刺 {
  0% { transform: translate(0, 0) scale(1); }
  38% { transform: translate(calc(var(--lx) * var(--dir)), calc(var(--ly) * var(--dir))) scale(1.14); }
  55% { transform: translate(calc(var(--lx) * var(--dir)), calc(var(--ly) * var(--dir))) scale(1.14); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes 受擊 {
  0% { transform: translate(0, 0); filter: none; }
  14% { transform: translate(-10px, 0) rotate(-5deg); filter: brightness(2.4) saturate(0); }
  30% { transform: translate(9px, 0) rotate(4deg); filter: brightness(1.3) sepia(1) saturate(6) hue-rotate(-40deg); }
  50% { transform: translate(-6px, 0) rotate(-2deg); }
  72% { transform: translate(3px, 0); }
  100% { transform: translate(0, 0); filter: none; }
}
@keyframes 格擋 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-6px, 0) scale(.97); filter: drop-shadow(0 0 8px #6ab0ff); }
  100% { transform: translate(0, 0); filter: none; }
}
@keyframes 施法 {
  0%, 100% { transform: scale(1) translateY(0); filter: none; }
  30% { transform: scale(1.1, .92) translateY(2px); }
  55% { transform: scale(.95, 1.12) translateY(-12px); filter: drop-shadow(0 0 14px #ffd54a) brightness(1.15); }
}
@keyframes 蓄力 {
  0%, 100% { transform: scale(1); filter: none; }
  40%, 70% { transform: scale(.92, .9) translateY(4px); filter: drop-shadow(0 0 10px #6ab0ff); }
}
@keyframes 逃離 {
  0% { transform: translateX(0) scale(1); opacity: 1; }
  100% { transform: translateX(calc(-1 * var(--lx) * 2.4)) scale(.9); opacity: 0; }
}
@keyframes 倒下 {
  0% { transform: scale(1) rotate(0); opacity: 1; filter: none; }
  40% { transform: scale(1.06) rotate(-6deg); }
  100% { transform: scale(.8) rotate(-14deg) translateY(10px); opacity: .3; filter: grayscale(1); }
}
@keyframes 進場右 { 0% { transform: translateX(90px) scale(.5); opacity: 0; } 70% { transform: translateX(-8px) scale(1.08); opacity: 1; } 100% { transform: translateX(0) scale(1); opacity: 1; } }
@keyframes 進場左 { 0% { transform: translateX(-70px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }

/* ===== 特效層：疊在角色上，不吃滑鼠 ===== */
.fx { position: absolute; left: 50%; top: 45%; pointer-events: none; opacity: 0; animation-fill-mode: both; z-index: 3; }

/* 斬擊光痕 */
.fx-slash { width: 110px; height: 8px; margin: -4px 0 0 -55px; border-radius: 99px; background: linear-gradient(90deg, transparent, #fff 35%, #ffe28a 65%, transparent); box-shadow: 0 0 10px 2px rgba(255, 226, 138, .9); transform: rotate(-32deg) scaleX(0); animation: 斬擊 .38s ease-out var(--d) both; }
.fx-slash.crit { height: 12px; width: 150px; margin-left: -75px; background: linear-gradient(90deg, transparent, #fff 25%, #ff8a3a 70%, transparent); box-shadow: 0 0 16px 4px rgba(255, 120, 40, .95); }
@keyframes 斬擊 { 0% { opacity: 1; transform: rotate(-32deg) scaleX(0); } 45% { opacity: 1; transform: rotate(-32deg) scaleX(1); } 100% { opacity: 0; transform: rotate(-32deg) scaleX(1.1); } }

/* 敵方爪擊（打在玩家身上） */
.fx-claw { width: 90px; height: 70px; margin: -35px 0 0 -45px; background:
  linear-gradient(120deg, transparent 44%, #ff5a4a 46%, #ff5a4a 50%, transparent 52%),
  linear-gradient(120deg, transparent 54%, #ff5a4a 56%, #ff5a4a 60%, transparent 62%),
  linear-gradient(120deg, transparent 64%, #ff5a4a 66%, #ff5a4a 70%, transparent 72%); filter: drop-shadow(0 0 5px rgba(255, 70, 50, .9)); animation: 爪擊 .4s ease-out var(--d) both; }
.fx-claw.blocked { filter: drop-shadow(0 0 5px rgba(80, 160, 255, .9)) hue-rotate(200deg); }
@keyframes 爪擊 { 0% { opacity: 0; transform: translate(14px, -14px) scale(.7); } 30% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(-6px, 6px) scale(1.05); } }

/* 法術：彗星從上方砸下 */
.fx-bolt { font-size: 40px; margin: -20px 0 0 -20px; animation: 彗星 .5s ease-in var(--d) both; }
@keyframes 彗星 { 0% { opacity: 1; transform: translate(-70px, -110px) scale(.7) rotate(-20deg); } 85% { opacity: 1; transform: translate(0, 0) scale(1.15); } 100% { opacity: 0; transform: translate(0, 0) scale(1.6); } }

/* 噴發的小粒子（星星、金幣） */
.fx-spark { font-size: 18px; margin: -9px 0 0 -9px; animation: 噴發 .9s ease-out var(--d) both; }
@keyframes 噴發 { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(160deg); } }

/* 防禦盾牌 */
.fx-shield { font-size: 54px; margin: -30px 0 0 -30px; animation: 盾牌 1s ease-out var(--d) both; filter: drop-shadow(0 0 10px #6ab0ff); }
@keyframes 盾牌 { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(1.15); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.2); } }

/* 增益光環與上升圖示 */
.fx-aura { width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 4px solid #8ee06a; box-shadow: 0 0 18px #8ee06a, inset 0 0 18px #cfffb0; animation: 光環 1s ease-out var(--d) both; }
@keyframes 光環 { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.3); } }
.fx-rise { font-size: 26px; font-weight: 700; margin: -14px 0 0 -22px; animation: 上升 1.1s ease-out var(--d) both; text-shadow: 0 0 6px #fff; }
@keyframes 上升 { 0% { opacity: 0; transform: translateY(20px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70px); } }

/* 逃跑煙塵 */
.fx-dust { font-size: 36px; margin: -18px 0 0 -10px; animation: 煙塵 .8s ease-out var(--d) both; }
@keyframes 煙塵 { 0% { opacity: 0; transform: translateX(10px) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(50px) scale(1.4); } }

/* ===== 傷害飄字 ===== */
.dmg { position: absolute; left: 50%; top: 10%; z-index: 5; font-size: 28px; font-weight: 900; line-height: 1; color: #fff; white-space: nowrap; pointer-events: none; opacity: 0; animation: 飄字 1.1s ease-out var(--d) both; -webkit-text-stroke: 1.5px #7a1f14; paint-order: stroke fill; text-shadow: 0 2px 0 #7a1f14, 0 0 8px rgba(255, 90, 60, .8); }
.dmg.foe { color: #ffe28a; }
.dmg.me { color: #ff8a7a; }
.dmg.blocked { color: #a8d4ff; -webkit-text-stroke-color: #1f4a7a; text-shadow: 0 2px 0 #1f4a7a, 0 0 8px rgba(80, 160, 255, .8); }
.dmg.crit { font-size: 40px; color: #ffcf3a; -webkit-text-stroke-color: #a8300f; animation-duration: 1.4s; }
/* 藥草效果：治療（綠色）、中毒（紫色）、麻痺（黃色閃電） */
.dmg.heal { color: #b8f5a0; -webkit-text-stroke-color: #1f6a2a; text-shadow: 0 2px 0 #1f6a2a, 0 0 10px rgba(110, 230, 120, .9); font-size: 34px; }
.dmg.poison { color: #e6c4ff; -webkit-text-stroke-color: #5a2a8a; text-shadow: 0 2px 0 #5a2a8a, 0 0 8px rgba(190, 120, 255, .8); }
.dmg.para { color: #fff3a0; -webkit-text-stroke-color: #8a6a10; text-shadow: 0 2px 0 #8a6a10, 0 0 8px rgba(255, 220, 60, .9); font-size: 24px; }
.fx-aura.heal { border-color: #5fe08a; box-shadow: 0 0 22px #5fe08a, inset 0 0 22px #d4ffe0; }
.dmg small { display: block; font-size: 15px; letter-spacing: 1px; color: #ff6a3a; -webkit-text-stroke: 1px #fff; text-align: center; }
@keyframes 飄字 {
  0% { opacity: 0; transform: translate(-50%, 16px) scale(.4); }
  14% { opacity: 1; transform: translate(-50%, -6px) scale(1.5); }
  28% { transform: translate(-50%, -14px) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -78px) scale(1); }
}

/* ===== 全場效果：閃光、震動、登場標語 ===== */
.fx-flash { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; animation: 閃光 .5s ease-out var(--d) both; }
.fx-flash.red { background: radial-gradient(ellipse at center, rgba(255, 60, 40, 0) 40%, rgba(255, 60, 40, .55)); }
.fx-flash.gold { background: radial-gradient(ellipse at center, rgba(255, 255, 255, .85), rgba(255, 210, 70, .35)); }
.fx-flash.gold.soft { background: radial-gradient(ellipse at center, rgba(255, 240, 160, .5), rgba(255, 210, 70, 0) 70%); animation-duration: .9s; }
@keyframes 閃光 { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
@keyframes 全場震動 { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-5px, 2px); } 40% { transform: translate(5px, -2px); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(2px, 0); } }
.fx-banner { position: absolute; left: 50%; top: 38%; z-index: 6; transform: translate(-50%, -50%); background: rgba(58, 45, 28, .88); color: #ffe9a8; font-size: 22px; font-weight: 800; padding: 6px 22px; border-radius: 999px; border: 2px solid #ffd54a; white-space: nowrap; pointer-events: none; animation: 登場標語 1.5s ease-out both; }
@keyframes 登場標語 { 0% { opacity: 0; transform: translate(-120%, -50%); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 28% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80%); } }

/* ===== 血條由舊值滑到新值 ===== */
.bar-wrap.hp > i.anim { animation: 血條 .6s ease-out var(--d, 0ms) both; }
@keyframes 血條 { from { width: var(--from); } }

/* ===== 戰鬥記錄：新行依序淡入；爆擊那行加色 ===== */
.battle .log div.new { animation: 記錄淡入 .45s ease-out var(--d, 0ms) both; }
.battle .log div.new.crit { color: #b8431a; font-weight: 700; }
@keyframes 記錄淡入 { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* ===== 動畫期間鎖住按鈕、結算延後淡入 ===== */
.battle .actions.lock { animation: 按鈕鎖 var(--d) linear; }
@keyframes 按鈕鎖 { 0%, 99.9% { pointer-events: none; opacity: .5; } 100% { pointer-events: auto; opacity: 1; } }
.battle .late { animation: 結算淡入 .5s ease-out var(--d, 0ms) both; }
@keyframes 結算淡入 { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 魔物標籤裡的小圖 */
.tag.tag-mon { display: inline-flex; align-items: center; gap: 3px; }
.tag.tag-mon svg { flex: none; }

/* 手機：單欄排列時改成上下衝刺 */
@media (max-width: 600px) { .stage { --lx: 0px; --ly: 42px; } }

/* 玩家在標題列關閉「✨ 動態」時（body.no-motion）：關閉全部動畫，只留靜態結果 */
body.no-motion .stage .idle, body.no-motion .fx, body.no-motion .dmg, body.no-motion .fx-flash, body.no-motion .fx-banner,
body.no-motion .battle .log div.new, body.no-motion .bar-wrap.hp > i.anim, body.no-motion .battle .actions.lock, body.no-motion .battle .late { animation: none !important; }
body.no-motion .fx, body.no-motion .dmg, body.no-motion .fx-flash, body.no-motion .fx-banner { display: none; }