/* ══════════════════════════════════════════════════════════════════════════
   tiers.css — TOÀN BỘ phần nhìn "biến hình theo tier" của 2 cầu thủ
   (phe 1 gợi hình Ronaldo, phe 2 gợi hình Messi — dựng bằng DOM, xem overlay.html).

   Tách khỏi overlay.html để chỉnh visual mà không phải đụng vào JS.
   overlay.html chỉ gắn class `tier-0` … `tier-4` lên `.fighter` (và lên
   `.tier-badge`); mọi màu / opacity / tốc độ pulse / biên độ rung đều nằm
   ở đây. JS chỉ giữ phần LOGIC không biểu diễn được bằng CSS: số particle
   sinh ra mỗi giây, cap particle, và có shake màn hình khi donate hay không
   (xem TierSystem.levels trong overlay.html).

   ── Thiết kế: mỗi phe 1 "chất năng lượng" riêng ──
   Toàn bộ ramp biến hình chạy theo chất đó thay vì dùng chung 1 bảng màu:

     Phe 1 — LỬA : than hồng → ngọn lửa → vàng chảy → trắng nóng
     Phe 2 — BĂNG: lam sâu  → cyan     → trắng-xanh → trắng chói

   Ramp nằm ở mục [0] dưới dạng `--e1 … --e4` (4 nấc năng lượng) + `--hair-0
   … --hair-4`. Các khối tier ở mục [1] KHÔNG chứa màu cứng, chỉ trỏ vào ramp
   → đổi "chất" của 1 phe = sửa đúng 1 khối ở mục [0], không đụng gì khác.

   Muốn tinh chỉnh 1 tier: sửa đúng khối `.fighter.tier-N` ở mục [1].

     --aura-op       độ mờ aura (0 = tắt)
     --aura-scale    kích thước aura
     --aura-blur     độ nhoè aura
     --aura-pulse    chu kỳ pulse (thời gian 1 nhịp thở)
     --aura-c1/2/3   3 điểm dừng của radial-gradient (trong → ngoài)
     --hair          màu tóc
     --hair-glow     bán kính glow quanh tóc
     --outline       màu viền các mảnh giáp / cơ thể
     --eye           màu mắt
     --core-c        màu lõi năng lượng trên ngực
     --core-glow     bán kính glow của lõi
     --p-main/--p-alt màu 2 loại particle
     --rise          particle bay lên cao bao nhiêu
     --gong-amp      biên độ rung "gồng sức" của thân người (0 = đứng yên)
     --gong-dur      chu kỳ rung gồng
     --burst-c       màu vòng sáng + chữ khi lên tier

   Thứ tự các mục bên dưới CÓ Ý NGHĨA: `.powerup` flash ở mục [10] phải nằm
   SAU pulse của mục [2] mới thắng được nó (cùng specificity 0,3,0 → source
   order quyết định). Vì vậy KHÔNG viết rule animation cho `.aura`/`.core`
   dưới selector có `#id` (specificity cao hơn sẽ vô hiệu hoá flash) — chỉ
   đặt *token màu* dưới `#fighterN`.

   Tránh CSS mới hơn ~Chrome 111 (vd `color-mix()`): OBS bundle nhiều phiên
   bản CEF khác nhau, bản cũ sẽ lặng lẽ bỏ qua declaration không hỗ trợ.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── [0] Ramp năng lượng riêng của từng phe ──────────────────────────────── */
/* Badge trên header dùng chung ramp với nhân vật để 2 chỗ luôn khớp màu.
   CHỈ định nghĩa custom property ở đây — không rule animation nào (xem đầu file). */

