/**
 * ============================================================
 *  HÌNH VÕ SĨ CHIBI
 * ============================================================
 *  Tỉ lệ chibi: đầu bằng khoảng nửa chiều cao người. Toàn bộ vẽ bằng
 *  border-radius + gradient, không ảnh.
 *
 *  Gốc .fg cao 420px. Mọi kích thước con tính theo px thật trong khung đó,
 *  còn phóng to thu nhỏ thì đặt --s ở thẻ cha.
 */

.fg {
  --s: 1;
  position: relative;
  width: 260px;
  height: 420px;
  transform: scale(var(--s));
  transform-origin: 50% 100%;
  /* Phe xanh đứng bên phải nên phải quay mặt sang trái */
  --face: 1;
}
.fg--blue { --face: -1; }

.fg__rig {
  position: absolute;
  inset: 0;
  transform: scaleX(var(--face));
  transform-origin: 50% 100%;
  animation: fgIdle 1.6s ease-in-out infinite;
}

/* Nhún thở lúc thủ — vai lên xuống, người dập dềnh nhẹ */
@keyframes fgIdle {
  0%, 100% { transform: scaleX(var(--face)) translateY(0) rotate(0deg); }
  50% { transform: scaleX(var(--face)) translateY(-7px) rotate(-1deg); }
}

/* Bóng dưới chân — thiếu nó thì võ sĩ như dán lên nền */
.fg__shadow {
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 190px;
  height: 34px;
  margin-left: -95px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6) 0 46%, transparent 74%);
}

/* ---------- Thân ---------- */
.fg__torso {
  position: absolute;
  left: 50%;
  bottom: 106px;
  width: 152px;
  height: 124px;
  margin-left: -76px;
  border-radius: 50px 50px 30px 30px;
  background:
    linear-gradient(180deg, var(--main) 0%, var(--main) 58%, var(--body) 100%);
  box-shadow:
    inset -14px 0 22px rgba(0, 0, 0, 0.3),
    inset 12px 0 18px rgba(255, 255, 255, 0.18),
    0 6px 14px rgba(0, 0, 0, 0.35);
  z-index: 3;
}
/* Đai lưng */
.fg__belt {
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 12px;
  height: 20px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--trim), rgba(0, 0, 0, 0.45));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
/* Số áo */
.fg__num {
  position: absolute;
  left: 50%;
  top: 30px;
  width: 52px;
  height: 52px;
  margin-left: -26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 3px solid var(--trim);
  display: grid;
  place-items: center;
  font: 900 30px/1 "Bebas Neue", "Arial Narrow", Arial, sans-serif;
  color: var(--trim);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

/* ---------- Chân ---------- */
/* Chân chibi: ngắn và mập, đứng dạng ra cho vững chứ không chụm như que */
.fg__leg {
  position: absolute;
  bottom: 0;
  width: 56px;
  height: 122px;
  border-radius: 26px 26px 14px 14px;
  background: linear-gradient(180deg, var(--body) 0%, #1c1c22 62%);
  z-index: 2;
}
.fg__leg--back { left: 68px; z-index: 1; filter: brightness(0.72); }
.fg__leg--front { left: 138px; }
/* Giày */
.fg__boot {
  position: absolute;
  left: -8px;
  right: -12px;
  bottom: -2px;
  height: 34px;
  border-radius: 12px 16px 10px 10px;
  background: linear-gradient(180deg, #f4f6fb 0%, #cfd6e4 60%, #8f97aa 100%);
  box-shadow: inset 0 -6px 8px rgba(0, 0, 0, 0.25);
}
.fg__boot::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 8px;
  height: 5px;
  border-radius: 3px;
  background: var(--main);
}

/* ---------- Tay + găng ---------- */
.fg__arm {
  position: absolute;
  width: 40px;
  height: 96px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--skin) 0%, var(--skin-dark) 100%);
  transform-origin: 50% 14px;
  transition: transform 0.09s ease-out;
}
/* Tay sau: khuất sau thân, hơi tối */
/* Trên thân (z 3) để thấy cả cánh tay — để dưới thì chỉ còn quả găng lơ lửng
   cạnh người, nhìn như găng bay */
