/* assets/battle_ui.css
 * Until I Crack — 戰鬥 UI 樣式
 * 所有 token (--ink/--bone/--gold/--rebel-red/--purple/--t0..t3) 來自 v5_story.html :root
 * 本檔僅 add，不重定義；補充 deep / muted / mbti / jade / pink / bronze 等局部色。
 */

.bui-root {
  /* 派生色（不影響 v5_story.html 既有 token） */
  --bui-rebel-deep: #7a1f18;
  --bui-give-pink: #b86a85;
  --bui-iron-bronze: #c9a45c;
  --bui-rule-azure: #6a8aa8;
  --bui-jade: #5c8a72;
  --bui-mbti: #6a8aa8;
  --bui-shadow-purple: #6b3f8f;
  --bui-paper: #14141a;
  --bui-paper-aged: #1f1f28;
  --bui-bone-soft: rgba(239, 233, 216, 0.08);
  --bui-line: rgba(212, 164, 74, 0.15);

  width: 100%;
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr 280px;
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "marker marker"
    "stage  log"
    "hud    log"
    "hand   log";
  gap: 0.9rem 1.1rem;
  font-family: 'Noto Serif TC', 'Songti TC', serif;
  position: relative;
  margin: 0 auto;
}

.bui-root.paused {
  filter: grayscale(0.5) brightness(0.65);
  pointer-events: none;
}

@media (max-width: 900px) {
  .bui-root {
    grid-template-columns: 1fr;
    grid-template-areas:
      "marker"
      "stage"
      "hud"
      "hand"
      "log";
  }
}

/*=========================================================
 * Marker bar
 *========================================================*/
.bui-marker {
  grid-area: marker;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--bone-muted);
  letter-spacing: 0.12em;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--bui-line);
}
.bui-marker-mode { color: var(--gold); }
.bui-marker-cond { font-size: 0.65rem; opacity: 0.85; }

/*=========================================================
 * Stage / 敵人卡
 *========================================================*/
.bui-stage {
  grid-area: stage;
  display: grid;
  gap: 0.8rem;
}