/* Phe 1 — LỬA. */
#fighter1,
#tier-badge1 {
  --e1: #ff5a3c;   /* than hồng   */
  --e2: #ff8c1a;   /* ngọn lửa    */
  --e3: #ffc93c;   /* vàng chảy   */
  --e4: #fff3c4;   /* trắng nóng  */
  --hair-0: #1b1310;  /* tóc đen tự nhiên (Ronaldo) lúc chưa lên tier */
  --hair-1: #5c2822;
  --hair-2: #ff7a2f;
  --hair-3: #ffc247;
  --hair-4: #fff2c8;
  --eye-hi: #ffd98a;
  --eye-max: #fff6dc;
}

/* Phe 2 — BĂNG. */
#fighter2,
#tier-badge2 {
  --e1: #4aa3ff;   /* lam sâu     */
  --e2: #2fd8ff;   /* cyan        */
  --e3: #9ff2ff;   /* trắng-xanh  */
  --e4: #eaffff;   /* trắng chói  */
  --hair-0: #241a12;  /* tóc nâu sẫm tự nhiên (Messi) lúc chưa lên tier */
  --hair-1: #2c3f68;
  --hair-2: #4fc9ff;
  --hair-3: #a5efff;
  --hair-4: #ffffff;
  --eye-hi: #bff4ff;
  --eye-max: #ffffff;
}


/* ── [1] Token theo tier ─────────────────────────────────────────────────── */
/* --tc (màu phe, đọc từ .env) được #fighter1/#fighter2 định nghĩa trong overlay.html. */

/* Tier 0 (chưa lên tier): KHÔNG còn tắt hẳn — một lớp aura rất mờ, quầng theo
   "chất" của phe (--e1) + thở chậm, để nhân vật lúc bình thường vẫn có sinh khí,
   không đứng chết trơ. Vẫn nhạt hơn hẳn tier 1 để chừa chỗ cho biến hình về sau. */
.fighter.tier-0 {
  --aura-op: 0.16;
  --aura-scale: 0.66;
  --aura-blur: 22px;
  --aura-pulse: 3.6s;
  --aura-c1: var(--e1);
  --aura-c2: rgba(255, 255, 255, 0.14);
  --aura-c3: transparent;
  --hair: var(--hair-0);
  --hair-glow: 0px;
  --outline: rgba(0, 0, 0, 0.62);
  --eye: #16161d;
  --core-c: var(--e1);
  --core-glow: 9px;
  --p-main: #ffffff;
  --p-alt: #ffffff;
  --rise: -380px;
  --gong-amp: 0px;
  --gong-dur: 0s;
  --burst-c: var(--tc);
}

/* Tier 1 (>500): năng lượng vừa thức tỉnh — aura mờ, thở chậm. Chưa có particle. */
.fighter.tier-1 {
  --aura-op: 0.32;
  --aura-scale: 0.82;
  --aura-blur: 18px;
  --aura-pulse: 2.6s;
  --aura-c1: var(--e1);
  --aura-c2: rgba(255, 255, 255, 0.20);
  --aura-c3: transparent;
  --hair: var(--hair-1);
  --hair-glow: 7px;
  --outline: rgba(16, 10, 34, 0.68);
  --eye: #16161d;
  --core-c: var(--e1);
  --core-glow: 17px;
  --p-main: var(--e1);
  --p-alt: #ffffff;
  --rise: -380px;
  --gong-amp: 0px;
  --gong-dur: 0s;
  --burst-c: var(--e1);
}

/* Tier 2 (>2000): năng lượng bùng lên — aura rõ, tóc bắt đầu đổi màu + sáng. */
.fighter.tier-2 {
  --aura-op: 0.58;
  --aura-scale: 0.98;
  --aura-blur: 20px;
  --aura-pulse: 1.5s;
  --aura-c1: var(--e2);
  --aura-c2: var(--e1);
  --aura-c3: transparent;
  --hair: var(--hair-2);
  --hair-glow: 18px;
  --outline: rgba(28, 16, 6, 0.72);
  --eye: #241408;
  --core-c: var(--e2);
  --core-glow: 25px;
  --p-main: var(--e2);
  --p-alt: #ffffff;
  --rise: -400px;
  --gong-amp: 0px;
  --gong-dur: 0s;
  --burst-c: var(--e2);
}

