/* Phòng thủ đảo nhà: tab trong bảng Đảo nhà, thanh đợt tấn công, báo cáo trận, chọn chốt gác (phong_thu_ui.ts). Theo khung bảng chung. */

/* ---- tab + thân bảng ---- */
#bang-dn .ph-tab { padding: 0 10px 6px; }
#bang-dn .ph-tab button { position: relative; }
#bang-dn .ph-tab .cham { position: absolute; top: 3px; right: 6px; }
#than-ph { overflow-y: auto; padding: 8px 10px 12px; display: grid; gap: 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; min-height: 0; }
#than-ph[hidden], #than-dn[hidden] { display: none; }
#than-ph .dn-so { margin-top: 4px; }
#than-ph .dn-hang { margin-top: 4px; }
.ph-tinh h4 { color: #ffe9a6; }

/* ---- danh sách công trình / lính ---- */
.ph-ds { display: grid; gap: 5px; margin: 4px 0 8px; }
.ph-ct { border-radius: 8px; background: rgba(4, 14, 26, .5); border: 1px solid transparent; }
.ph-ct.mo { border-color: var(--vien-mo); background: rgba(4, 14, 26, .72); }
.ph-ct.sap .ph-dau img, .ph-ct.sap .ph-hinh { filter: grayscale(1) brightness(.7); }
.ph-dau { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 48px; padding: 4px 8px; background: none; border: 0; color: var(--chu); text-align: left; cursor: pointer; font: inherit; }
.ph-dau img { width: 36px; height: 36px; image-rendering: pixelated; flex: 0 0 auto; }
.ph-dau > span:nth-child(2) { flex: 1 1 auto; min-width: 0; font-size: 13.5px; }
.ph-dau small { display: block; font-size: 11.5px; color: var(--chu-mo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-hinh { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; font-size: 22px; border-radius: 8px; background: rgba(79, 227, 255, .1); }
.ph-bac { display: inline-block; min-width: 20px; padding: 0 5px; border-radius: 6px; font-style: normal; font-size: 11px; font-weight: 800; text-align: center; background: rgba(160, 170, 180, .25); color: #d8e2ea; }
.ph-bac.b2 { background: rgba(79, 168, 224, .35); color: #bfe4ff; }
.ph-bac.b3 { background: rgba(255, 216, 74, .3); color: #ffe9a6; }
.ph-mau { position: relative; flex: 0 0 86px; height: 16px; border-radius: 8px; background: rgba(0, 0, 0, .55); overflow: hidden; }
.ph-mau i { display: block; height: 100%; background: linear-gradient(90deg, #1f9a58, #7ee29a); }
.ph-mau.hong i { background: linear-gradient(90deg, #b8442a, #ff9a6a); }
.ph-mau em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.ph-chi-tiet { padding: 2px 8px 8px; }
.ph-sua-het { padding: 6px 8px; border-radius: 8px; background: rgba(255, 150, 90, .12); border: 1px solid rgba(255, 150, 90, .45); margin-bottom: 6px; }

/* loại đặt được */
.ph-loai { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 5px; margin: 6px 0; }
.ph-o { position: relative; display: grid; justify-items: center; gap: 1px; padding: 6px 4px 5px; border-radius: 8px; background: rgba(4, 14, 26, .45); text-align: center; }
.ph-o img { width: 36px; height: 36px; image-rendering: pixelated; }
.ph-o b { font-size: 12px; line-height: 1.15; }
.ph-o small { font-size: 11.5px; color: #9dffb0; }
.ph-o em { font-style: normal; font-size: 11px; color: #ffe9a6; }
.ph-o.khoa { opacity: .55; }
.ph-o.khoa small { color: #ffb0a0; }

/* kho đạn, trại lính */
.ph-thanh-dan i { background: linear-gradient(90deg, #5a6470, #b8c2cc) !important; }
.ph-thue { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px; margin: 6px 0; }
.ph-the-linh { padding: 7px 9px; border-radius: 8px; background: rgba(4, 14, 26, .5); }
.ph-the-linh b { font-size: 13.5px; }
.ph-the-linh p { font-size: 12px; color: var(--chu-mo); margin: 2px 0 4px; }
.ph-luong { justify-content: flex-start; }
.ph-luong .dn-gio { flex: 1 1 100%; font-size: 12px; }
.ph-luong button { display: inline-flex; align-items: center; gap: 4px; }
.ph-luong button img { width: 22px; height: 22px; image-rendering: pixelated; }
.ph-luong button small { color: var(--chu-mo); font-weight: 600; }
.ph-doi { font-style: normal; color: #ff9a9a; font-weight: 800; }

/* lịch sử + báo cáo */
.ph-ls { display: grid; gap: 5px; }
.ph-bc { padding: 6px 9px; border-radius: 8px; background: rgba(4, 14, 26, .5); border-left: 3px solid var(--vien-mo); }
.ph-bc.thang { border-left-color: #9dffb0; } .ph-bc.mat { border-left-color: #ff6a6a; } .ph-bc.giu { border-left-color: var(--vang); }
.ph-bc-dau { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13.5px; }
.ph-bc-dau small { color: var(--chu-mo); font-size: 11.5px; margin-left: auto; }
.ph-kq { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 0 7px; border-radius: 7px; background: rgba(160, 170, 180, .25); }
.ph-kq.thang { background: rgba(60, 200, 120, .25); color: #9dffb0; } .ph-kq.mat { background: rgba(255, 106, 106, .22); color: #ffb0a0; } .ph-kq.giu { background: rgba(255, 216, 74, .2); color: #ffe9a6; }
.ph-bc-than { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 12.5px; color: var(--chu-mo); margin-top: 2px; }
.ph-bc-than b { color: var(--chu); }
.ph-bc-do { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 12.5px; }
.ph-bc-do em { font-style: normal; font-weight: 800; font-size: 11.5px; color: #9dffb0; }
.ph-bc-do.mat em { color: #ff9a9a; } .ph-bc-do.hong em { color: #ffb07a; }
.ph-vat { display: inline-flex; align-items: center; gap: 3px; }
.ph-vat img { width: 22px; height: 22px; image-rendering: pixelated; }

#ph-bao-cao { position: fixed; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 24px - var(--le) - var(--phai)));
  max-height: calc(var(--cao, 100vh) - 20px - var(--tren) - var(--day)); display: flex; flex-direction: column; background: var(--nen-dam); }
#ph-bao-cao[hidden] { display: none; }
#ph-bao-cao .tieu-de { min-height: 44px; padding: 2px 4px 2px 12px; font-size: 13px; }
#ph-bao-cao .tieu-de .nut-x { min-width: 44px; min-height: 44px; font-size: 24px; }
#ph-bao-cao.ph-kq-thang { border-color: #9dffb0; } #ph-bao-cao.ph-kq-thang .ph-bc-tieu { color: #9dffb0; }
#ph-bao-cao.ph-kq-mat { border-color: #ff6a6a; } #ph-bao-cao.ph-kq-mat .ph-bc-tieu { color: #ff9a9a; }
#ph-bao-cao.ph-kq-giu .ph-bc-tieu { color: #ffe9a6; }
#ph-bc-nd { overflow-y: auto; padding: 4px 12px 12px; display: grid; gap: 8px; }
.ph-bc-loi { margin: 0; font-size: 13px; line-height: 1.4; }

/* ---- thanh đợt tấn công: ngay dưới dòng ngày giờ, giữa màn (vùng thông tin, xa ngón cái) ---- */
#ph-thanh { position: fixed; z-index: 8; top: calc(var(--dh-day, 34px) + 5px); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; align-items: stretch; max-width: calc(100vw - 2 * var(--ban-do, 88px) - 40px); }
#ph-thanh[hidden] { display: none; }
#ph-thanh-nd { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 3px 12px; border-radius: 16px; background: rgba(60, 12, 12, .88); border: 1.5px solid #ff6a6a; color: #ffe1d6; font: inherit; font-size: 12.5px; cursor: pointer;
  box-shadow: 0 0 12px rgba(255, 90, 90, .45); position: relative; white-space: nowrap; min-width: 0; }
#ph-thanh-nd::after { content: ""; position: absolute; inset: -8px -4px; } /* vùng bấm ≥ 44px */
#ph-thanh-ten { overflow: hidden; text-overflow: ellipsis; }
#ph-thanh .ph-vach { flex: 0 0 74px; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .55); overflow: hidden; }
#ph-thanh .ph-vach i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff9a3c, #ffe14a); transition: width .3s; }
#ph-thanh-so { font-style: normal; font-weight: 800; color: #fff; }
#ph-thanh.canh-bao #ph-thanh-nd { background: rgba(70, 44, 6, .9); border-color: var(--cam); box-shadow: 0 0 12px rgba(255, 180, 84, .5); animation: ph-nhay 1s infinite alternate; }
#ph-thanh.canh-bao .ph-vach { display: none; }
#ph-thanh-bo { min-height: 44px; margin: -7px 0; padding: 4px 10px; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, .35); background: rgba(20, 24, 30, .82); color: #e8eef4; font-weight: 700; font-size: 12px; white-space: nowrap; }
#ph-thanh-ve { min-height: 44px; margin: -7px 0; padding: 4px 12px; border-radius: 12px; border: 1.5px solid var(--vien); background: linear-gradient(#1f6f8c, #134a63); color: var(--chu); font: inherit; font-weight: 800; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
#ph-thanh-ve[hidden] { display: none; }
@keyframes ph-nhay { from { filter: brightness(1); } to { filter: brightness(1.35); } }
body.ph-co-thanh #thong-bao { top: calc(var(--dh-day, 34px) + 46px); }
body.ph-dang-danh::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 3; box-shadow: inset 0 0 46px rgba(255, 70, 50, .28); animation: ph-nhay 1.2s infinite alternate; }

#ph-chot { position: fixed; z-index: 9; left: 50%; top: calc(var(--dh-day, 34px) + 44px); transform: translateX(-50%); min-height: 44px; padding: 6px 16px; border-radius: 12px; border: 1.5px solid var(--vien);
  background: var(--nen-dam); color: var(--chu); font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; box-shadow: var(--phat); }
#ph-chot[hidden] { display: none; }

@media (max-width: 900px), (max-height: 500px) {
  .ph-loai { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .ph-mau { flex-basis: 72px; }
  #ph-thanh-nd { font-size: 12px; padding: 3px 10px; gap: 6px; }
  #ph-thanh .ph-vach { flex-basis: 54px; }
}
@media (max-width: 620px) {
  #ph-thanh { max-width: calc(100vw - 16px); top: calc(var(--tren-cao, 60px) + 4px); }
  .ph-dau small { white-space: normal; }
}