/* ===================== MÀN CHIẾN ĐẤU ===================== */

#battle {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(90, 40, 60, .35), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(30, 60, 110, .35), transparent 60%),
    #0a0d14;
}
#battle.hidden { display: none; }

/* ---------- thanh trên ---------- */

.b-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: rgba(10, 13, 20, .8);
  border-bottom: 1px solid #263047;
}

.b-round { font-weight: 700; font-size: 14px; color: #cfe0ff; white-space: nowrap; }
.b-round span { color: #7dd3fc; }

.b-timer {
  position: relative;
  flex: 1;
  height: 22px;
  background: #131a28;
  border: 1px solid #2b3651;
  border-radius: 11px;
  overflow: hidden;
}

.b-timer-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #4c7dff, #7dd3fc);
  transition: width .25s linear;
}
.b-timer-fill.urgent { background: linear-gradient(90deg, #ff5f6d, #ffa06b); }

.b-timer-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

.b-phase { font-size: 13px; color: #8b95ab; white-space: nowrap; }

/* ---------- sân đấu ---------- */

.b-field {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
}

/* Nhật ký nổi bên phải — chừa chỗ cho nó để không đè lên thẻ quái */
@media (min-width: 900px) {
  .b-field { padding-right: 282px; }
}

.b-side {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.b-allies { align-items: flex-start; }

/* ---------- thẻ nhân vật ---------- */

.unit {
  position: relative;
  width: 128px;
  padding: 10px;
  background: #141a27;
  border: 1px solid #263047;
  border-radius: 12px;
  text-align: center;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}

.unit.enemy { border-color: #4a2b38; background: #1c1419; }
.unit.me { border-color: #4c7dff; box-shadow: 0 0 0 1px rgba(76, 125, 255, .3); }
.unit.dead { opacity: .35; filter: grayscale(1); }

.unit.targetable { cursor: pointer; }
.unit.targetable:hover { transform: translateY(-4px); border-color: #ffb703; box-shadow: 0 0 18px rgba(255, 183, 3, .35); }

.unit.acting { animation: unitAct .5s ease; }
@keyframes unitAct {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-12px) scale(1.05); }
}

.unit.hurt { animation: unitHurt .4s ease; }
@keyframes unitHurt {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  50% { transform: translateX(6px); }
  80% { transform: translateX(-3px); }
}

.unit-avatar {
  width: 46px;
  height: 46px;
  margin: 2px auto 8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .18);
  background: #4c7dff;
}

/**
 * Sprite pixel art: cắt từ atlas bằng background-position, phóng to bằng
 * `pixelated` để giữ cạnh sắc. Bỏ bo tròn và viền — một hình vuông 16px phóng
 * lên mà cắt bo góc thì mất luôn tai với vai nhân vật.
 */
.unit-avatar.sprite {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5));
}
.unit.dead .unit-avatar.sprite { filter: grayscale(1) brightness(.5); }

.unit-name {
  font-size: 12px;
  font-weight: 600;
  color: #e6e9ef;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unit-sub { font-size: 10px; color: #8b95ab; margin-bottom: 6px; }

.bar {
  height: 7px;
  margin-top: 4px;
  background: rgba(0, 0, 0, .5);
  border-radius: 4px;
  overflow: hidden;
}
.bar > i { display: block; height: 100%; transition: width .35s ease; }
.bar.hp > i { background: linear-gradient(90deg, #46c46b, #7ee89a); }
.bar.mana > i { background: linear-gradient(90deg, #3f7fd8, #79b6ff); }
.bar.rage > i { background: linear-gradient(90deg, #d8642f, #ffab52); }

.bar-text { font-size: 9px; color: #9aa5ba; margin-top: 2px; }

.unit-effects { display: flex; justify-content: center; gap: 3px; margin-top: 5px; min-height: 14px; }

.eff {
  padding: 1px 5px;
  font-size: 9px;
  border-radius: 4px;
  background: #2a2036;
  border: 1px solid #453458;
  color: #d3b8f0;
}
.eff.dot { background: #2c1f22; border-color: #5c3138; color: #ff9aa8; }
.eff.slow { background: #1b2735; border-color: #2e4a68; color: #9fd0ff; }
.eff.damageReduction { background: #1d2b22; border-color: #2f5340; color: #93e0b0; }

/* dấu tích khi người chơi đã chọn xong hành động */
.unit-ready {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #46c46b;
  color: #08120b;
  font-size: 12px;
  font-weight: 700;
}

/* số sát thương bay lên */
.float {
  position: absolute;
  left: 50%;
  top: 26px;
  transform: translateX(-50%);
  font-size: 19px;
  font-weight: 800;
  pointer-events: none;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .9);
  animation: floatUp 1.1s ease-out forwards;
}
.float.damage { color: #ff6b6b; }
.float.crit { color: #ffd166; font-size: 25px; }
.float.heal { color: #7ee89a; }
.float.dodge { color: #9fd0ff; font-size: 15px; }
.float.dot { color: #d98cff; font-size: 16px; }

@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.7); }
  25% { opacity: 1; transform: translate(-50%, -6px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -42px) scale(1); }
}

/* ---------- thứ tự lượt ---------- */

.b-order {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px dashed #232c42;
  border-bottom: 1px dashed #232c42;
}

.b-order-label { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: #6b7791; }
.b-order-list { display: flex; gap: 6px; flex-wrap: wrap; }

.ord {
  padding: 3px 9px;
  font-size: 11px;
  border-radius: 20px;
  background: #16203a;
  border: 1px solid #2b3651;
  color: #a9b4c9;
}
.ord.enemy { background: #2a1820; border-color: #4a2b38; color: #ffb3a3; }
.ord.me { border-color: #4c7dff; color: #cfe0ff; }

/* ---------- thanh kỹ năng ---------- */

.b-bottom {
  padding: 12px 20px 16px;
  background: rgba(10, 13, 20, .85);
  border-top: 1px solid #263047;
}

.b-prompt { font-size: 12px; color: #8b95ab; margin-bottom: 9px; text-align: center; }
.b-prompt.wait { color: #ffb703; }

.b-skills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.skill {
  min-width: 106px;
  padding: 9px 11px;
  background: #141c2e;
  border: 1px solid #2b3651;
  border-radius: 9px;
  color: #cfe0ff;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .12s;
}
.skill:hover:not(:disabled) { border-color: #4c7dff; background: #17223b; transform: translateY(-2px); }
.skill.selected { border-color: #ffb703; background: #2a2313; }
.skill:disabled { opacity: .35; cursor: not-allowed; }

.skill-name { font-size: 12px; font-weight: 600; }
.skill-cost { font-size: 10px; color: #8b95ab; margin-top: 2px; }
.skill-cost .mana { color: #79b6ff; }
.skill-cost .rage { color: #ffab52; }
.skill-cost .cd { color: #ff9aa8; }

/* ---------- nhật ký ---------- */

/* Nằm dưới navbar — navbar cao bao nhiêu do game.js đo rồi ghi vào --nav-h,
   vì thêm đồng hồ Thủ Lĩnh là nó cao gấp đôi */
.b-log {
  position: fixed;
  right: 14px;
  top: calc(var(--nav-h, 42px) + 26px);
  width: 250px;
  max-height: 34vh;
  overflow-y: auto;
  padding: 9px 11px;
  background: rgba(10, 13, 20, .82);
  border: 1px solid #263047;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.65;
  color: #a9b4c9;
}
.b-log p { margin: 0; }
.b-log .hl { color: #cfe0ff; font-weight: 600; }
.b-log .dmg { color: #ff8a8a; }
.b-log .heal { color: #7ee89a; }
.b-log .die { color: #ff6b6b; font-weight: 600; }
.b-log .sys { color: #ffb703; }

/* ---------- kết quả ---------- */

.b-result {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(6, 8, 13, .82);
  z-index: 5;
}
.b-result.hidden { display: none; }

.b-result-panel {
  width: min(380px, calc(100vw - 40px));
  padding: 28px;
  text-align: center;
  background: #161c2a;
  border: 1px solid #2b3651;
  border-radius: 14px;
}

.b-result-panel h2 { font-size: 26px; margin-bottom: 14px; }
.b-result-panel h2.win { color: #7ee89a; }
.b-result-panel h2.lose { color: #ff6b6b; }
.b-result-panel h2.draw { color: #ffb703; }

.reward { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #232c42; font-size: 13px; }
.reward:last-of-type { border-bottom: 0; }
.reward span:first-child { color: #8b95ab; }
/* Mỗi loại phần thưởng một màu: nhìn lướt là biết vừa nhặt được gì, không phải
   đọc từng dòng. Vật phẩm tự mang màu hạng của nó qua thuộc tính style. */
.reward .v { font-weight: 600; color: #e6e9ef; }
.reward .v.exp { color: #c07bff; }
.reward .v.gold { color: #ffd166; }
.reward .v.book { color: #d3b8f0; }
.reward .v.none { color: #5a6478; font-weight: 400; }
/* Đỏ, cùng màu với tiêu đề "Thất bại" — dòng duy nhất trong bảng bị trừ đi */
.reward .v.loss { color: #ff6b6b; }

/* Lời giải thích dưới bảng: căn trái vì đây là câu để ĐỌC, không phải con số để
   liếc. Căn giữa như phần còn lại của bảng làm hai dòng chữ so le nhau. */
.b-note {
  margin-top: 12px;
  text-align: left;
  font-size: 12px;
  line-height: 1.55;
  color: #8b95ab;
}
.b-note b { color: #c9d1e0; }

#bResultClose {
  width: 100%;
  margin-top: 18px;
  padding: 11px;
  background: linear-gradient(135deg, #4c7dff, #7c5cff);
  border: 0;
  border-radius: 9px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- màn hình hẹp ---------- */

/* Dưới 900px không đủ chỗ cho nhật ký nổi bên phải — ẩn hẳn thay vì để nó
   đè lên thẻ quái. Diễn biến vẫn thấy được qua số bay lên và thanh máu. */
@media (max-width: 899px) {
  .b-log { display: none; }
}

@media (max-width: 700px) {
  .unit { width: 96px; padding: 8px; }
  .unit-avatar { width: 36px; height: 36px; }
  .skill { min-width: 88px; }
}

/* ---------- nút trốn thoát ---------- */

.b-extra { display: flex; justify-content: center; margin-top: 10px; }

.b-flee {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  background: #1c1622;
  border: 1px solid #453458;
  border-radius: 9px;
  color: #c9b3e0;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.b-flee:hover:not(:disabled) { border-color: #a97bff; background: #251c30; }
.b-flee:disabled { opacity: .3; cursor: not-allowed; }
.b-flee em { font-style: normal; font-weight: 700; color: #d3b8f0; }
/* Tỉ lệ thấp thì đổi màu cảnh báo — người chơi biết mình đang liều */
.b-flee em.risky { color: #ff9aa8; }

/* Chừa chỗ cho thanh kinh nghiệm cố định ở đáy (z-index cao hơn màn này),
   nếu không nó che mất thanh kỹ năng. Chiều cao thật do game.js đo. */
#battle { padding-bottom: var(--sb-h, 48px); }

/* ---------- màn chờ vào trận ---------- */
/* Phải nằm trên MỌI thứ, kể cả thanh kinh nghiệm cố định ở đáy (z-index 50):
   trong lúc chờ, người chơi đã bị khoá phím rồi, không nên bấm được gì. */

.b-loading {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(9, 7, 14, .82);
  backdrop-filter: blur(3px);
  animation: bLoadIn .18s ease-out;
}
.b-loading.hidden { display: none; }

@keyframes bLoadIn { from { opacity: 0 } to { opacity: 1 } }

.b-loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 34px;
  max-width: min(90vw, 380px);
  text-align: center;
}

.b-loading-ring {
  width: 42px;
  height: 42px;
  border: 3px solid #2f2540;
  border-top-color: #a97bff;
  border-radius: 50%;
  animation: bSpin .8s linear infinite;
}
@keyframes bSpin { to { transform: rotate(360deg) } }

.b-loading-box h3 {
  margin: 0;
  font-size: 17px;
  color: #e6dcf5;
  letter-spacing: .3px;
}

.b-loading-foes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.b-loading-foes > * {
  padding: 3px 9px;
  background: #1c1622;
  border: 1px solid #453458;
  border-radius: 999px;
  font-size: 12px;
  color: #c9b3e0;
}
.b-loading-foes em { font-style: normal; color: #8b95ab; margin-left: 5px; }

.b-loading-hint { margin: 0; font-size: 12px; color: #8b95ab; }

/* Người dùng tắt hiệu ứng chuyển động thì đừng quay */
@media (prefers-reduced-motion: reduce) {
  .b-loading-ring { animation: none; border-top-color: #a97bff; }
  .b-loading { animation: none; }
}