/* Tier 3 (>5000): cháy phừng — pulse nhanh, tóc dựng, thân người gồng rung liên tục. */
.fighter.tier-3 {
  --aura-op: 0.84;
  --aura-scale: 1.14;
  --aura-blur: 22px;
  --aura-pulse: 0.55s;
  --aura-c1: var(--e3);
  --aura-c2: var(--e2);
  --aura-c3: transparent;
  --hair: var(--hair-3);
  --hair-glow: 30px;
  --outline: var(--e2);
  --eye: var(--eye-hi);
  --core-c: var(--e3);
  --core-glow: 34px;
  --p-main: var(--e2);
  --p-alt: var(--e3);
  --rise: -430px;
  --gong-amp: 1.6px;
  --gong-dur: 0.09s;
  --burst-c: var(--e3);
}

/* Tier 4 (>10000): tối thượng — aura chói loà, lightning, gồng mạnh nhất. */
.fighter.tier-4 {
  --aura-op: 0.96;
  --aura-scale: 1.34;
  --aura-blur: 26px;
  --aura-pulse: 0.42s;
  --aura-c1: #ffffff;
  --aura-c2: var(--e3);
  --aura-c3: transparent;
  --hair: var(--hair-4);
  --hair-glow: 44px;
  --outline: var(--e4);
  --eye: var(--eye-max);
  --core-c: var(--e4);
  --core-glow: 46px;
  --p-main: var(--e3);
  --p-alt: #ffffff;
  --rise: -470px;
  --gong-amp: 3px;
  --gong-dur: 0.06s;
  --burst-c: var(--e4);
}


/* ── [2] Aura ────────────────────────────────────────────────────────────── */

.aura {
  position: absolute;
  left: 50%;
  bottom: 80px;
  width: 300px;
  height: 340px;
  margin-left: -150px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--aura-c1) 0%, var(--aura-c2) 34%, var(--aura-c3) 68%);
  opacity: var(--aura-op, 0);
  transform: scale(var(--aura-scale, 0.6));
  filter: blur(var(--aura-blur, 12px));
  /* transition chỉ để đổi tier mượt; khi có `animation` chạy thì animation thắng. */
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
  pointer-events: none;
}

/* Nhịp "thở". Keyframes phải nhắc lại scale(var(--aura-scale)) vì animation
   ghi đè hoàn toàn transform của rule gốc. */
@keyframes auraPulse {
  0%, 100% {
    opacity: var(--aura-op, 0);
    transform: scale(var(--aura-scale, 1));
  }
  50% {
    opacity: calc(var(--aura-op, 0) * 1.15);
    transform: scale(calc(var(--aura-scale, 1) * 1.08)) scaleY(1.04);
  }
}

.fighter.tier-0 .aura,
.fighter.tier-1 .aura,
.fighter.tier-2 .aura { animation: auraPulse var(--aura-pulse) ease-in-out infinite; }

/* Tier 3-4 "cháy": pulse nhanh + méo nhẹ theo trục Y cho giống ngọn lửa. */
@keyframes auraBurn {
  0%, 100% { transform: scale(var(--aura-scale, 1)) scaleY(1); }
  35% { transform: scale(calc(var(--aura-scale, 1) * 1.11)) scaleY(1.07) translateY(-4px); }
  70% { transform: scale(calc(var(--aura-scale, 1) * 1.04)) scaleY(0.97); }
}

.fighter.tier-3 .aura,
.fighter.tier-4 .aura { animation: auraBurn var(--aura-pulse) ease-in-out infinite; }

/* Glow lan rộng: lớp aura thứ 2, to và nhoè hơn, chỉ bật từ tier 3.
   Dùng ::after của .aura để không phải thêm div. */
