/* styles.css — 絕境戰減傷規劃 工具自身版面（色彩/間距/層級走 portal token + fallback）。 */

.container { max-width: 100%; margin: 0; }   /* 全寬利用（不再 1600px 居中留白）*/
.panel { position: relative; }

/* ---- 隊伍編成 ---- */
.party-row { display: flex; flex-wrap: wrap; gap: 10px; }
.party-slot {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px); padding: 5px 8px;
}
.party-slot .slot-role {
  min-width: 26px; text-align: center; color: var(--accent);
}
.party-slot .codex-select { min-width: 96px; }

/* ---- 矩陣 ---- */
.grid-scroll {
  overflow: auto; max-height: 70vh;
  border: 1px solid var(--border); border-radius: var(--radius-sm, 6px);
}
table.mit-grid {
  border-collapse: separate; border-spacing: 0;
  font-size: 15px; white-space: nowrap;
}
.mit-grid th, .mit-grid td {
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 3px 7px; text-align: center;
}
.mit-grid thead th {
  position: sticky; z-index: var(--z-sticky, 500);
  background: var(--bg-2); color: var(--text); vertical-align: top;
}
.mit-grid thead tr.h-mem th { top: 0; height: 30px; }       /* 人員 group 列釘頂 */
.mit-grid thead tr.h-skill th { top: 30px; }                 /* 技能圖示/名 列釘在其下 */
.mit-grid thead .grouphead { vertical-align: middle; }       /* 固定欄表頭(Phase/時間/招式…) 上下置中 */
.mit-grid .num { text-align: right; font-variant-numeric: tabular-nums; }
.mit-grid .num.mitd { color: var(--success); }
.mit-num { display: block; }
.mit-pct { display: block; font-size: 9px; color: var(--success); }
.redcell { text-align: center; line-height: 1.25; }
.red-p { display: block; font-size: 11px; color: var(--danger, #e57373); }   /* 物理減（紅，對應物理傷害）*/
.red-m { display: block; font-size: 11px; color: var(--accent, #a78bfa); }   /* 魔法減（紫，對應魔法傷害）*/

/* 基礎資料面板（管理預覽） */
/* 浮動面板：fixed 置中、無全屏 backdrop（外部矩陣仍可編輯，不卡死）；點按鈕立即浮現眼前 */
.datapanel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(980px, 95vw); z-index: 1000; }
.datapanel-box { position: relative; max-height: 84vh; overflow: auto; padding: var(--space-4, 16px);
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.7); }
.dp-close { position: absolute; top: 10px; right: 14px; }
.dp-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 10px; }
.dp-table th, .dp-table td { border: 1px solid var(--border); padding: 2px 6px; text-align: center; }
.dp-table th { position: sticky; top: 0; background: var(--bg-2); color: var(--accent); }
.dp-name { text-align: left; white-space: nowrap; }
.dp-icon { width: 16px; height: 16px; vertical-align: middle; margin-right: 4px; border-radius: 2px; }
.dp-warn { color: var(--warn); font-weight: 700; }
.dp-target { color: var(--accent); font-weight: 700; }   /* 指定單體技能（需選施放對象）醒目 */

/* 固定左欄：累積 left offset（寬度固定） */
.fixcol { position: sticky; background: var(--bg-1); z-index: 2; }
/* 角落固定標頭需壓過技能標頭（specificity 要高於 .mit-grid thead th，否則橫捲時被蓋） */
.mit-grid thead .fixcol { z-index: calc(var(--z-sticky, 500) + 5); background: var(--bg-2); }
.fc-ph { left: 0; min-width: 66px; max-width: 66px; white-space: normal; line-height: 1.25;
  font-weight: 700; color: var(--accent); vertical-align: middle; }   /* 最左：BOSS 階段/機制段落（rowspan 合併） */
.fc0 { left: 66px;  min-width: 60px;  max-width: 60px; }
.fc1 { left: 126px; min-width: 212px; max-width: 212px; text-align: left; }
.fc1-inner { display: flex; align-items: center; gap: 4px; }
.fc1 .act-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.type-badge { flex: none; font-size: 11px; line-height: 1; }   /* 攻擊屬性 icon */
.fc2 { left: 338px; min-width: 126px; max-width: 126px; text-align: left; }   /* 原始傷害：屬性 icon + Hit + DoT */
.fc-mit { left: 464px; min-width: 116px; max-width: 116px; text-align: left; }   /* 減傷後傷害：目標 + 屬性icon + 數值 */
.fc-mit .type-icon { width: 16px; height: 16px; vertical-align: middle; margin: 0 2px; }
.fc-mit .mit-tgt { font-size: 12px; color: var(--text-dim); }
.mit-grid td.fc2, .mit-grid td.fc-mit { text-align: left; padding-left: 8px; }   /* 傷害數字置左（覆蓋 .mit-grid td 的 center）*/
.fc3 { left: 580px; min-width: 76px; max-width: 76px; }
.fc4 { left: 656px; min-width: 82px; max-width: 82px; }
.fc5 { left: 738px; min-width: 72px; max-width: 72px; }
.fc6 { left: 810px; min-width: 82px; max-width: 82px; border-right: 2px solid var(--accent); }
/* 原始傷害數字：顏色對應傷害種類（物理紅 / 魔法紫），DoT 琥珀小字 */
.fc2 .type-badge { margin-right: 3px; vertical-align: middle; }
.fc2 .type-icon { width: 18px; height: 18px; vertical-align: middle; margin-right: 4px; }   /* 物理/魔法真 icon */
.dmg-n { font-variant-numeric: tabular-nums; font-weight: 600; }
.dmg-p { color: var(--danger); }
.dmg-m { color: var(--accent); }
.dmg-dot { display: block; font-size: 9px; color: var(--warn); white-space: nowrap; }
.grouphead { color: var(--accent) !important; }

/* 人員 group 標頭 + 角色色 */
.memhead { border-left: 2px solid var(--accent); font-weight: 600; }
.role-tank   { background: rgba(78,143,255,.16) !important; }
.role-healer { background: rgba(125,216,125,.14) !important; }
.role-melee, .role-ranged, .role-caster { background: rgba(229,115,115,.12) !important; }
.skillhead { width: 38px; min-width: 38px; max-width: 38px; padding: 3px 2px 5px; overflow: hidden; }
.skillhead .sk-name {
  display: inline-block; writing-mode: vertical-rl;   /* CJK 由上往下順讀，不翻轉 */
  font-size: 16px; line-height: 1.25; text-align: left;
  max-height: 172px; overflow: hidden; text-overflow: ellipsis; color: var(--text);
}
.skillhead.cat-Barrier .sk-name { color: var(--warn); }
.skillhead.cat-Heal .sk-name { color: var(--success); }
.skillhead.targeted { box-shadow: inset 0 -3px 0 var(--accent); }   /* 指定對象技能（SINGLE_PARTY）：底部 accent 條 */

/* 列 */
.act-cue td.fixcol { color: var(--text-dim); font-style: italic; }
.grp-start td { border-top: 2px solid var(--accent-soft); }
.mit-grid tbody tr:hover td { background: var(--bg-3); }
.mit-grid tbody tr:hover td.fixcol { background: var(--bg-2); }

/* 技能格：覆蓋時間=淡色帶，施放起點=實心塊，形成清楚的減傷帶 */
.cell { width: 38px; min-width: 38px; max-width: 38px; height: 40px; padding: 0;
  position: relative; overflow: hidden; vertical-align: middle; cursor: pointer; }
.mit-grid tbody td { height: 40px; box-sizing: border-box; overflow: hidden; }   /* 統一行高：填技能/DoT 不撐高 */
.fc2 { line-height: 1.15; }   /* DoT 兩行緊湊，不超出固定行高 */
.cell:hover { outline: 1px solid var(--accent); outline-offset: -1px; }
/* 持續中（減傷帶）：明顯飽和填色 + 左緣色條標出持續範圍 */
.cell.on { background: rgba(167, 139, 250, 0.42); box-shadow: inset 3px 0 0 var(--accent); }
.cell.on.cast { position: relative; background: var(--accent); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4); }
.cell.cat-Barrier.on { background: rgba(232, 164, 90, 0.40); box-shadow: inset 3px 0 0 var(--warn); }
.cell.cat-Barrier.on.cast { background: var(--warn); }
.cell.cat-Heal.on { background: rgba(125, 216, 125, 0.36); box-shadow: inset 3px 0 0 var(--success); }
.cell.cat-Heal.on.cast { background: var(--success); }
/* 冷卻充能帶（持續結束→可再用之間）：紅白斜紋 */
.cell.cd { background: repeating-linear-gradient(45deg,
  rgba(229, 115, 115, 0.55), rgba(229, 115, 115, 0.55) 4px,
  rgba(255, 255, 255, 0.60) 4px, rgba(255, 255, 255, 0.60) 8px); }
