/* ================================================================
   SÂN KHẤU CHIẾN ĐẤU KIỂU GAME H5
   Cảnh nền: assets/backgrounds/<địa điểm>.jpg (biến --scene), chưa có thì vẽ núi bằng CSS.
   Đơn vị cqh / cqw tính theo kích thước sân khấu, nên nhân vật tự co giãn theo màn hình.
   ================================================================ */
.stage {
  position: relative; overflow: hidden; container-type: size; user-select: none;
  aspect-ratio: 16 / 9; border-radius: 12px; border: 1px solid var(--line);
  background-color: #e9dcc0;
  background-image:
    var(--scene, none),
    radial-gradient(ellipse 60% 16% at 50% 84%, rgba(70, 50, 25, .25), transparent 70%),
    linear-gradient(to bottom, transparent 54%, #d8c49a 54.3%, #c4aa7c 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'%3E%3Cpath fill='%2393a093' fill-opacity='.45' d='M0 200V120l80-50 70 40 80-70 90 60 80-40 70 35 90-65 90 70 70-30 80 40v90z'/%3E%3Cpath fill='%23667260' fill-opacity='.5' d='M0 200v-40l100-40 80 30 80-45 100 45 90-35 90 40 100-35 80 30 80-20v70z'/%3E%3C/svg%3E"),
    linear-gradient(#dde2d4, #f3ead7 54%);
  background-repeat: no-repeat;
  background-size: cover, 100% 100%, 100% 100%, 100% 38%, 100% 100%;
  background-position: center, 0 0, 0 0, 0 26%, 0 0;
}

/* ---------- Nhân vật: neo ở bàn chân ---------- */
.unit {
  --h: calc(min(21cqh, 15cqw) * var(--s, 1));
  position: absolute; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center;
}
.unit.boss { --h: calc(min(24.5cqh, 17.5cqw) * var(--s, 1)); }
/* Sân khấu dọc (điện thoại): nhân vật to theo chiều ngang */
@container (max-aspect-ratio: 1 / 1) {
  .unit { --h: calc(min(17cqh, 27cqw) * var(--s, 1)); }
  .unit.boss { --h: calc(min(19.5cqh, 31cqw) * var(--s, 1)); }
}
.unit .act { position: relative; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%; }
/* Ô đứng: vòng sáng cố định dưới chân (vàng phe ta, đỏ phe địch), không đi theo khi lao tới */
.unit .spot {
  position: absolute; left: 50%; bottom: calc(var(--h) * -0.055); z-index: -1;
  width: calc(var(--h) * .62); height: calc(var(--h) * .15); transform: translateX(-50%); border-radius: 50%;
  border: 2px solid rgba(233, 196, 106, .45); background: radial-gradient(rgba(233, 196, 106, .14), transparent 70%);
}
.unit.enemy .spot { border-color: rgba(205, 70, 50, .45); background: radial-gradient(rgba(205, 70, 50, .14), transparent 70%); }
.unit.dead .spot { opacity: .3; }
.unit .shadow {
  position: absolute; left: 50%; bottom: calc(var(--h) * -0.04);
  width: calc(var(--h) * .5); height: calc(var(--h) * .1); transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(rgba(40, 30, 15, .45), transparent 70%);
}

/* ---------- Bảng tên + thanh máu / nội lực / nộ khí trên đầu ---------- */
/* Lớp bảng tên đặt ở chân nhân vật rồi nhấc lên trên đầu một khoảng bằng chiều cao nhân vật (--h tính như .unit) */
.hud-pin {
  --h: calc(min(21cqh, 15cqw) * var(--s, 1));
  position: absolute; z-index: 150; pointer-events: none;
  transform: translate(-50%, calc(-100% - var(--h) * 1.06));
}
.hud-pin.boss { --h: calc(min(24.5cqh, 17.5cqw) * var(--s, 1)); }
@container (max-aspect-ratio: 1 / 1) {
  .hud-pin { --h: calc(min(17cqh, 27cqw) * var(--s, 1)); }
  .hud-pin.boss { --h: calc(min(19.5cqh, 31cqw) * var(--s, 1)); }
  /* Sân dọc: các hàng sát nhau, bảng tên hẹp lại cho tên người cạnh nhau không chồng lên nhau */
  .hud-pin:not(.boss) .hud { width: 66px; }
  .hud-pin:not(.boss) .uname { font-size: 10px; gap: 2px; overflow: hidden; text-overflow: ellipsis; justify-content: flex-start; }
  .hud-pin:not(.boss) .uname .lv { min-width: 14px; height: 13px; font-size: 9px; line-height: 13px; }
}
.hud-pin .hud { position: relative; width: max(100px, calc(var(--h) * .56)); margin-bottom: 4px; text-align: center; }
.hud-pin .uname {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 12px; font-weight: 700; line-height: 1.3; color: #fff6dc;
  white-space: nowrap;   /* tên dài hơn thanh máu thì tràn đều hai bên, không bị cắt */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 5px rgba(0, 0, 0, .9);
}
.hud-pin.enemy .uname { color: #ffd9cc; }
.hud-pin.boss .uname { color: #ffd76a; font-size: 13px; }
.hud-pin .uname small { font-size: 10px; color: #bfe6b0; }
.hud-pin .uname .lv {
  flex: none; min-width: 16px; height: 15px; padding: 0 3px; border-radius: 8px; font-size: 10px; line-height: 15px;
  color: #2a1a0c; text-shadow: none; background: radial-gradient(circle at 40% 30%, #fde7a6, #c99a3a 75%); border: 1px solid #fff0c0;
}
.hud-pin .bars {
  padding: 1px; border-radius: 4px; background: rgba(10, 6, 3, .78);
  border: 1px solid rgba(233, 196, 106, .55); box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
.hud-pin .hud .bar { position: relative; height: 3px; margin: 0 0 1px; border: 0; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.hud-pin .hud .bar:last-child { margin-bottom: 0; }
.hud-pin .hud .bar > i { position: relative; z-index: 1; border-radius: 2px; }
.hud-pin .hud .bar.hp { height: 6px; }
.hud-pin.ally .hud .bar.hp > i { background: linear-gradient(#8ff07a, #3fae35 55%, #237a1e); }
.hud-pin.enemy .hud .bar.hp > i { background: linear-gradient(#ff8a78, #e0392b 55%, #8e1b12); }
.hud-pin .hud .bar.hp .lag {
  position: absolute; left: 0; top: 0; bottom: 0; background: #fff2c8; border-radius: 2px;
  transition: width .7s ease-in .25s;
}
.hud-pin .hud .bar.mp > i { background: linear-gradient(#8fd0ff, #2f7fd0); }
.hud-pin .hud .bar.rage > i { background: linear-gradient(90deg, #c98a1a, #ffd24a); }
.hud-pin .hud .bar.rage.full > i { background: linear-gradient(90deg, #ffb52e, #fff2a0, #ffb52e); background-size: 200% 100%; animation: rage-shine 1s linear infinite; }
.hud-pin .hud .bar.rage.full { box-shadow: 0 0 6px #ffcf40; }
@keyframes rage-shine { to { background-position: -200% 0; } }
/* Trạng thái (độc, điểm huyệt, tăng/giảm chỉ số) xếp dọc bên phải thanh máu, không đè bảng tên hàng dưới */
.hud-pin .status { position: absolute; left: 100%; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-left: 3px; }
.hud-pin.enemy .status { left: auto; right: 100%; margin: 0 3px 0 0; align-items: flex-end; }
.hud-pin .status span {
  padding: 0 4px; border-radius: 6px; font-size: 10px; line-height: 14px; font-weight: 700; color: #fff;
  background: rgba(10, 6, 3, .75); border: 1px solid rgba(233, 196, 106, .35);
}
/* Đầy nộ: vòng dưới chân sáng vàng */
.unit.rage-full .spot { border-color: rgba(255, 207, 64, .85); box-shadow: 0 0 14px rgba(255, 207, 64, .6); }

.unit .flip { height: var(--h); display: flex; align-items: flex-end; justify-content: center; }
.unit.mirror .flip { transform: scaleX(-1); }     /* ảnh vẽ quay phải; kẻ địch (và ảnh lỡ vẽ quay trái) thì lật */
.unit .pose {
  position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center;
  transform-origin: 50% 100%; animation: breathe 2.6s ease-in-out infinite;
}
/* Ảnh nhân vật vẽ trên canvas (rig.js tự lo thở, áo bay, ra đòn), canvas cao hơn 12% để chừa chỗ giãn người */
.unit .pose:has(canvas.sprite) { animation: none; }
.unit canvas.sprite {
  height: 112%; width: auto; pointer-events: none;
  filter: drop-shadow(0 3px 2px rgba(42, 33, 24, .35));
}
.unit .hit { position: absolute; left: 50%; bottom: 0; width: 42%; height: 100%; transform: translateX(-50%); }
/* Chưa có ảnh toàn thân thì hiện chân dung tròn */
.unit .pose:has(canvas.sprite) .portrait { display: none; }
.unit .pose .portrait {
  width: calc(var(--h) * .42); height: calc(var(--h) * .42); font-size: calc(var(--h) * .2);
  margin-bottom: calc(var(--h) * .08);
}
.unit.mirror .pose .portrait { transform: scaleX(-1); }   /* lật lại cho chữ không bị ngược */
/* Thở + đung đưa nhẹ cho nhân vật không đứng cứng */
@keyframes breathe {
  25% { transform: scale(1.006, 1.014) rotate(0.5deg); }
  50% { transform: scale(1.012, 1.028) translateY(-0.4%); }
  75% { transform: scale(1.006, 1.014) rotate(-0.5deg); }
}

/* Bóng mờ kéo theo khi lao tới */
.ghost {
  position: absolute; z-index: 150; pointer-events: none; opacity: .45;
  filter: blur(1px) saturate(.5) brightness(1.4); animation: ghost .38s ease-out forwards;
}
.ghost.flip-x { transform: scaleX(-1); }
@keyframes ghost { to { opacity: 0; } }

/* Lượt của ai thì có mũi tên vàng trên đầu */
.hud-pin.active .hud::before {
  content: '▼'; display: block; color: var(--gold); font-size: 14px; line-height: 1;
  animation: bob .8s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(4px); } }

/* Đang chọn mục tiêu: vòng sáng dưới chân */
.unit.targetable, .unit.ally-target { cursor: pointer; }
.unit.targetable .shadow { background: radial-gradient(rgba(190, 30, 20, .7), transparent 70%); animation: ring 1s infinite; }
.unit.ally-target .shadow { background: radial-gradient(rgba(40, 140, 90, .7), transparent 70%); animation: ring 1s infinite; }
@keyframes ring { 50% { transform: translateX(-50%) scale(1.3); } }

.unit.dead .flip { opacity: .35; filter: grayscale(1); }
.unit.dead .pose { animation: none; transform: translateY(4%) scaleY(.95); }
.hud-pin.dead .hud { opacity: .4; }

/* ---------- Số sát thương ---------- */
.float {
  position: absolute; left: 50%; top: 10%; z-index: 5; pointer-events: none; white-space: nowrap;
  font-weight: 800; font-size: 22px; animation: rise 1.1s ease-out forwards;
  text-shadow: 0 2px 0 #fff8e8, 0 0 6px #fff8e8;
}
.float.dmg { color: #b3261e; }
.float.noi { color: #6a3fc4; }
.float.crit { color: #d49a17; font-size: 28px; text-shadow: 0 2px 0 #5a1a10, 0 0 8px #fff; }
.float.heal { color: #23885a; }
.float.dodge { color: #7fd0f0; font-style: italic; text-shadow: 0 2px 0 #10303a, 0 0 6px #fff; }   /* Né tránh */
@keyframes rise {
  0% { top: 22%; transform: translateX(-50%) scale(.6); opacity: 0; }
  15% { transform: translateX(-50%) scale(1.15); opacity: 1; }
  100% { top: -6%; transform: translateX(-50%) scale(1); opacity: 0; }
}

/* ---------- Tên chiêu ---------- */
.skill-banner {
  position: absolute; left: 0; right: 0; top: 7%; z-index: 300; pointer-events: none; opacity: 0;
  text-align: center; font-family: var(--font-title); font-weight: 700;
  font-size: clamp(20px, 6cqw, 46px); color: #fff8e8; letter-spacing: 1px;
  text-shadow: 0 2px 0 #6e1d16, 0 0 14px rgba(110, 29, 22, .85), 0 0 2px #000;
}
.skill-banner.enemy { text-shadow: 0 2px 0 #1d2a3a, 0 0 14px rgba(20, 30, 60, .85), 0 0 2px #000; }
.skill-banner.show { animation: banner 1.1s ease-out; }
@keyframes banner {
  0% { opacity: 0; transform: scale(1.6); letter-spacing: 12px; }
  20% { opacity: 1; transform: scale(1); letter-spacing: 1px; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* ---------- Hiệu ứng chiêu thức ---------- */
.fx { position: absolute; z-index: 250; pointer-events: none; transform: translate(-50%, -50%); }
@keyframes burst {
  0% { transform: translate(-50%, -50%) scale(.2); opacity: 1; }
  60% { opacity: .9; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* Chưởng: quả cầu khí vàng + vòng sóng */
.fx-palm {
  width: 26cqh; height: 26cqh; border-radius: 50%; animation: burst .7s ease-out forwards;
  background: radial-gradient(circle, rgba(255, 250, 220, .95) 0%, rgba(255, 200, 60, .85) 25%, rgba(230, 120, 20, .45) 50%, transparent 70%);
}
.fx-palm::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(255, 215, 90, .9); animation: ringout .7s ease-out forwards;
}
@keyframes ringout { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }

/* Kiếm / đao / bổng: hai vệt chém bạc */
.fx-slash { width: 32cqh; height: 32cqh; }
.fx-slash::before, .fx-slash::after {
  content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 6px; border-radius: 50%;
  background: linear-gradient(90deg, transparent, #fff 45%, #cfe8ff 55%, transparent); box-shadow: 0 0 12px #bfe0ff;
}
.fx-slash::before { animation: slash-a .45s ease-out forwards; }
.fx-slash::after { transform: rotate(25deg) scaleX(0); animation: slash-b .45s .08s ease-out forwards; }
@keyframes slash-a {
  0% { transform: rotate(-35deg) scaleX(0); opacity: 1; }
  40% { transform: rotate(-35deg) scaleX(1); opacity: 1; }
  100% { transform: rotate(-35deg) scaleX(1.1); opacity: 0; }
}
@keyframes slash-b {
  0% { transform: rotate(25deg) scaleX(0); opacity: 1; }
  40% { transform: rotate(25deg) scaleX(1); opacity: 1; }
  100% { transform: rotate(25deg) scaleX(1.1); opacity: 0; }
}

/* Trảo: ba vết cào đỏ */
.fx-claw {
  width: 22cqh; height: 26cqh; animation: claw .55s ease-out forwards;
  background:
    linear-gradient(115deg, transparent 30%, rgba(160, 20, 30, .9) 31% 34%, transparent 35%),
    linear-gradient(115deg, transparent 47%, rgba(160, 20, 30, .9) 48% 51%, transparent 52%),
    linear-gradient(115deg, transparent 64%, rgba(160, 20, 30, .9) 65% 68%, transparent 69%);
}
@keyframes claw {
  0% { clip-path: inset(0 0 100% 0); opacity: 1; }
  40% { clip-path: inset(0); opacity: 1; }
  100% { clip-path: inset(0); opacity: 0; }
}

/* Độc: khói xanh */
.fx-poison {
  width: 26cqh; height: 26cqh; border-radius: 50%; animation: burst .8s ease-out forwards;
  background:
    radial-gradient(circle at 35% 40%, rgba(90, 200, 80, .8) 0 12%, transparent 13%),
    radial-gradient(circle at 65% 55%, rgba(60, 160, 60, .75) 0 16%, transparent 17%),
    radial-gradient(circle at 45% 70%, rgba(120, 220, 90, .7) 0 10%, transparent 11%),
    radial-gradient(circle, rgba(70, 150, 60, .45), transparent 65%);
}

/* Đánh thường: tia sáng hình sao */
.fx-hit {
  width: 16cqh; height: 16cqh; animation: burst .45s ease-out forwards;
  background: radial-gradient(circle, #fff 0 10%, rgba(255, 240, 200, .9) 20%, transparent 60%);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Hồi máu: đốm sáng xanh bay lên */
.fx-heal {
  width: 22cqh; height: 30cqh; animation: rise-fx .8s ease-out forwards;
  background:
    radial-gradient(circle at 30% 70%, #b8f5c8 0 4%, transparent 5%),
    radial-gradient(circle at 60% 50%, #d9ffe0 0 3%, transparent 4%),
    radial-gradient(circle at 45% 30%, #b8f5c8 0 4%, transparent 5%),
    radial-gradient(ellipse at 50% 60%, rgba(80, 200, 120, .45), transparent 65%);
}
@keyframes rise-fx {
  0% { transform: translate(-50%, -30%); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-50%, -80%); opacity: 0; }
}

/* Tăng chỉ số / thủ thế: vòng sáng dưới chân */
.fx-buff, .fx-guard {
  width: 24cqh; height: 7cqh; border-radius: 50%; animation: burst .7s ease-out forwards;
  border: 3px solid #e6b740; box-shadow: 0 0 12px #e6b740, inset 0 0 10px #e6b740;
}
.fx-guard { border-color: #6aa8e0; box-shadow: 0 0 12px #6aa8e0, inset 0 0 10px #6aa8e0; }

/* ---------- Màn hẹp (điện thoại) ---------- */
@media (max-width: 560px) {
  .stage { aspect-ratio: 4 / 5; }
  .hud-pin .hud { width: max(60px, calc(var(--h) * .56)); }
  .hud-pin .hud .bar.hp { height: 5px; }
  .hud-pin .uname .lv { min-width: 13px; height: 13px; line-height: 13px; font-size: 8px; padding: 0 2px; }
  .hud-pin .uname, .hud-pin.boss .uname { font-size: 10px; gap: 2px; }
  .float { font-size: 18px; }
  .float.crit { font-size: 22px; }
}

/* ---------- Nút Tự động / tốc độ ---------- */
.battle-tools { position: absolute; top: 10px; right: 10px; z-index: 330; display: flex; gap: 6px; }
.wave-tag {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 330; padding: 4px 16px;
  font: 700 14px/1.4 var(--font-ui); color: #f1d38a; letter-spacing: .04em;
  background: rgba(24, 16, 9, .85); border: 1px solid rgba(233, 196, 106, .7); border-radius: 999px;
}
.battle-tools button {
  padding: 6px 12px; font-size: 13px; border-radius: 16px; color: #f3e3c0;
  background: rgba(15, 10, 6, .7); border: 1px solid rgba(233, 196, 106, .55);
}
.battle-tools button.on { background: linear-gradient(#b8892f, #7a5a1a); color: #fff8e0; border-color: #f1d38a; box-shadow: 0 0 12px rgba(241, 211, 138, .6); }
.auto-note { align-self: center; color: #f1d38a; }

/* ---------- Tuyệt chiêu ---------- */
.skill-banner small { display: block; font-size: .42em; letter-spacing: .5em; color: #ffe08a; text-transform: uppercase; }
.skill-banner.ult {
  font-size: clamp(26px, 8cqw, 64px); color: #fff3c4;
  text-shadow: 0 3px 0 #8a4a00, 0 0 22px rgba(255, 190, 60, .95), 0 0 3px #000;
}
.skill-banner.ult.show { animation: banner 1.5s ease-out; }
.ult-flash {
  position: absolute; inset: 0; z-index: 240; pointer-events: none;
  background: radial-gradient(ellipse at 30% 60%, rgba(255, 220, 120, .55), rgba(255, 170, 40, .15) 45%, transparent 70%);
  animation: ult-flash .9s ease-out forwards;
}
.ult-flash.enemy { background: radial-gradient(ellipse at 70% 60%, rgba(255, 90, 60, .5), rgba(160, 20, 20, .15) 45%, transparent 70%); }
@keyframes ult-flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.unit.ult-cast .flip { filter: drop-shadow(0 0 10px #ffd24a) drop-shadow(0 0 22px rgba(255, 170, 40, .8)); }
.battle-actions button.ult {
  color: #2a1a0c; font-weight: 700; border: 1px solid #fff0c0;
  background: linear-gradient(#ffe08a, #e0a52a); box-shadow: 0 0 12px rgba(255, 200, 60, .8); animation: glow 1.2s ease-in-out infinite;
}
.log .ult-log, .battle .log .ult-log { color: #ffd24a; }

.wave-tag { max-width: min(54%, 560px); text-align: center; font-size: 13px; }
/* Số lượt (tối đa MAX_ROUNDS): góc trên bên trái sân, 3 lượt cuối đỏ lên */
.round-tag {
  position: absolute; top: 48px; right: 10px; z-index: 330; padding: 3px 12px; border-radius: 999px;
  font: 700 13px/1.4 var(--font-ui); color: #f1d38a; background: rgba(24, 16, 9, .85); border: 1px solid rgba(233, 196, 106, .6);
}
.round-tag:empty { display: none; }
.round-tag.warn { color: #fff; background: rgba(155, 44, 34, .9); border-color: #ff8a78; animation: glow 1s ease-in-out infinite; }

/* Hiệu ứng chiêu bằng hệ hạt (js/engine/vfx.js): canvas phủ cả sân, hoà sáng */
.vfx-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 260; pointer-events: none; mix-blend-mode: screen;
}