.aura::after {
  content: '';
  position: absolute;
  inset: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--aura-c2) 0%, var(--aura-c3) 62%);
  opacity: 0;
  transition: opacity 0.45s ease-out;
}

.fighter.tier-3 .aura::after { opacity: 0.32; }
.fighter.tier-4 .aura::after { opacity: 0.5; }


/* ── [3] Gồng sức — thân người rung liên tục ở tier cao ──────────────────── */
/* Đặt trên .rig chứ không phải .char (đang chạy state machine idle/pulling/
   powerup) và cũng không phải .sprite (đang giữ scaleX(-1) của fighter2). */

@keyframes gong {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(calc(var(--gong-amp) * -1), var(--gong-amp)); }
  50% { transform: translate(var(--gong-amp), calc(var(--gong-amp) * -0.6)); }
  75% { transform: translate(calc(var(--gong-amp) * 0.6), var(--gong-amp)); }
}

.fighter.tier-3 .rig,
.fighter.tier-4 .rig { animation: gong var(--gong-dur) linear infinite; }

/* Hết ván thì thôi gồng — người thua rung tít trong lúc gục là rất kỳ. */
.fighter.defeat .rig { animation: none; }


/* ── [4] Particle năng lượng bay lên ─────────────────────────────────────── */
/* Số lượng do JS chặn (TierSystem.levels: particleRate + maxParticles).      */

.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.particle {
  position: absolute;
  bottom: 110px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pc, #fff);
  box-shadow: 0 0 14px var(--pc, #fff);
  animation: riseUp linear forwards;
  will-change: transform, opacity;
}

/* JS set `--pc: var(--p-main)` hoặc `var(--p-alt)` — biến lồng nhau được giải
   quyết theo tier đang inherit, nên đổi màu particle chỉ cần sửa mục [1]. */
@keyframes riseUp {
  0% { transform: translate(0, 0) scale(1); opacity: 0.95; }
  100% { transform: translate(var(--dx, 0px), var(--rise, -380px)) scale(0.15); opacity: 0; }
}


/* ── [5] Tóc theo tier ───────────────────────────────────────────────────── */
/* Kiểu tóc là SILHOUETTE riêng của từng phe (clip-path), không phải sprite chép
   từ đâu: phe 1 = lưỡi lửa nhiều ngọn nhỏ, phe 2 = phiến băng ít và sắc.
   Nhân vật quay mặt sang phải (fighter2 bị scaleX(-1) nên tự đối xứng). */

.hair {
  position: absolute;
  left: 40px;
  top: 2px;
  width: 112px;
  height: 56px;
  background: var(--hair, #2b2b3a);
  filter: drop-shadow(0 0 var(--hair-glow, 0px) var(--hair, #2b2b3a));
  transform-origin: 50% 100%;
  transition: background 0.35s, filter 0.35s, top 0.35s, height 0.35s;
  z-index: 6;
}

/* Tóc quiff hất lên phía trước — gợi kiểu tóc đặc trưng của Ronaldo, ít đỉnh
   nhọn hơn bản flame cũ, bồng ở giữa-trước thay vì so le đều. */
#fighter1 .hair {
  clip-path: polygon(0% 100%, 0% 58%, 12% 30%, 26% 46%, 42% 8%, 60% 32%, 76% 14%, 90% 42%, 100% 60%, 100% 100%);
}

/* Tóc ngắn, hất nhẹ sang một bên, gợi kiểu tóc gọn của Messi — thấp và
   phẳng hơn hẳn bản quiff của phe 1. */
#fighter2 .hair {
  clip-path: polygon(0% 100%, 0% 66%, 10% 42%, 22% 56%, 36% 30%, 52% 50%, 68% 36%, 82% 54%, 100% 66%, 100% 100%);
}

/* Tier 2: chưa dựng tóc, chỉ đẩy sáng bằng filter (màu đã đổi qua --hair). */
.fighter.tier-2 .hair {
  filter: brightness(1.3) saturate(1.35)
          drop-shadow(0 0 var(--hair-glow) var(--hair));
}

/* Tier 3-4: tóc dựng đứng, gai to và cao hơn hẳn. Class do JS gắn (`ssj-hair`)
   thay vì bám vào .tier-N, để sau này muốn cho tier khác dùng cũng được. */
.hair.ssj-hair {
  left: 28px;
  top: -44px;
  width: 134px;
  height: 102px;
  animation: hairFlicker 0.26s ease-in-out infinite alternate;
}

/* Bốc lửa: rất nhiều lưỡi, cao thấp so le. */
#fighter1 .hair.ssj-hair {
  clip-path: polygon(
    0% 100%, 4% 40%, 12% 88%, 20% 8%, 30% 70%,
    39% 0%, 49% 62%, 58% 4%, 68% 74%, 78% 14%, 89% 84%, 100% 100%
  );
}

/* Vỡ băng: ít lưỡi hơn, mỗi lưỡi là 1 phiến dài sắc lẹm. */
#fighter2 .hair.ssj-hair {
  clip-path: polygon(
    0% 100%, 3% 46%, 15% 78%, 24% 2%, 36% 66%,
    47% 6%, 57% 70%, 70% 0%, 82% 64%, 93% 20%, 100% 100%
  );
}