.fg__arm--back {
  left: 44px;
  bottom: 148px;
  z-index: 4;
  filter: brightness(0.78);
  transform: rotate(28deg);
}
/* Tay trước: giơ lên thủ trước mặt, găng ngang cằm */
.fg__arm--front {
  left: 172px;
  bottom: 150px;
  z-index: 6;
  transform: rotate(-34deg);
}
/* Găng đấm — quả bầu tròn to gấp rưỡi bàn tay chibi */
.fg__glove {
  position: absolute;
  left: 50%;
  bottom: -30px;
  width: 76px;
  height: 74px;
  margin-left: -38px;
  border-radius: 40px 40px 34px 34px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.5) 0 18%, transparent 46%),
    linear-gradient(180deg, var(--glove) 0%, rgba(0, 0, 0, 0.55) 100%);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.45);
}
/* Cổ găng */
.fg__glove::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: -10px;
  height: 18px;
  border-radius: 8px;
  background: var(--trim);
}

/* ---------- Đầu ---------- */
.fg__head {
  position: absolute;
  left: 50%;
  bottom: 198px;
  width: 196px;
  height: 190px;
  margin-left: -98px;
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.55) 0 14%, transparent 44%),
    linear-gradient(180deg, var(--skin) 0%, var(--skin-dark) 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
  z-index: 5;
  transform-origin: 50% 100%;
  transition: transform 0.1s ease-out;
}
/* Tóc: chỏm phủ trán */
.fg__hair {
  position: absolute;
  left: -6px;
  right: -6px;
  top: -12px;
  height: 92px;
  border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, var(--hair) 62%);
}
/* Băng đô quấn trán — đúng chất võ sĩ */
.fg__band {
  position: absolute;
  left: -10px;
  right: -10px;
  top: 62px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--band), rgba(0, 0, 0, 0.5));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  z-index: 3;
}
/* Đuôi băng đô bay phất phơ */
.fg__band::after {
  content: "";
  position: absolute;
  right: -26px;
  top: 2px;
  width: 34px;
  height: 12px;
  border-radius: 6px;
  background: var(--band);
  transform-origin: 0 50%;
  animation: fgBand 0.9s ease-in-out infinite;
}
@keyframes fgBand {
  0%, 100% { transform: rotate(-8deg) scaleX(1); }
  50% { transform: rotate(10deg) scaleX(0.88); }
}
.fg__ear {
  position: absolute;
  top: 84px;
  width: 26px;
  height: 32px;
  border-radius: 50%;
  background: var(--skin-dark);
}
.fg__ear--l { left: -12px; }
.fg__ear--r { right: -12px; }

