/* 战斗玩法：防御按钮、技能按钮、首领血条与预警、相关弹窗 */

/* ---------- 右下角按钮 ---------- */
.hudbtn img { width: 34px; height: 34px; image-rendering: pixelated; pointer-events: none; }
.hudbtn .lb { font-size: 12px; margin-top: -2px; pointer-events: none; }
.hudbtn .kh {
  position: absolute; right: -6px; top: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px;
  background: var(--ink); color: #fff; font-size: 11px; line-height: 20px; font-weight: 900; text-align: center; pointer-events: none;
  white-space: nowrap;
}
body.touch .hudbtn .kh { display: none; }
#buildBtn { background: #e8d3a6; }
#buildBtn img { width: 30px; height: 30px; }

/* 技能按钮在最下面（离拇指最近） */
#skillBtn0, #skillBtn1 { order: -1; }
.hudbtn.skill { width: 72px; height: 72px; background: #3a2f5c; border-color: var(--ink); box-shadow: inset 0 -5px 0 #241c3d, inset 0 3px 0 rgba(255,255,255,.25), 0 4px 0 var(--ink); }
.hudbtn.skill img { width: 44px; height: 44px; }
.hudbtn.skill.p2 { background: #24506e; box-shadow: inset 0 -5px 0 #173750, inset 0 3px 0 rgba(255,255,255,.25), 0 4px 0 var(--ink); }
.hudbtn.skill .cdv {
  --p: 0; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(rgba(16,10,24,.74) calc(var(--p) * 360deg), transparent 0);
}
.hudbtn.skill .cdn {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
  font-family: var(--display); font-size: 28px; color: #fff;
  text-shadow: 0 2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink);
}
.hudbtn.skill.cool img { filter: grayscale(.7) brightness(.8); }
.hudbtn.skill.ready { animation: cbReady .45s ease-out; }
.hudbtn.skill.nope { animation: cbNope .3s; }
@keyframes cbReady { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,227,107,.9), 0 4px 0 var(--ink); } 50% { transform: scale(1.12); } 100% { transform: scale(1); box-shadow: 0 0 0 16px rgba(255,227,107,0), 0 4px 0 var(--ink); } }
@keyframes cbNope { 0%, 100% { translate: 0 0; } 25% { translate: -5px 0; } 75% { translate: 5px 0; } }

/* 双人：1P 的技能放左下（左半屏是 1P 的摇杆），2P 的回到右下角 */
#rightCol.cb-2p #skillBtn0 { position: fixed; left: calc(20px + var(--sl)); bottom: calc(128px + var(--sb)); }
#rightCol.cb-2p #skillBtn1 { position: relative; left: auto; bottom: auto; }

/* 小游戏里不显示 */
#hud.mini #rightCol, #hud.mini #skillBtn0, #hud.mini #skillBtn1, #hud.mini #bossBar, #hud.mini #cbBossWarn { display: none !important; }

/* ---------- 首领血条 ---------- */
#bossBar { top: calc(108px + var(--st)); width: min(440px, 64vw); z-index: 1; }
#bossBar .bn {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 3px;
  font-family: var(--display); font-size: 19px; color: #ffe36b; letter-spacing: 1px; white-space: nowrap;
  text-shadow: 0 2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink);
}
#bossBar .bn .sk { width: 16px; height: 16px; flex: none; background: #f2f2f2; border: 3px solid var(--ink); border-radius: 5px 5px 3px 3px; position: relative; }
#bossBar .bn .sk::before, #bossBar .bn .sk::after { content: ""; position: absolute; top: 3px; width: 3px; height: 3px; background: var(--ink); }
#bossBar .bn .sk::before { left: 1px; }
#bossBar .bn .sk::after { right: 1px; }
#bossBar .bn em { font-style: normal; font-family: var(--body); font-weight: 900; font-size: 12px; color: #fff; background: var(--red2); border: 2px solid var(--ink); border-radius: 4px; padding: 0 5px; text-shadow: none; }
#bossBar .bn em:empty { display: none; }
#bossBar .bb { height: 16px; background: #3a2a3a; border: 3px solid var(--ink); border-radius: 5px; overflow: hidden; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
#bossBar .bb i { display: block; height: 100%; width: 100%; background: linear-gradient(#ff7b6e, #d8342c 60%, #a8231d); transition: width .15s; }
#bossBar.enr .bb i { background: linear-gradient(#ff4f4f, #b8141f 60%, #7a0d14); animation: cbEnr .5s infinite alternate; }
#bossBar.enr .bn { color: #ff8a7a; }
@keyframes cbEnr { from { filter: brightness(1); } to { filter: brightness(1.5); } }