@keyframes hairFlicker {
  0% { transform: scaleY(1) scaleX(1); }
  100% { transform: scaleY(1.06) scaleX(0.98); }
}


/* ── [6] Mắt + lõi năng lượng trên ngực ──────────────────────────────────── */

.fighter.tier-3 .eye,
.fighter.tier-4 .eye {
  background: var(--eye, #16161d);
  box-shadow: 0 0 12px var(--eye, transparent);
}

/* .core (viên năng lượng giữa ngực giáp) — hình dạng/vị trí nằm ở overlay.html,
   đây chỉ đổi màu + nhịp đập. Từ tier 2 lõi bắt đầu "thở" theo aura. */
.fighter.tier-2 .core,
.fighter.tier-3 .core,
.fighter.tier-4 .core { animation: coreBeat var(--aura-pulse) ease-in-out infinite; }

@keyframes coreBeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}


/* ── [7] Lightning (chỉ tier 4) ──────────────────────────────────────────── */
/* 4 tia dựng sẵn trong DOM. JS random lại vị trí/góc mỗi lần animation lặp
   (event `animationiteration`) — 4 element nên rẻ, không tạo/xoá node liên tục. */

.lightning {
  position: absolute;
  left: -45px;
  bottom: 100px;
  width: 280px;
  height: 320px;
  pointer-events: none;
  overflow: visible;
}