.bui-enemies {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.bui-enemy {
  flex: 1 1 220px;
  min-width: 0;
  background: linear-gradient(135deg, var(--t1) 0%, var(--bui-paper) 70%);
  border: 1px solid var(--t3);
  padding: 1rem 1.1rem;
  position: relative;
  cursor: default;
  transition: border-color 0.25s, transform 0.2s;
}
.bui-enemy.rebel { border-color: var(--rebel-red); }
.bui-enemy.give  { border-color: var(--bui-give-pink); }
.bui-enemy.iron  { border-color: var(--bui-iron-bronze); }
.bui-enemy.rule  { border-color: var(--bui-rule-azure); }

.bui-enemy.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(212, 164, 74, 0.25);
  transform: translateY(-2px);
}
.bui-enemy.dead {
  opacity: 0.32;
  filter: grayscale(0.85);
}
.bui-enemy.unkillable {
  border-color: var(--gold);
  background: linear-gradient(135deg, #1a1410 0%, #0c0c10 70%);
}

.bui-enemy-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.bui-enemy-head h3 {
  font-family: 'ZCOOL XiaoWei', 'Noto Serif TC', serif;
  font-size: 1.15rem;
  color: var(--bone);
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.bui-attr-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid currentColor;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bui-attr-badge.attr-water { color: #6aa8d4; }
.bui-attr-badge.attr-fire  { color: #d46a4a; }
.bui-attr-badge.attr-earth { color: #c9a45c; }
.bui-attr-badge.attr-metal { color: #cccccc; }

.bui-enemy-intent {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--rebel-red);
  letter-spacing: 0.06em;
  margin: 0.4rem 0 0.55rem;
}
.bui-enemy-intent.danger {
  color: var(--bui-shadow-purple);
  animation: bui-pulseWarn 1.5s infinite;
}
@keyframes bui-pulseWarn {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.bui-hp-track {
  height: 8px;
  background: rgba(0, 0, 0, 0.55);
  overflow: hidden;
  border: 1px solid var(--bui-line);
}
.bui-hp-fill {
  height: 100%;
  transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.bui-hp-fill.rebel { background: linear-gradient(90deg, var(--bui-rebel-deep), var(--rebel-red)); }
.bui-hp-fill.give  { background: linear-gradient(90deg, #6a3a4a, var(--bui-give-pink)); }
.bui-hp-fill.iron  { background: linear-gradient(90deg, #4a3a1a, var(--bui-iron-bronze)); }
.bui-hp-fill.rule  { background: linear-gradient(90deg, #3a4a6a, var(--bui-rule-azure)); }

.bui-hp-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--bone);
  text-align: right;
  margin-top: 0.2rem;
}

.bui-debuffs {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.bui-debuff {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  color: var(--bui-shadow-purple);
  border: 1px solid currentColor;
  padding: 0.05rem 0.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/*=========================================================
 * 模式專屬面板
 *========================================================*/
.bui-multi-panel,
.bui-ritual-panel,
.bui-mirror-panel {
  background: var(--t1);
  border: 1px solid var(--bui-line);
  padding: 0.8rem 1rem;
}
.bui-panel-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--gold);
  letter-spacing: 0.15em;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

/* multi: 屬性輪轉 */
.bui-cycle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  flex-wrap: wrap;
}
.bui-cycle-step {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--t3);
  color: var(--bone-muted);
  letter-spacing: 0.05em;
}
.bui-cycle-step.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212, 164, 74, 0.08);
}
.bui-cycle-arrow {
  color: var(--bone-muted);
  opacity: 0.5;
}
.bui-cycle-cur {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--bone-muted);
}
.bui-cycle-cur strong { color: var(--gold); }

/* ritual: 進度 */
.bui-ritual-row {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.bui-ritual-cd {
  font-weight: 700;
  letter-spacing: 0.1em;
}
.bui-ritual-checks {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.bui-ritual-check {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: var(--bone-muted);
  letter-spacing: 0.05em;
}
.bui-ritual-check.done {
  color: var(--bui-jade);
}
.bui-ritual-hint {
  font-size: 0.78rem;
  color: var(--bone-muted);
  font-style: italic;
}

/* mirror: 進度 */
.bui-mirror-row {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--bone-muted);
}
.bui-mirror-stat strong {
  color: var(--gold);
  font-weight: 700;
  margin-left: 0.3rem;
}
.bui-mirror-warn {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: var(--rebel-red);
  letter-spacing: 0.05em;
}

/*=========================================================
 * Player HUD（4 欄）
 *========================================================*/
.bui-hud {
  grid-area: hud;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.35);
  padding: 0.85rem 1rem;
  border: 1px solid var(--bui-line);
}
.bui-pstat {
  border-left: 2px solid var(--bone-muted);
  padding-left: 0.6rem;
}
.bui-pstat.hp     { border-left-color: var(--rebel-red); }
.bui-pstat.energy { border-left-color: var(--gold); }
.bui-pstat.shadow { border-left-color: var(--bui-shadow-purple); }
.bui-pstat.mark   { border-left-color: var(--bui-mbti); }

.bui-pstat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  color: var(--bone-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.bui-pstat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bone);
  margin-top: 0.15rem;
}
.bui-pstat-gauge {
  height: 4px;
  background: rgba(0, 0, 0, 0.6);
  margin-top: 0.3rem;
  overflow: hidden;
}
.bui-pstat-fill {
  height: 100%;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.bui-pstat.hp .bui-pstat-fill {
  background: linear-gradient(90deg, var(--bui-rebel-deep), var(--rebel-red));
  width: 0%;
}
.bui-pstat.shadow .bui-pstat-fill {
  background: var(--bui-shadow-purple);
  width: 0%;
}
.bui-pstat.shadow .bui-pstat-fill.warn {
  background: var(--rebel-red);
}
.bui-pstat.shadow .bui-pstat-fill.danger {
  background: var(--bui-shadow-purple);
  animation: bui-pulseWarn 0.9s infinite;
}

/*=========================================================
 * 手牌
 *========================================================*/
.bui-hand-frame {
  grid-area: hand;
  background: var(--bui-paper);
  border: 1px solid var(--bui-line);
  padding: 0.9rem 1rem;
}
.bui-hand-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.7rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--bui-bone-soft);
}
.bui-turn-info {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--bone-muted);
  letter-spacing: 0.1em;
}
.bui-turn-info .bui-turn-num {
  color: var(--gold);
  font-weight: 700;
}
.bui-end-turn {
  background: transparent;
  border: 1px solid var(--bone-muted);
  color: var(--bone);
  padding: 0.4rem 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: all 0.25s;
  text-transform: uppercase;
}
.bui-end-turn:hover {
  background: var(--rebel-red);
  border-color: var(--rebel-red);
  color: var(--ink);
}

.bui-hand-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
}

.bui-card {
  background: linear-gradient(180deg, var(--bui-paper-aged), var(--ink));
  border: 1px solid var(--t3);
  padding: 0.85rem 0.7rem 0.6rem;
  cursor: pointer;
  transition: all 0.22s;
  position: relative;
  min-height: 160px;
  display: flex;
  flex-direction: column;
}
.bui-card:hover:not(.disabled) {
  border-color: var(--gold);
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(184, 51, 42, 0.2);
}
.bui-card.disabled {
  opacity: 0.38;
  cursor: not-allowed;
  filter: grayscale(0.65);
}
.bui-card.played {
  animation: bui-cardPlay 0.45s ease-out forwards;
}
@keyframes bui-cardPlay {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-90px) scale(0.92); opacity: 0; }
}

.bui-card-cost {
  position: absolute;
  top: 0.35rem; right: 0.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.7);
  padding: 0.15rem 0.4rem;
  font-weight: 700;
}
.bui-card-cost.zero { color: var(--bui-jade); }