/* ---------- 首领预警 ---------- */
#cbBossWarn {
  position: absolute; left: 50%; top: 68%; transform: translate(-50%, -50%); display: none; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 26px 12px; background: rgba(120,16,20,.9); border: 4px solid var(--ink); border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 3px #ff5a4f inset, 0 6px 0 rgba(0,0,0,.4); white-space: nowrap; max-width: 92vw;
}
#cbBossWarn.on { display: flex; animation: cbWarn 6.4s forwards; }
#cbBossWarn b { font-family: var(--display); font-size: 40px; font-weight: normal; color: #ffe36b; letter-spacing: 6px; text-shadow: 0 3px 0 var(--ink); }
#cbBossWarn span { font-weight: 900; font-size: 15px; color: #fff; white-space: normal; text-align: center; }
@keyframes cbWarn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
  6% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  10%, 18%, 26% { box-shadow: 0 0 0 3px #ff5a4f inset, 0 0 26px 8px rgba(255,60,50,.8); }
  14%, 22% { box-shadow: 0 0 0 3px #ff5a4f inset, 0 6px 0 rgba(0,0,0,.4); }
  88% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(.96); }
}

/* ---------- 弹窗 ---------- */
.cb-who { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-weight: 900; color: #6b4a2f; font-size: 14px; }
.cb-who button { flex: 1; padding: 6px 4px 8px; border: 3px solid var(--ink); border-radius: 8px; background: #e6d2a8; color: #6b4a2f; font-weight: 900; font-size: 14px; }
.cb-who button.on { background: var(--yellow); color: var(--ink); box-shadow: inset 0 -4px 0 var(--yellow2); }
.cb-who button.p2.on { background: #6fd3ff; box-shadow: inset 0 -4px 0 #2a8fc0; }
.info.cb-bad { color: #a8231d; background: rgba(255,120,110,.22); font-weight: 900; }
.row .d.cb-why { color: #a8231d; font-weight: 900; }
.info.cb-ok { color: #2f7a3a; background: rgba(120,220,120,.22); font-weight: 900; }
.cb-n { font-size: 12px; font-weight: 900; color: #8a6a4a; background: #f0dcb4; border-radius: 4px; padding: 0 5px; margin-left: 2px; }
.cb-lv { color: #e0951f; font-size: 14px; letter-spacing: 1px; }
.cb-eq { display: flex; flex-direction: column; gap: 6px; flex: none; }
.cb-eq .btn.sm { min-height: 32px; padding: 3px 10px 7px; font-size: 13px; }
.btn.cb-on { cursor: default; }

/* ---------- 适配 ---------- */
@media (max-width: 560px) {
  /* 竖屏：顶部太挤，血条放到左下角（右下是交互大按钮） */
  #bossBar { top: auto; bottom: calc(18px + var(--sb)); left: calc(12px + var(--sl)); transform: none; width: calc(100vw - 136px - var(--sl) - var(--sr)); }
  body:not(.touch) #bossBar { bottom: calc(46px + var(--sb)); }
  #bossBar .bn { font-size: 15px; justify-content: flex-start; }
  #cbBossWarn b { font-size: 32px; }
}
@media (max-height: 500px) {
  /* 横屏手机：按钮横着排，免得顶到小地图 */
  #rightCol { flex-direction: row-reverse; align-items: flex-end; }
  .hudbtn.skill { width: 62px; height: 62px; }
  .hudbtn.skill img { width: 38px; height: 38px; }
  .hudbtn img { width: 30px; height: 30px; }
  #rightCol.cb-2p #skillBtn0 { bottom: calc(112px + var(--sb)); }
  #bossBar { top: calc(100px + var(--st)); width: min(340px, 42vw); }
  #bossBar .bn { font-size: 15px; margin-bottom: 1px; }
  #bossBar .bb { height: 12px; }
  #cbBossWarn { top: 34%; padding: 6px 18px 8px; }
  #cbBossWarn b { font-size: 28px; }
}
/* 桌面：首领血条出现时，提示条往下让一让 */
@media (min-width: 561px) and (min-height: 501px) {
  #app:has(#bossBar.on) #toasts { top: calc(200px + var(--st)); }
}