/* animations.css — toàn bộ keyframes. Tên đặt theo việc nó làm; gắn vào đâu thì xem battle.css / screens.css. */

@property --p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

/* nền, trôi nổi */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { from { transform: translateX(-14px); } to { transform: translateX(34px); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes glow-pulse { 0%, 100% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.18); transform: scale(1.06); } }
@keyframes hold-fill { from { --p: 0%; } to { --p: 100%; } }
@keyframes node-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes zzz { 0% { opacity: 0; transform: translateY(8px); } 30%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

/* 1 · lật thẻ: xem .mcard__in (transition rotateY) + */
@keyframes pair-pop { 0% { transform: scale(1); } 45% { transform: scale(1.14) rotate(-3deg); } 100% { transform: scale(1); } }

/* 2 · vòng năng lượng cạn dần */
@keyframes ring-drain { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 100; opacity: .25; } }

/* câu hỏi và đáp án vào màn */
@keyframes q-in { from { opacity: 0; transform: scale(.7) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes ans-in { from { opacity: 0; transform: translateY(24px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes ans-win { 0% { transform: scale(1); } 50% { transform: scale(1.18) rotate(-2deg); } 100% { transform: scale(1.07); } }
@keyframes ans-nope { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* 4 · đòn thường   5 · chí mạng: số sát thương, chữ CHÍ MẠNG, vụ nổ sao */
@keyframes dmg-pop {
  0%   { opacity: 0; transform: translateY(60%) scale(.3) rotate(-3deg); }
  18%  { opacity: 1; transform: translateY(22%) scale(1.25) rotate(-3deg); }
  30%  { transform: translateY(26%) scale(1) rotate(-3deg); }
  80%  { opacity: 1; transform: translateY(20%) scale(1) rotate(-3deg); }
  100% { opacity: 0; transform: translateY(4%) scale(1.05) rotate(-3deg); }
}
@keyframes crit-pop {
  0%   { opacity: 0; transform: translateY(-62%) scale(2.2) rotate(-12deg) skewX(var(--fx-skew)); }
  16%  { opacity: 1; transform: translateY(-62%) scale(.92) rotate(-5deg) skewX(var(--fx-skew)); }
  26%  { transform: translateY(-62%) scale(1.06) rotate(-5deg) skewX(var(--fx-skew)); }
  82%  { opacity: 1; transform: translateY(-62%) scale(1) rotate(-5deg) skewX(var(--fx-skew)); }
  100% { opacity: 0; transform: translateY(-70%) scale(1.1) rotate(-5deg) skewX(var(--fx-skew)); }
}
@keyframes burst-pop {
  0%   { opacity: 0; transform: scale(.2) rotate(-20deg); }
  16%  { opacity: 1; transform: scale(1.08) rotate(0deg); }
  80%  { opacity: .95; transform: scale(1) rotate(8deg); }
  100% { opacity: 0; transform: scale(1.15) rotate(12deg); }
}
@keyframes label-pop {
  0%   { opacity: 0; transform: translateY(-70%) scale(.3) rotate(-4deg) skewX(var(--fx-skew)); }
  18%  { opacity: 1; transform: translateY(-70%) scale(1.15) rotate(-4deg) skewX(var(--fx-skew)); }
  82%  { opacity: 1; transform: translateY(-70%) scale(1) rotate(-4deg) skewX(var(--fx-skew)); }
  100% { opacity: 0; transform: translateY(-80%) scale(1) rotate(-4deg) skewX(var(--fx-skew)); }
}
@keyframes fxp-fly {
  0%   { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(.3) rotate(0deg); }
  14%  { opacity: 1; }
  55%  { opacity: 1; transform: translate(var(--mx), var(--my)) scale(1.1) rotate(calc(var(--r) * .6)); }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--ex), var(--ey)) scale(1.7) rotate(var(--r)); }
}
@keyframes me-strike { 0% { transform: none; } 35% { transform: translate(14px, -16px) rotate(6deg) scale(1.08); } 100% { transform: none; } }
@keyframes opp-hit {
  0%, 100% { transform: none; filter: none; }
  20% { transform: translate(8px, -4px) rotate(4deg); filter: brightness(1.8) saturate(1.4); }
  45% { transform: translate(-7px, 2px) rotate(-3deg); filter: none; }
  70% { transform: translate(4px, 0) rotate(2deg); }
}
@keyframes opp-bye { 0% { transform: none; } 40% { transform: scale(1.08) rotate(-4deg); } 100% { transform: scale(.9) rotate(3deg); filter: brightness(1.25); } }
@keyframes bubble-pop { 0% { opacity: 0; transform: rotate(10deg) scale(0); } 25% { opacity: 1; transform: rotate(10deg) scale(1.15); } 75% { opacity: 1; transform: rotate(10deg) scale(1); } 100% { opacity: 0; transform: rotate(10deg) scale(.8); } }
@keyframes praise-pop { 0% { opacity: 0; transform: scale(.6); } 20% { opacity: 1; transform: scale(1.1); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.95); } }

@keyframes opp-rattle {
  0%, 100% { transform: none; filter: none; }
  10% { transform: translate(7px, -5px) rotate(4deg); filter: brightness(2.2) saturate(1.5); }
  25% { transform: translate(-8px, 3px) rotate(-4deg); filter: brightness(1.6); }
  40% { transform: translate(7px, 2px) rotate(3deg); filter: brightness(2); }
  55% { transform: translate(-6px, -3px) rotate(-3deg); filter: brightness(1.4); }
  70% { transform: translate(5px, 2px) rotate(2deg); filter: brightness(1.7); }
  85% { transform: translate(-3px, 0) rotate(-1deg); }
}
/* nhân vật gồng khí (rung nhẹ, sáng dần) rồi giật lùi khi phóng chưởng */
@keyframes me-charge {
  0%   { transform: none; filter: none; }
  20%  { transform: translate(-2px, 1px) scale(1.02); filter: brightness(1.15); }
  40%  { transform: translate(2px, -1px) scale(1.04); filter: brightness(1.3); }
  60%  { transform: translate(-2px, -1px) scale(1.05); filter: brightness(1.45); }
  80%  { transform: translate(2px, 1px) scale(1.07); filter: brightness(1.6); }
  100% { transform: scale(1.08); filter: brightness(1.75); }
}
@keyframes me-fire {
  0%   { transform: translate(12px, -12px) scale(1.12); filter: brightness(1.9); }
  18%  { transform: translate(-10px, 8px) scale(1.04); filter: brightness(1.5); }
  70%  { transform: translate(-6px, 5px) scale(1.03); filter: brightness(1.3); }
  100% { transform: none; filter: none; }
}
/* dịch chuyển tức thời: bóp dẹt biến mất → hiện cạnh đối thủ (--tx, --ty) → biến mất → về chỗ cũ */
@keyframes me-teleport {
  0%, 18% { transform: none; opacity: 1; }
  21%  { transform: scale(.08, 1.35); opacity: 0; }
  31%  { transform: translate(var(--tx), var(--ty)) scale(.08, 1.35); opacity: 0; }
  35%  { transform: translate(var(--tx), var(--ty)) scale(1.08); opacity: 1; }
  40%  { transform: translate(calc(var(--tx) + 16px), calc(var(--ty) - 8px)) scale(1.12) rotate(8deg); opacity: 1; }
  63%  { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 1; }
  66%  { transform: translate(var(--tx), var(--ty)) scale(.08, 1.35); opacity: 0; }
  74%  { transform: scale(.08, 1.35); opacity: 0; }
  82%, 100% { transform: none; opacity: 1; }
}
/* rung màn hình khi trúng đòn */
.app__stage.shake-s { animation: shake-s .34s linear; }
.app__stage.shake-l { animation: shake-l .62s linear; }
@keyframes shake-s { 0%, 100% { transform: none; } 20% { transform: translate(-5px, 3px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-3px, -2px); } 80% { transform: translate(3px, 2px); } }
@keyframes shake-l {
  0%, 100% { transform: none; }
  10% { transform: translate(-11px, 6px) rotate(-.5deg); } 22% { transform: translate(10px, -7px) rotate(.5deg); }
  34% { transform: translate(-9px, -5px) rotate(-.4deg); } 46% { transform: translate(8px, 6px) rotate(.4deg); }
  58% { transform: translate(-6px, 3px); } 70% { transform: translate(5px, -3px); } 85% { transform: translate(-2px, 1px); }
}
@keyframes aura-pulse { 0%, 100% { transform: scale(1); filter: brightness(1.1); } 50% { transform: scale(1.14); filter: brightness(1.5); } }
@keyframes aura-flicker {
  0%, 100% { filter: drop-shadow(0 0 6px #FFE66B) drop-shadow(0 0 16px #FFB000) drop-shadow(0 3px 0 rgba(255,255,255,.95)); }
  50%      { filter: drop-shadow(0 0 12px #FFF7A8) drop-shadow(0 0 28px #FF8A00) drop-shadow(0 3px 0 rgba(255,255,255,.95)); }
}

/* 6 · bộ đếm liên hoàn */
@keyframes combo-pulse { 0% { transform: rotate(-7deg) scale(.5); } 60% { transform: rotate(-7deg) scale(1.25); } 100% { transform: rotate(-7deg) scale(1); } }

/* 7 · thẻ tuyệt chiêu bật vào rồi rút ra */
@keyframes skill-in {
  0%   { opacity: 0; transform: translateX(var(--skill-from)) rotate(calc(var(--skill-rot) * 3)); }
  16%  { opacity: 1; transform: translateX(0) rotate(var(--skill-rot)) scale(1.06); }
  26%  { transform: translateX(0) rotate(var(--skill-rot)) scale(1); }
  82%  { opacity: 1; transform: translateX(0) rotate(var(--skill-rot)); }
  100% { opacity: 0; transform: translateX(var(--skill-from)) rotate(calc(var(--skill-rot) * 2)); }
}

/* 8 · đại chiêu: cắt cảnh */
@keyframes cutin-all { 0% { opacity: 0; } 8% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lines-run { to { transform: translateX(-36px); } }
@keyframes face-slide { 0% { transform: rotate(8deg) translateX(-140%); } 18% { transform: rotate(8deg) translateX(6%); } 80% { transform: rotate(8deg) translateX(-4%); } 100% { transform: rotate(8deg) translateX(140%); } }
@keyframes name-slam {
  0%   { opacity: 0; transform: rotate(-6deg) skewX(var(--fx-skew)) scale(2.6); }
  22%  { opacity: 1; transform: rotate(-6deg) skewX(var(--fx-skew)) scale(.94); }
  32%  { transform: rotate(-6deg) skewX(var(--fx-skew)) scale(1.04); }
  100% { opacity: 1; transform: rotate(-6deg) skewX(var(--fx-skew)) scale(1); }
}

/* 9 · phản đòn: quả cầu bay xuống rồi bật ngược lên */
@keyframes orb-wait { 0%, 100% { transform: translateY(40px) scale(1); } 50% { transform: translateY(52px) scale(1.12); } }
@keyframes orb-return {
  0%   { opacity: 1; transform: translate(-30px, 150px) scale(1.2); }
  40%  { opacity: 1; transform: translate(-40px, 190px) scale(.8); }
  85%  { opacity: 1; transform: translate(0, 0) scale(1.6); }
  100% { opacity: 0; transform: translate(0, -10px) scale(2.6); }
}

/* 10 · khiên dựng lên / vỡ đôi */
@keyframes shield-up { 0% { opacity: 0; transform: scale(.5); } 60% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes half-l { to { opacity: 0; transform: translate(-70%, 30%) rotate(-38deg); } }
@keyframes half-r { to { opacity: 0; transform: translate(70%, 30%) rotate(38deg); } }

/* 11 · thẻ mẹo */
@keyframes tip-in { 0% { opacity: 0; transform: translateY(40px) scale(.8); } 100% { opacity: 1; transform: none; } }

/* 12 · dải chữ thắng trận, sao, giấy màu */
@keyframes finish-in { 0% { opacity: 0; transform: scale(2.4); } 18% { opacity: 1; transform: scale(.94); } 28% { transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
@keyframes banner-in { 0% { opacity: 0; transform: scale(.4) rotate(-6deg); } 100% { opacity: 1; transform: none; } }
@keyframes star-in { 0% { opacity: 0; transform: scale(0) rotate(-140deg); } 100% { opacity: 1; } }
@keyframes confetti-fall { 0% { transform: translate(0, -20px) rotate(0deg); opacity: 1; } 100% { transform: translate(var(--x), 105vh) rotate(720deg); opacity: .9; } }

/* 13 · biến hình */
@keyframes evo-old { 0% { opacity: 1; transform: scale(1); filter: none; } 55% { opacity: 1; transform: scale(1.05); filter: brightness(3) saturate(0); } 100% { opacity: 0; transform: scale(.6); filter: brightness(4) saturate(0); } }
@keyframes evo-flash { 0% { opacity: 0; transform: scale(.3); } 45% { opacity: 1; transform: scale(1.25); } 100% { opacity: .55; transform: scale(1); } }
@keyframes evo-new { 0% { opacity: 0; transform: scale(.4); filter: brightness(3); } 60% { opacity: 1; transform: scale(1.12); filter: brightness(1.3); } 100% { opacity: 1; transform: scale(1); filter: none; } }

/* 14 · huy hiệu lên cấp */
@keyframes medal-in { 0% { opacity: 0; transform: scale(0) rotate(-200deg); } 100% { opacity: 1; transform: none; } }

/* 15 · mở vùng mới: tấm màn kéo lên */
@keyframes veil-open { to { transform: translateY(-102%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ring__run { animation-duration: var(--ring-sec, 6s) !important; }   /* vòng năng lượng vẫn phải chạy đúng giờ */
  .app__stage.shake-s, .app__stage.shake-l { animation: none !important; }
}

/* hình vụ nổ sao cho chí mạng / đại chiêu (sinh bằng máy: 18 tia) */
:root { --burst-poly: polygon(50.0% 0.0%, 55.4% 19.5%, 65.4% 7.7%, 65.5% 23.2%, 82.1% 11.7%, 73.7% 30.1%, 89.0% 27.5%, 79.1% 39.4%, 99.2% 41.3%, 81.0% 50.0%, 94.3% 57.8%, 79.1% 60.6%, 93.3% 75.0%, 73.7% 69.9%, 78.9% 84.5%, 65.5% 76.8%, 67.1% 97.0%, 55.4% 80.5%, 50.0% 95.0%, 44.6% 80.5%, 32.9% 97.0%, 34.5% 76.8%, 21.1% 84.5%, 26.3% 69.9%, 6.7% 75.0%, 20.9% 60.6%, 5.7% 57.8%, 19.0% 50.0%, 0.8% 41.3%, 20.9% 39.4%, 11.0% 27.5%, 26.3% 30.1%, 17.9% 11.7%, 34.5% 23.2%, 34.6% 7.7%, 44.6% 19.5%); }