/* Màu tia lấy từ ramp của phe → phe lửa phóng tia vàng-cam, phe băng phóng tia xanh. */
.bolt {
  position: absolute;
  width: 7px;
  height: 74px;
  background: linear-gradient(180deg, #ffffff 0%, var(--e4) 45%, var(--e3) 100%);
  clip-path: polygon(48% 0%, 100% 38%, 62% 42%, 96% 100%, 8% 46%, 44% 40%, 0% 30%);
  filter: drop-shadow(0 0 10px var(--e3));
  opacity: 0;
  will-change: transform, opacity;
}

/* Chớp rất ngắn rồi tắt hẳn phần lớn chu kỳ → cảm giác ngẫu nhiên, không "nhấp nháy đều". */
@keyframes boltFlash {
  0% { opacity: 0; }
  3% { opacity: 1; }
  9% { opacity: 0.25; }
  13% { opacity: 0.9; }
  20% { opacity: 0; }
  100% { opacity: 0; }
}

.fighter.tier-4 .bolt { animation: boltFlash var(--bolt-dur, 1.1s) linear infinite; }

.fighter.tier-4 .bolt:nth-child(1) { --bolt-dur: 1.05s; animation-delay: 0s; }
.fighter.tier-4 .bolt:nth-child(2) { --bolt-dur: 0.83s; animation-delay: 0.31s; }
.fighter.tier-4 .bolt:nth-child(3) { --bolt-dur: 1.29s; animation-delay: 0.56s; }
.fighter.tier-4 .bolt:nth-child(4) { --bolt-dur: 0.71s; animation-delay: 0.78s; }


/* ── [8] Lên tier: vòng sáng + chữ ───────────────────────────────────────── */

.tier-burst {
  position: absolute;
  left: 50%;
  bottom: 180px;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  border-radius: 50%;
  border: 8px solid var(--burst-c, var(--tc));
  opacity: 0;
  pointer-events: none;
}

.tier-burst.play { animation: tierBurst 0.75s ease-out; }

@keyframes tierBurst {
  0% { opacity: 1; transform: scale(0.2); border-width: 14px; }
  100% { opacity: 0; transform: scale(3.2); border-width: 1px; }
}

.tier-shout {
  position: absolute;
  left: 50%;
  bottom: 450px;
  transform: translateX(-50%);
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 3px;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 0 22px var(--burst-c, var(--tc)), 0 3px 0 rgba(0, 0, 0, 0.75);
  opacity: 0;
  pointer-events: none;
}

.tier-shout.play { animation: tierShout 1.1s ease-out; }

@keyframes tierShout {
  0% { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.6); }
  25% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.15); }
  70% { opacity: 1; transform: translateX(-50%) translateY(-14px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-46px) scale(1); }
}


/* ── [9] Badge tier trên header ──────────────────────────────────────────── */
/* Dùng chung ramp --e1..--e4 với nhân vật (mục [0]) nên badge luôn khớp màu aura. */

.tier-badge.tier-0 { --badge-color: rgba(255, 255, 255, 0.4); --badge-glow: 0px; }
.tier-badge.tier-1 { --badge-color: var(--e1); --badge-glow: 10px; }
.tier-badge.tier-2 { --badge-color: var(--e2); --badge-glow: 16px; }
.tier-badge.tier-3 { --badge-color: var(--e3); --badge-glow: 22px; }
.tier-badge.tier-4 { --badge-color: var(--e4); --badge-glow: 30px; }


/* ── [10] FLASH khi phe nhận donate ──────────────────────────────────────── */
/* PHẢI nằm cuối file: cùng specificity (0,3,0) với các rule pulse ở mục [2] và
   coreBeat ở mục [6], chỉ thắng nhờ source order. Đẩy lên trên là aura/lõi sẽ
   hết flash ở mọi tier. Cũng vì vậy mục [0] chỉ được chứa token, không animation. */

.fighter.powerup .aura { animation: auraFlash 0.4s ease-out; }

@keyframes auraFlash {
  0% { opacity: var(--aura-op, 0); transform: scale(var(--aura-scale, 0.6)); }
  28% { opacity: 1; transform: scale(calc(var(--aura-scale, 0.6) * 1.45)); }
  100% { opacity: var(--aura-op, 0); transform: scale(var(--aura-scale, 0.6)); }
}

/* Lõi ngực nảy mạnh 1 nhịp mỗi lần nạp năng lượng — thấy rõ cả ở tier 0. */
.fighter.powerup .core { animation: coreFlash 0.4s ease-out; }

@keyframes coreFlash {
  0% { transform: scale(1); }
  30% { transform: scale(1.65); }
  100% { transform: scale(1); }
}

/* Tier 0 giờ đã có aura mờ nền; khi donate đẩy nó thành 1 chớp trắng cho nổi. */
.fighter.tier-0.powerup .aura {
  --aura-c1: rgba(255, 255, 255, 0.85);
  --aura-c2: rgba(255, 255, 255, 0.25);
}