/* 護盾擋下傷害角標 */
.bar-val { position: absolute; top: 0; right: 0; font-size: 10px; line-height: 1.1; font-weight: 700;
  padding: 0 2px; background: rgba(0, 0, 0, 0.66); color: #ffc400; border-radius: 0 0 0 3px; }   /* 盾值移頂部，避讓底部對象標籤 */
/* 指定對象標籤（坦/非坦，點擊切換）：cell 底部整條、置中、放大易點 */
.tgt-tag { position: absolute; bottom: 0; left: 0; right: 0; font-size: 11px; line-height: 1.5; font-weight: 700;
  text-align: center; background: rgba(0, 0, 0, 0.78); color: var(--accent); cursor: pointer; z-index: 3; }
.tgt-tag:hover { background: rgba(0, 0, 0, 0.92); }
.tgt-tag.raid { color: var(--success); }   /* 非坦對象 */

/* HP 血條（顯示剩餘 HP%；綠=高、橘=低於 30%、紅=致死空條） */
.hp-bar { position: relative; display: flex; height: 26px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.hp-fill { height: 100%; flex: none; transition: width .12s; }
.hp-shield { height: 100%; flex: none; background: #ffc400; }       /* 護盾：黃色（只擋一次傷害） */
.hp-lbl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-variant-numeric: tabular-nums; color: #fff;
  text-shadow: 0 0 2px #000, 0 0 2px #000; pointer-events: none; }
.hp-bar.safe  .hp-fill { background: var(--success); }
.hp-bar.tight .hp-fill { background: var(--warn); }
.hp-bar.dead  { outline: 1px solid var(--danger); background: rgba(229, 115, 115, 0.32); }
.hp-bar.dead  .hp-fill { background: var(--danger); }
.surv-inv { font-size: 10px; font-weight: 700; color: var(--success);
  border: 1px solid var(--success); border-radius: 3px; }
.surv-na { color: var(--text-dim); }

/* 招式格：名稱 + 目標下拉 */
.fc1 .act-name { display: block; }
.tgt-sel {
  flex: 0 0 auto; width: 72px; font-size: 14px; font-weight: 700; padding: 3px 2px;
  background: var(--bg-3); color: var(--text);
  border: 2px solid var(--border); border-radius: 5px; cursor: pointer; font-family: inherit;
}
.tgt-sel option { background: var(--bg-2); color: var(--text); font-weight: 700; }
/* 目標類型值配色（顏色明顯）：全體=青、單體=琥珀、雙坦=紫 */
.tgt-sel.tgt-raid { color: #63cdf2; border-color: #63cdf2; background: rgba(99, 205, 242, 0.16); }
.tgt-sel.tgt-solo { color: var(--warn); border-color: var(--warn); background: rgba(232, 164, 90, 0.18); }
.tgt-sel.tgt-duo  { color: var(--accent-2); border-color: var(--accent); background: var(--accent-soft); }
/* 圖示 */
.sk-icon { width: 30px; height: 30px; display: block; margin: 0 auto 3px; border-radius: 3px; flex: none; }
/* cell 圖示：絕對定位居中（脫離文檔流→永不撐高 cell，施放技能後行高不變） */
.cell-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 3px; }

/* 響應式：窄螢幕矩陣橫向捲動（左欄仍 sticky）；隊伍卡片換行 */
@media (max-width: 720px) {
  .fc1 { min-width: 110px; max-width: 110px; }
  .fc2, .fc3, .fc4, .fc5 { left: auto; position: static; }   /* 窄螢幕只固定 時間/招式，其餘隨捲 */
  .fc6 { left: auto; position: static; border-right: 1px solid var(--border); }
}