/* ===== 3D 立体战场 + Canvas 技能特效层 ===== */

/* 全屏画布：绘制火球/闪电/水花等粒子，位于卡片之上、伤害数字之下 */
#fx3d {
  position: fixed; inset: 0; pointer-events: none;
  z-index: 58; overflow: hidden;
}

/* 战场透视 + 发光地面，营造立体舞台 */
.field {
  position: relative;
  perspective: 1300px;
}
.field::before {
  content: ""; position: absolute; left: 50%; top: 62%;
  width: 94%; height: 260px;
  transform: translate(-50%, -50%) rotateX(74deg);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(120,160,255,.18) 0%, rgba(120,160,255,.06) 45%, transparent 72%);
  pointer-events: none; z-index: -1;
}

.side { transform-style: preserve-3d; }

/* 出战宝可梦向场地中心微微侧身 -> 立体卡牌 */
#you-active-card { transform: rotateY(9deg); }
#ai-active-card  { transform: rotateY(-9deg); }

.card {
  transform: rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
  /* 更深的投影 + 随属性发光的彩色光晕 */
  box-shadow: 0 18px 30px rgba(0,0,0,.42), 0 0 22px -6px var(--head, #888);
  /* 待机时随属性色缓慢呼吸的霓虹光环，增加生命感 */
  animation: auraPulse 3.6s ease-in-out infinite;
}

/* 宝可梦精灵在卡牌内轻轻浮动，更有生命感 */
.card .art img { animation: spriteBob 2.8s ease-in-out infinite; }
@keyframes spriteBob {
  0%,100% { transform: translateY(2px) scale(1); }
  50%     { transform: translateY(-6px) scale(1.03); }
}

/* 攻击动画：保留 3D 侧身角度（用 --ry 变量，正反面通用） */
@keyframes lungeR {
  0%   { transform: rotateY(var(--ry,9deg)) translateX(0); }
  45%  { transform: rotateY(var(--ry,9deg)) translateX(26px) scale(1.04); }
  100% { transform: rotateY(var(--ry,9deg)) translateX(0); }
}
@keyframes lungeL {
  0%   { transform: rotateY(var(--ry,-9deg)) translateX(0); }
  45%  { transform: rotateY(var(--ry,-9deg)) translateX(-26px) scale(1.04); }
  100% { transform: rotateY(var(--ry,-9deg)) translateX(0); }
}

/* 受击：改为抖动卡牌内部精灵，避免破坏 3D 侧身 */
.card.hit-shake { animation: none; }
.card.hit-shake .art { animation: shakeInner .42s ease-in-out; }
@keyframes shakeInner {
  0%,100% { transform: translateX(0); }
  15% { transform: translateX(-9px); }
  30% { transform: translateX(8px); }
  45% { transform: translateX(-7px); }
  60% { transform: translateX(6px); }
  75% { transform: translateX(-4px); }
  90% { transform: translateX(3px); }
}

/* 蓄力：出手前攻击方凝聚属性色光晕并微微提亮（用 filter，避免与 lunge 的 animation 冲突） */
.card.charge {
  filter: brightness(1.2) drop-shadow(0 0 16px var(--head, #888));
}

/* 命中：防守方闪白高光 + 朝远离攻击方方向击退（保留 3D 侧身） */
.card.hit-r { animation: hitKnockR .46s ease-out; }
.card.hit-l { animation: hitKnockL .46s ease-out; }
@keyframes hitKnockR {
  0%   { transform: rotateY(var(--ry, 0deg)) translateX(0); filter: brightness(1); box-shadow: 0 18px 30px rgba(0,0,0,.42), 0 0 18px -8px var(--head, #888); }
  18%  { transform: rotateY(var(--ry, 0deg)) translateX(24px) rotate(-2deg); filter: brightness(2.1) saturate(1.4); box-shadow: 0 0 32px 5px var(--head, #888); }
  100% { transform: rotateY(var(--ry, 0deg)) translateX(0); filter: brightness(1); box-shadow: 0 18px 30px rgba(0,0,0,.42), 0 0 18px -8px var(--head, #888); }
}
@keyframes hitKnockL {
  0%   { transform: rotateY(var(--ry, 0deg)) translateX(0); filter: brightness(1); box-shadow: 0 18px 30px rgba(0,0,0,.42), 0 0 18px -8px var(--head, #888); }
  18%  { transform: rotateY(var(--ry, 0deg)) translateX(-24px) rotate(2deg); filter: brightness(2.1) saturate(1.4); box-shadow: 0 0 32px 5px var(--head, #888); }
  100% { transform: rotateY(var(--ry, 0deg)) translateX(0); filter: brightness(1); box-shadow: 0 18px 30px rgba(0,0,0,.42), 0 0 18px -8px var(--head, #888); }
}

/* 恢复能量：青绿 + 金色聚气光环，卡牌轻微鼓胀 */
.card.recover-aura { animation: recoverAura .8s ease-out; }
@keyframes recoverAura {
  0%   { box-shadow: 0 18px 30px rgba(0,0,0,.42), 0 0 18px -8px var(--head, #888); transform: rotateY(var(--ry, 0deg)) scale(1); }
  45%  { box-shadow: 0 0 38px 3px #5fe0a0, 0 0 18px 2px #ffd86a; transform: rotateY(var(--ry, 0deg)) scale(1.05); }
  100% { box-shadow: 0 18px 30px rgba(0,0,0,.42), 0 0 18px -8px var(--head, #888); transform: rotateY(var(--ry, 0deg)) scale(1); }
}

/* 「聚气·回复能量」支援技按钮：青绿配色，与攻击技能区分 */
.move.recover { border-color: #2f9e63; background: linear-gradient(180deg, #eafff2, #d6f5e4); }
.move.recover:hover:not(:disabled) { background: linear-gradient(180deg, #d6f5e4, #c2efd6); }
.move.recover .cost { color: #1f9d57; }
.type-chip.recover { background: #2f9e63; }

/* 倒下：保留侧身角度 */
@keyframes faint {
  0%   { opacity: 1; transform: rotateY(var(--ry,0deg)) translateY(0) rotate(0); }
  25%  { transform: rotateY(var(--ry,0deg)) translateX(-6px) rotate(-3deg); }
  55%  { transform: rotateY(var(--ry,0deg)) translateX(6px) rotate(3deg); }
  100% { opacity: 0; transform: rotateY(var(--ry,0deg)) translateY(22px) scale(.85) rotate(-8deg); filter: grayscale(1); }
}

/* 效果拔群时整个战场轻微震动 */
.field.quake { animation: quake .3s ease; }
@keyframes quake {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-3px, 1px); }
  80% { transform: translate(3px, -1px); }
}

@media (prefers-reduced-motion: reduce) {
  #fx3d { display: none; }
  .card .art img { animation: none; }
  .card { animation: none; }
  .card.charge, .card.hit-r, .card.hit-l, .card.recover-aura { animation: none; }
  .field.quake { animation: none; }
}