.bui-card-title {
  font-family: 'ZCOOL XiaoWei', 'Noto Serif TC', serif;
  font-size: 1.08rem;
  color: var(--bone);
  margin-bottom: 0.4rem;
  margin-right: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.03em;
}
.bui-card-effect {
  font-size: 0.76rem;
  color: var(--bone-muted);
  line-height: 1.5;
  flex: 1;
  margin-bottom: 0.4rem;
}
.bui-card-effect strong { color: var(--bone); }
.bui-card-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  color: var(--bone-muted);
  border-top: 1px dashed var(--bui-bone-soft);
  padding-top: 0.35rem;
  letter-spacing: 0.05em;
  opacity: 0.85;
}

.bui-card.naked { border-color: rgba(92, 138, 114, 0.4); }
.bui-card.naked:hover:not(.disabled) { border-color: var(--bui-jade); }
.bui-card.naked .bui-card-title { color: var(--bui-jade); }
.bui-card.naked .bui-card-meta  { color: var(--bui-jade); }

.bui-card.mbti  { border-color: rgba(106, 138, 168, 0.4); }
.bui-card.mbti:hover:not(.disabled) { border-color: var(--bui-mbti); }
.bui-card.mbti .bui-card-meta { color: var(--bui-mbti); }

.bui-card.mask  { border-color: rgba(200, 68, 60, 0.45); }
.bui-card.mask:hover:not(.disabled) { border-color: var(--rebel-red); }

/*=========================================================
 * 戰鬥日誌（右側，可滾動）
 *========================================================*/
.bui-log-frame {
  grid-area: log;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--bui-line);
  padding: 0.75rem 0.9rem;
  max-width: 280px;
  max-height: 480px;
  overflow-y: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  color: var(--bone-muted);
  line-height: 1.55;
}
.bui-log-line { padding: 0.13rem 0; }
.bui-log-line.dmg    { color: var(--rebel-red); }
.bui-log-line.heal   { color: var(--bui-jade); }
.bui-log-line.shadow { color: var(--bui-shadow-purple); }
.bui-log-line.system { color: var(--gold); }
.bui-log-line.player { color: var(--bui-mbti); }

/*=========================================================
 * Overlay（暫停 / 結束 banner / Se 對話 host）
 *========================================================*/