/* Mắt */
.fg__eye {
  position: absolute;
  top: 96px;
  width: 34px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.fg__eye--l { left: 34px; }
.fg__eye--r { right: 34px; }
.fg__eye i {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 20px;
  height: 22px;
  margin-left: -10px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff 0 16%, #2b2f3a 20%, #12141b 100%);
  animation: fgLook 3.4s ease-in-out infinite;
}
/* Liếc sang đối thủ rồi về — cho mắt có sự sống */
@keyframes fgLook {
  0%, 40%, 100% { transform: translateX(3px); }
  55%, 85% { transform: translateX(-4px); }
}
/* Lông mày chau lại — mặt lì của võ sĩ */
.fg__brow {
  position: absolute;
  top: 82px;
  width: 40px;
  height: 9px;
  border-radius: 5px;
  background: var(--hair);
  z-index: 4;
}
.fg__brow--l { left: 30px; transform: rotate(12deg); }
.fg__brow--r { right: 30px; transform: rotate(-12deg); }

/* ---------- Mồm ---------- */
/* Bình thường: một nét cong mím lại, hơi lệch cho có thần */
.fg__mouth {
  position: absolute;
  left: 50%;
  top: 142px;
  width: 46px;
  height: 12px;
  margin-left: -23px;
  border-radius: 0 0 24px 24px;
  background: #7d2436;
  overflow: hidden;
  transition: width 0.14s ease, height 0.14s ease, margin 0.14s ease,
              border-radius 0.14s ease, background 0.14s ease;
}
.fg__tooth {
  position: absolute;
  top: 0;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 0 0 3px 3px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.fg__tooth--l { left: 22%; }
.fg__tooth--r { right: 22%; }
.fg__tongue {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 26px;
  height: 14px;
  margin-left: -13px;
  border-radius: 12px 12px 6px 6px;
  background: #e0566f;
  opacity: 0;
  transition: opacity 0.12s ease;
}

/* Vết bầm + mồ hôi: ẩn cho tới khi mất máu */
.fg__bruise {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(circle, rgba(120, 40, 120, 0.85) 0 40%, rgba(90, 30, 90, 0.35) 70%, transparent 82%);
}
.fg__bruise--cheek { left: 18px; top: 128px; width: 44px; height: 32px; }
.fg__bruise--eye { right: 24px; top: 88px; width: 50px; height: 40px; }
.fg__sweat {
  position: absolute;
  left: 26px;
  top: 66px;
  width: 12px;
  height: 18px;
  border-radius: 50% 50% 50% 50% / 66% 66% 34% 34%;
  background: rgba(190, 235, 255, 0.9);
  opacity: 0;
}

/* ============================================================
   MỨC HƯ HẠI — càng mất máu mặt càng nát
   ============================================================ */

/* Mức 1: bầm mắt, bắt đầu vã mồ hôi */
.fg.is-dmg1 .fg__bruise--eye { opacity: 0.75; }
.fg.is-dmg1 .fg__sweat { opacity: 1; animation: fgSweat 1.5s ease-in infinite; }
.fg.is-dmg1 .fg__eye--r { height: 28px; top: 102px; }

/* Mức 2: sưng vều, hé mồm thở dốc, thấy răng */
.fg.is-dmg2 .fg__bruise { opacity: 0.9; }
.fg.is-dmg2 .fg__sweat { opacity: 1; animation: fgSweat 1.1s ease-in infinite; }
.fg.is-dmg2 .fg__eye--r { height: 16px; top: 108px; }
.fg.is-dmg2 .fg__mouth {
  width: 58px;
  height: 30px;
  margin-left: -29px;
  border-radius: 14px 14px 22px 22px;
  background: #5e1524;
}
.fg.is-dmg2 .fg__tooth--l { opacity: 1; }
.fg.is-dmg2 .fg__tongue { opacity: 1; }

/* Mức 3: VỠ MỒM — há hoác, rụng hết răng, máu ứa ra mép */
.fg.is-dmg3 .fg__bruise { opacity: 1; }
.fg.is-dmg3 .fg__eye--r { height: 10px; top: 112px; background: #b98b7a; }
.fg.is-dmg3 .fg__brow--r { transform: rotate(-24deg); }
.fg.is-dmg3 .fg__mouth {
  width: 76px;
  height: 52px;
  margin-left: -38px;
  border-radius: 18px 18px 34px 34px;
  background: #460d18;
  box-shadow: inset 0 6px 10px rgba(0, 0, 0, 0.6);
}
.fg.is-dmg3 .fg__tooth { opacity: 0; }
.fg.is-dmg3 .fg__tongue { opacity: 1; height: 20px; }
/**
 * Máu chảy từ khoé mồm xuống cằm.
 *
 * Vẽ ở thẻ đầu chứ không ở thẻ mồm: mồm phải bật overflow:hidden để cái lưỡi
 * nằm gọn bên trong, mà đã hidden thì vệt máu thò xuống dưới bị cắt sạch.
 */
.fg.is-dmg3 .fg__head::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 186px;
  width: 13px;
  height: 46px;
  margin-left: -28px;
  border-radius: 6px 6px 9px 9px;
  background: linear-gradient(180deg, #d4121f, #7a0611);
  box-shadow: 0 0 8px rgba(200, 20, 34, 0.75);
  animation: fgDrip 2.4s ease-in infinite;
}
/* Giọt tụ ở cằm rồi rơi */
@keyframes fgDrip {
  0%, 60% { height: 46px; opacity: 1; }
  80% { height: 62px; opacity: 1; }
  100% { height: 46px; opacity: 0.85; }
}
.fg.is-dmg3 .fg__head { filter: saturate(0.9) brightness(0.96); }

@keyframes fgSweat {
  0% { opacity: 0; transform: translateY(0) scale(0.7); }
  30% { opacity: 1; transform: translateY(6px) scale(1); }
  100% { opacity: 0; transform: translateY(40px) scale(0.9); }
}

/* ============================================================
   ĐÒN ĐÁNH
   ============================================================ */

/* --- Đấm thẳng: tay trước phóng hết cỡ, người chồm theo --- */
.fg.is-jab .fg__arm--front {
  animation: fgJabArm 0.34s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.fg.is-jab .fg__rig {
  animation: fgLunge 0.34s cubic-bezier(0.2, 0.9, 0.25, 1);
}
@keyframes fgJabArm {
  0% { transform: rotate(-30deg) translate(0, 0); }
  38% { transform: rotate(84deg) translate(6px, -18px) scaleY(1.22); }
  100% { transform: rotate(-30deg) translate(0, 0); }
}
@keyframes fgLunge {
  0%, 100% { transform: scaleX(var(--face)) translateX(0) rotate(0deg); }
  38% { transform: scaleX(var(--face)) translateX(48px) rotate(6deg); }
}

/* --- Đấm móc: tay sau vòng ngang, cả người xoay theo --- */
.fg.is-hook .fg__arm--back {
  animation: fgHookArm 0.42s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.fg.is-hook .fg__rig {
  animation: fgHookBody 0.42s cubic-bezier(0.2, 0.9, 0.25, 1);
}
@keyframes fgHookArm {
  0% { transform: rotate(24deg); }
  20% { transform: rotate(-40deg) translateX(-16px); }
  55% { transform: rotate(96deg) translate(18px, -22px) scaleY(1.18); }
  100% { transform: rotate(24deg); }
}
@keyframes fgHookBody {
  0%, 100% { transform: scaleX(var(--face)) translateX(0) rotate(0deg); }
  20% { transform: scaleX(var(--face)) translateX(-16px) rotate(-8deg); }
  55% { transform: scaleX(var(--face)) translateX(56px) rotate(12deg); }
}

/* --- Móc ngược: bật từ dưới lên, đây là cú làm vỡ mồm --- */
.fg.is-uppercut .fg__arm--front {
  animation: fgUpper 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.fg.is-uppercut .fg__rig {
  animation: fgUpperBody 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fgUpper {
  0% { transform: rotate(-30deg); }
  26% { transform: rotate(30deg) translateY(26px) scaleY(0.9); }
  58% { transform: rotate(-116deg) translate(20px, -46px) scaleY(1.3); }
  100% { transform: rotate(-30deg); }
}
@keyframes fgUpperBody {
  0%, 100% { transform: scaleX(var(--face)) translate(0, 0) rotate(0deg); }
  26% { transform: scaleX(var(--face)) translate(-10px, 16px) rotate(-4deg); }
  58% { transform: scaleX(var(--face)) translate(58px, -26px) rotate(10deg); }
}

/* --- Trúng đòn thường: đầu giật ngược, người lùi --- */
.fg.is-hit .fg__head { animation: fgHeadSnap 0.32s ease-out; }
.fg.is-hit .fg__rig { animation: fgKnock 0.32s ease-out; }
@keyframes fgHeadSnap {
  0% { transform: rotate(0deg) translateX(0); }
  30% { transform: rotate(-16deg) translateX(-16px); }
  100% { transform: rotate(0deg) translateX(0); }
}
@keyframes fgKnock {
  0%, 100% { transform: scaleX(var(--face)) translateX(0) rotate(0deg); }
  30% { transform: scaleX(var(--face)) translateX(-34px) rotate(-5deg); }
}

/* --- Trúng đòn nặng: bay ngược, xoay người, đầu ngửa hẳn ra --- */
.fg.is-bighit .fg__head { animation: fgHeadSmash 0.62s cubic-bezier(0.2, 0.8, 0.3, 1); }
.fg.is-bighit .fg__rig { animation: fgBlast 0.62s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes fgHeadSmash {
  0% { transform: rotate(0deg) translate(0, 0) scale(1); }
  18% { transform: rotate(-40deg) translate(-34px, -14px) scale(1.1, 0.9); }
  50% { transform: rotate(-22deg) translate(-18px, 0) scale(0.96, 1.05); }
  100% { transform: rotate(0deg) translate(0, 0) scale(1); }
}
@keyframes fgBlast {
  0%, 100% { transform: scaleX(var(--face)) translate(0, 0) rotate(0deg); }
  18% { transform: scaleX(var(--face)) translate(-96px, -22px) rotate(-16deg); }
  50% { transform: scaleX(var(--face)) translate(-52px, 4px) rotate(-8deg); }
}

/* --- Đỡ đòn --- */
.fg.is-block .fg__arm--front { transform: rotate(-72deg) translate(-8px, -18px); }
.fg.is-block .fg__arm--back { transform: rotate(-56deg) translate(4px, -14px); }

/* ============================================================
   ĐO VÁN / THẮNG
   ============================================================ */

/* Nằm sõng soài, mắt thành hai dấu nhân, mồm há hốc */
.fg.is-ko .fg__rig {
  animation: fgFall 0.9s cubic-bezier(0.3, 1.4, 0.5, 1) forwards;
}
@keyframes fgFall {
  0% { transform: scaleX(var(--face)) rotate(0deg) translate(0, 0); }
  40% { transform: scaleX(var(--face)) rotate(-40deg) translate(-40px, -30px); }
  100% { transform: scaleX(var(--face)) rotate(-84deg) translate(-70px, 66px); }
}
.fg.is-ko .fg__eye { background: transparent; box-shadow: none; }
.fg.is-ko .fg__eye i {
  background: none;
  animation: none;
  width: 30px;
  height: 6px;
  margin-left: -15px;
  border-radius: 3px;
  box-shadow: 0 0 0 0 transparent;
}
/* Hai gạch chéo = mắt chữ X */
.fg.is-ko .fg__eye i::before,
.fg.is-ko .fg__eye i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #2b2f3a;
  border-radius: 3px;
}
.fg.is-ko .fg__eye i::before { transform: rotate(45deg); }
.fg.is-ko .fg__eye i::after { transform: rotate(-45deg); }
.fg.is-ko .fg__mouth {
  width: 60px;
  height: 44px;
  margin-left: -30px;
  border-radius: 50%;
  background: #460d18;
}
.fg.is-ko .fg__band::after { animation: none; }

/* Thắng: nhảy tại chỗ, hai tay giơ cao */
.fg.is-win .fg__rig { animation: fgWin 0.62s ease-in-out infinite; }
.fg.is-win .fg__arm--front { transform: rotate(-150deg) translate(6px, -10px); }
.fg.is-win .fg__arm--back { transform: rotate(150deg) translate(-6px, -10px); }
.fg.is-win .fg__mouth {
  width: 62px;
  height: 34px;
  margin-left: -31px;
  border-radius: 8px 8px 30px 30px;
  background: #5e1524;
}
.fg.is-win .fg__tongue { opacity: 1; }
@keyframes fgWin {
  0%, 100% { transform: scaleX(var(--face)) translateY(0) rotate(0deg); }
  50% { transform: scaleX(var(--face)) translateY(-34px) rotate(3deg); }
}

/* Máy yếu: bỏ mấy hoạt ảnh nền chạy suốt, giữ lại đòn đánh */
.is-lite .fg__band::after,
.is-lite .fg__eye i { animation: none; }

/* ============================================================
   KIỂU TÓC — phân biệt cầu thủ trong kho
   ============================================================
   Chỏm tóc gốc (.fg__hair) giữ nguyên, mỗi kiểu chỉnh lại dáng và thêm chi
   tiết bằng ::before / ::after. Không dùng ảnh nên thêm người mới chỉ tốn
   đúng một dòng dữ liệu trong roster.js. */

/* Cắt cua sát đầu */
.fg--hair-buzz .fg__hair {
  height: 74px;
  top: -4px;
  left: 2px;
  right: 2px;
  border-radius: 50% 50% 46% 46% / 76% 76% 24% 24%;
  opacity: 0.94;
}
/* Xoăn — ba cụm tròn nhô lên trên */
.fg--hair-curly .fg__hair {
  height: 96px;
  border-radius: 46% 46% 40% 40% / 66% 66% 34% 34%;
}
.fg--hair-curly .fg__hair::before,
.fg--hair-curly .fg__hair::after {
  content: "";
  position: absolute;
  top: -22px;
  width: 74px;
  height: 62px;
  border-radius: 50%;
  background: var(--hair);
}
.fg--hair-curly .fg__hair::before { left: 6px; }
.fg--hair-curly .fg__hair::after { right: 6px; }
/* Dài — hai lọn xoã xuống hai bên tai */
.fg--hair-long .fg__hair { height: 104px; }
.fg--hair-long .fg__hair::before,
.fg--hair-long .fg__hair::after {
  content: "";
  position: absolute;
  top: 52px;
  width: 44px;
  height: 116px;
  border-radius: 22px 22px 26px 26px;
  background: linear-gradient(180deg, var(--hair), rgba(0, 0, 0, 0.35));
}
.fg--hair-long .fg__hair::before { left: -10px; }
.fg--hair-long .fg__hair::after { right: -10px; }
/* Búi tó sau gáy */
.fg--hair-bun .fg__hair { height: 80px; }
.fg--hair-bun .fg__hair::after {
  content: "";
  position: absolute;
  top: -6px;
  right: -34px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--hair);
  box-shadow: inset -6px -6px 10px rgba(0, 0, 0, 0.35);
}
/* Mào gà giữa đỉnh đầu */
.fg--hair-mohawk .fg__hair {
  height: 62px;
  opacity: 0.5;
}
.fg--hair-mohawk .fg__hair::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -46px;
  width: 62px;
  height: 74px;
  margin-left: -31px;
  border-radius: 30px 30px 6px 6px;
  background: linear-gradient(180deg, var(--hair) 0%, rgba(0, 0, 0, 0.3) 100%);
}

/* ============================================================
   BÀN TAY MỞ — dùng cho tát và chưởng
   ============================================================
   Bình thường ẩn sau găng; khi ra đòn tát / chưởng thì găng biến, bàn tay
   hiện ra, xong đòn lại đeo găng vào. */
.fg__palm {
  position: absolute;
  left: 50%;
  bottom: -30px;
  width: 70px;
  height: 78px;
  margin-left: -35px;
  border-radius: 34px 34px 26px 26px;
  background:
    radial-gradient(circle at 36% 26%, rgba(255, 255, 255, 0.5) 0 16%, transparent 44%),
    linear-gradient(180deg, var(--skin) 0%, var(--skin-dark) 100%);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);
  opacity: 0;
}
/* Bốn ngón khép */
.fg__palm::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 4px;
  height: 26px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.12);
}
.fg.is-slap .fg__glove,
.fg.is-palm .fg__glove { opacity: 0; }
.fg.is-slap .fg__palm,
.fg.is-palm .fg__palm { opacity: 1; }

/* ============================================================
   BỘ ĐÒN MỞ RỘNG
   ============================================================ */

/* --- Đấm mạnh: vung tay ra sau lấy đà rồi bổ tới, cả người xoay --- */
.fg.is-heavy .fg__arm--back { animation: fgHeavyArm 0.62s cubic-bezier(0.2, 0.9, 0.25, 1); }
.fg.is-heavy .fg__rig { animation: fgHeavyBody 0.62s cubic-bezier(0.2, 0.9, 0.25, 1); }
@keyframes fgHeavyArm {
  0% { transform: rotate(28deg); }
  30% { transform: rotate(-96deg) translate(-28px, 18px); }
  62% { transform: rotate(112deg) translate(30px, -30px) scaleY(1.3); }
  100% { transform: rotate(28deg); }
}
@keyframes fgHeavyBody {
  0%, 100% { transform: scaleX(var(--face)) translate(0, 0) rotate(0deg); }
  30% { transform: scaleX(var(--face)) translate(-34px, 8px) rotate(-14deg); }
  62% { transform: scaleX(var(--face)) translate(74px, -10px) rotate(16deg); }
}

/* --- Tát nhẹ: bàn tay quét ngang mặt, người chỉ nghiêng nhẹ --- */
.fg.is-slap .fg__arm--front { animation: fgSlapArm 0.38s cubic-bezier(0.3, 1, 0.4, 1); }
.fg.is-slap .fg__rig { animation: fgSlapBody 0.38s ease-out; }
@keyframes fgSlapArm {
  0% { transform: rotate(-34deg); }
  30% { transform: rotate(-96deg) translate(-8px, -10px); }
  62% { transform: rotate(52deg) translate(26px, -26px); }
  100% { transform: rotate(-34deg); }
}
@keyframes fgSlapBody {
  0%, 100% { transform: scaleX(var(--face)) translateX(0) rotate(0deg); }
  60% { transform: scaleX(var(--face)) translateX(26px) rotate(4deg); }
}

/* --- Đá thấp: chân trước hất tới, người ngả ra sau giữ thăng bằng --- */
.fg.is-kick .fg__leg--front { animation: fgKickLeg 0.52s cubic-bezier(0.2, 0.9, 0.25, 1); }
.fg.is-kick .fg__rig { animation: fgKickBody 0.52s cubic-bezier(0.2, 0.9, 0.25, 1); }
@keyframes fgKickLeg {
  0% { transform: rotate(0deg); }
  24% { transform: rotate(22deg) translateY(6px); }
  56% { transform: rotate(-78deg) translate(28px, -34px); }
  100% { transform: rotate(0deg); }
}
@keyframes fgKickBody {
  0%, 100% { transform: scaleX(var(--face)) translate(0, 0) rotate(0deg); }
  56% { transform: scaleX(var(--face)) translate(40px, -6px) rotate(-9deg); }
}

/* --- Đá cao: chân vòng lên ngang đầu, cả người bật nhảy --- */
.fg.is-highkick .fg__leg--front { animation: fgHighLeg 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.fg.is-highkick .fg__leg--back { animation: fgHighBack 0.6s ease-out; }
.fg.is-highkick .fg__rig { animation: fgHighBody 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes fgHighLeg {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(34deg) translateY(8px); }
  60% { transform: rotate(-128deg) translate(48px, -66px) scaleY(1.14); }
  100% { transform: rotate(0deg); }
}
@keyframes fgHighBack {
  0%, 100% { transform: rotate(0deg); }
  60% { transform: rotate(14deg); }
}
@keyframes fgHighBody {
  0%, 100% { transform: scaleX(var(--face)) translate(0, 0) rotate(0deg); }
  30% { transform: scaleX(var(--face)) translate(-8px, 10px) rotate(4deg); }
  60% { transform: scaleX(var(--face)) translate(54px, -50px) rotate(-16deg); }
}

/* --- Chưởng: thu tay lấy khí rồi đẩy thẳng, quả cầu khí bay ra
       (quả cầu do arena.js sinh, xem .chi trong style.css) --- */
.fg.is-palm .fg__arm--front { animation: fgPalmArm 0.78s cubic-bezier(0.16, 1, 0.3, 1); }
.fg.is-palm .fg__arm--back { animation: fgPalmBack 0.78s cubic-bezier(0.16, 1, 0.3, 1); }
.fg.is-palm .fg__rig { animation: fgPalmBody 0.78s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes fgPalmArm {
  0% { transform: rotate(-34deg); }
  34% { transform: rotate(-14deg) translate(-40px, 6px) scale(0.92); }
  56% { transform: rotate(92deg) translate(34px, -14px) scaleY(1.24); }
  100% { transform: rotate(-34deg); }
}
@keyframes fgPalmBack {
  0% { transform: rotate(28deg); }
  34% { transform: rotate(6deg) translate(-30px, 4px); }
  56% { transform: rotate(84deg) translate(18px, -10px); }
  100% { transform: rotate(28deg); }
}
@keyframes fgPalmBody {
  0%, 100% { transform: scaleX(var(--face)) translate(0, 0) rotate(0deg); }
  34% { transform: scaleX(var(--face)) translate(-30px, 12px) rotate(-6deg) scale(0.97); }
  56% { transform: scaleX(var(--face)) translate(46px, -8px) rotate(8deg) scale(1.04); }
}

/* ============================================================
   TRÚNG ĐÒN — mỗi kiểu đòn một kiểu lãnh
   ============================================================ */

/* Bị tát: đầu quay ngoắt sang bên, má in vết đỏ năm ngón */
.fg.is-hitslap .fg__head { animation: fgSlapped 0.44s cubic-bezier(0.2, 0.9, 0.3, 1); }
.fg.is-hitslap .fg__rig { animation: fgSlappedBody 0.44s ease-out; }
@keyframes fgSlapped {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-30deg) translateX(-12px); }
  60% { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}
@keyframes fgSlappedBody {
  0%, 100% { transform: scaleX(var(--face)) translateX(0); }
  25% { transform: scaleX(var(--face)) translateX(-16px); }
}
/* Vết bàn tay đỏ trên má — hiện đúng lúc bị tát rồi mờ dần */
.fg__slapmark {
  position: absolute;
  left: 20px;
  top: 118px;
  width: 66px;
  height: 54px;
  border-radius: 40% 40% 46% 46%;
  background:
    repeating-linear-gradient(96deg,
      rgba(255, 60, 70, 0.75) 0 8px, transparent 8px 17px);
  opacity: 0;
}
.fg.is-hitslap .fg__slapmark { animation: fgSlapMark 1.6s ease-out forwards; }
@keyframes fgSlapMark {
  0% { opacity: 0; }
  12% { opacity: 0.95; }
  100% { opacity: 0; }
}

/* Bị đá: gập người ôm bụng rồi bật lùi */
.fg.is-hitkick .fg__rig { animation: fgKicked 0.56s cubic-bezier(0.2, 0.85, 0.3, 1); }
.fg.is-hitkick .fg__head { animation: fgKickedHead 0.56s ease-out; }
@keyframes fgKicked {
  0%, 100% { transform: scaleX(var(--face)) translate(0, 0) rotate(0deg) scaleY(1); }
  22% { transform: scaleX(var(--face)) translate(-30px, 16px) rotate(-6deg) scaleY(0.9); }
  55% { transform: scaleX(var(--face)) translate(-58px, 4px) rotate(-12deg) scaleY(0.96); }
}
@keyframes fgKickedHead {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  22% { transform: rotate(16deg) translateY(18px); }
}

/* Trúng chưởng: bay ngược hẳn ra sau, người rung bần bật */
.fg.is-blast .fg__rig { animation: fgBlasted 0.86s cubic-bezier(0.15, 0.9, 0.3, 1); }
.fg.is-blast .fg__head { animation: fgHeadSmash 0.86s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes fgBlasted {
  0%, 100% { transform: scaleX(var(--face)) translate(0, 0) rotate(0deg); }
  16% { transform: scaleX(var(--face)) translate(-150px, -40px) rotate(-26deg); }
  44% { transform: scaleX(var(--face)) translate(-80px, 6px) rotate(-12deg); }
  70% { transform: scaleX(var(--face)) translate(-24px, 0) rotate(-4deg); }
}

/* ============================================================
   KHỐI 3D — đổ bóng trong cho nhân vật có chiều dày
   ============================================================
   Không dựng hình khối thật (quá nặng cho vài chục nhân vật), mà giả khối
   bằng cách: một lớp tối ôm mép phải và một dải sáng ở mép trái của từng
   mảng. Mắt đọc ra hình tròn có chiều dày chứ không phải hình cắt giấy. */
.fg__head,
.fg__torso,
.fg__leg,
.fg__glove,
.fg__palm {
  /* Sáng bên trái (phía đèn), tối dần sang phải — thống nhất một nguồn sáng */
  box-shadow:
    inset -16px -10px 26px rgba(0, 0, 0, 0.34),
    inset 12px 8px 20px rgba(255, 255, 255, 0.16),
    0 8px 18px rgba(0, 0, 0, 0.42);
}
/* Viền dưới cằm cho đầu tách khỏi thân */
.fg__head::before {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -6px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  filter: blur(4px);
}

/* ============================================================
   BA CHỖ PHẢI CHỮA SAU KHI DỰNG XONG KHO
   ============================================================ */

/**
 * 1. Số áo bị lộn ngược ở phe xanh.
 *    Bộ khung phe xanh lật ngang (scaleX(-1)) để quay mặt sang trái, chữ số
 *    in trên áo lật theo nên "19" đọc thành "ǝɿ". Lật ngược lại đúng thẻ số.
 */
.fg--blue .fg__num { transform: scaleX(-1); }

/**
 * 2. Tóc xoăn thành hai vòng tròn nổi hẳn trên đỉnh đầu — nhìn ra tai chuột.
 *    Hạ hai cụm xuống ôm sát hộp sọ, thu nhỏ lại và thêm cụm giữa cho khối
 *    tóc liền thành một mảng xoăn.
 */
.fg--hair-curly .fg__hair::before,
.fg--hair-curly .fg__hair::after {
  top: 2px;
  width: 62px;
  height: 54px;
}
.fg--hair-curly .fg__hair::before { left: -2px; }
.fg--hair-curly .fg__hair::after { right: -2px; }
/* Cụm giữa nhô nhẹ lên, dùng chính thẻ tóc làm nền */
.fg--hair-curly .fg__hair {
  box-shadow:
    inset 0 10px 0 -2px var(--hair),
    0 -10px 0 -14px var(--hair);
}

/**
 * 3. Vệt máu ở mồm bị chính cái mồm há hoác che mất.
 *    Mồm mức 3 cao 52px tính từ y 142, tức chạm tới 194 — vệt máu đặt ở 186
 *    nằm lọt trong đó. Đẩy hẳn xuống cằm và kéo dài thêm.
 */
.fg.is-dmg3 .fg__head::after {
  top: 198px;
  height: 54px;
  margin-left: -30px;
}

/* Chibi vẽ CSS chưa có riêng đòn "mãnh hổ" — mượn nhịp của đòn đấm mạnh */
.fg.is-tiger .fg__arm--back { animation: fgHeavyArm 0.62s cubic-bezier(0.2, 0.9, 0.25, 1); }
.fg.is-tiger .fg__rig { animation: fgHeavyBody 0.62s cubic-bezier(0.2, 0.9, 0.25, 1); }