.bui-overlay {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 16, 0.85);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 2rem;
  backdrop-filter: blur(2px);
}
.bui-pause-msg {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  color: var(--bui-shadow-purple);
  letter-spacing: 0.15em;
  text-align: center;
  animation: bui-pulseWarn 1s infinite;
}
.bui-end-banner {
  font-family: 'ZCOOL XiaoWei', 'Noto Serif TC', serif;
  font-size: 1.8rem;
  letter-spacing: 0.2em;
  text-align: center;
  padding: 1.2rem 2rem;
  border: 1px solid currentColor;
}
.bui-end-banner.won     { color: var(--gold); }
.bui-end-banner.lost    { color: var(--rebel-red); }
.bui-end-banner.ritual  { color: var(--bui-jade); }
.bui-end-banner.forced  { color: var(--bui-shadow-purple); }

.bui-continue-btn {
  background: var(--gold);
  color: var(--ink);
  border: none;
  padding: 0.75rem 2rem;
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.25s;
}
.bui-continue-btn:hover {
  background: var(--rebel-red);
  color: var(--bone);
  transform: translateY(-2px);
}

.bui-dialog-host {
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--t2);
  border: 1px solid var(--bui-line);
  padding: 1.2rem;
}

/*=========================================================
 * Landscape compaction：iPad 橫屏 + Mac 半屏 — 三欄橫向布局
 *========================================================*/
@media (orientation: landscape) and (max-height: 900px) {
  .bui-root {
    max-width: 100%;
    width: 100%;
    /* 給 hand 最多空間（4 卡橫排）*/
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 2.2fr) minmax(0, 0.75fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "marker marker marker"
      "stage  hand   log";
    gap: 0.5rem 0.7rem;
    height: auto;
    max-height: calc(100vh - 1rem);
  }

  /* marker 一行 */
  .bui-marker { padding: 0.25rem 0; font-size: 0.65rem; }
  .bui-marker-cond { font-size: 0.6rem; }

  /* 左欄：敵人 + 玩家狀態 + panel 直堆，內捲 */
  .bui-stage {
    grid-area: stage;
    overflow-y: auto;
    gap: 0.5rem;
    padding-right: 0.3rem;
  }
  .bui-enemy { padding: 0.65rem 0.8rem; }
  .bui-enemy-head h3 { font-size: 0.95rem; }
  .bui-enemy-intent { font-size: 0.72rem; padding: 0.3rem 0.5rem; }
  .bui-hp-text { font-size: 0.65rem; }
  .bui-multi-panel,
  .bui-ritual-panel,
  .bui-mirror-panel {
    padding: 0.5rem 0.7rem;
  }
  .bui-panel-title { font-size: 0.65rem; }

  /* 中欄：手牌 — 直接接著 stage 旁邊 */
  .bui-hand-frame {
    grid-area: hand;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .bui-hand-header { padding: 0.3rem 0.5rem; font-size: 0.68rem; }
  .bui-end-turn { padding: 0.3rem 0.7rem; font-size: 0.7rem; }
  .bui-hand-cards {
    /* 強制 4 張橫排，無論欄寬，避免擠成 1 卡 1 排 */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
    overflow: visible;
  }
  .bui-card {
    min-height: 130px;
    padding: 0.55rem 0.5rem 0.4rem;
  }
  .bui-card-cost {
    font-size: 0.85rem;
  }
  .bui-card-title { font-size: 0.78rem; }
  .bui-card-effect { font-size: 0.7rem; line-height: 1.4; }
  .bui-card-meta { font-size: 0.6rem; }

  /* 右欄：log + pstats 共享 */
  .bui-log-frame {
    grid-area: log;
    overflow-y: auto;
    padding: 0.4rem 0.6rem;
    font-size: 0.68rem;
  }

  /* HUD 區（玩家狀態）合併進 stage 底部 */
  .bui-pstats {
    grid-area: hud;
    grid-column: 1 / 2;     /* 跟 stage 同一欄 */
    grid-row: 2 / 3;
  }
  /* 重新指派 areas 把 pstats 塞進左欄底端 */
  .bui-root {
    grid-template-areas:
      "marker marker marker"
      "stage  hand   log";
  }
  .bui-pstats {
    /* 將 pstats 放在 stage 同欄末端 */
    align-self: end;
    padding: 0.4rem 0;
    gap: 0.3rem;
  }
  .bui-pstat { padding: 0.3rem 0.4rem; }
  .bui-pstat-label { font-size: 0.6rem; }
  .bui-pstat-value { font-size: 0.85rem; }
}