/* ============================================================
 * v1.8 第一批续做：B 实验线默认扇形布局
 * 复制自 v7.8.css 282-306，解除 body.has-state-frame 前缀
 * 配合 cards.js useOverlap = handCount > 0 触发
 * ============================================================ */
#cards.hand-overlap {
  display: block;
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: min(1120px, calc(100vw - 32px));
  max-width: 1120px;
  height: 268px;          /* 卡牌 224 + 扇形弧最大下移 38 + 缓冲 */
  margin: 0;
  flex-wrap: nowrap;
  z-index: 50;
}

#cards.hand-overlap .card {
  position: absolute;
  top: var(--hand-y, 0px); /* 扇形弧：中间高、两边逐级下移 */
  left: var(--hand-x);
  width: var(--overlap-card-width);
  min-width: 0;
  height: 224px;          /* 固定高，配合 --hand-y 的弧线 */
  margin: 0;
  z-index: var(--hand-z);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

#cards.hand-overlap .card.is-hovered {
  z-index: 999;
  transform: translateY(-30px) scale(1.05);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.6);
}

/* v1.8 第二批续做：手牌固定贴 viewport 底部，给主列留出遮挡缓冲 */
.col-main {
  padding-bottom: 460px;
}

/* v1.8 第二批续做：时间线限高；新日志在顶，旧日志向下滚动查看 */
body.tactical-v77 .col-side-bottom #log {
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border, #2a2f3a) transparent;
}

body.tactical-v77 .col-side-bottom #log::-webkit-scrollbar {
  width: 6px;
}
body.tactical-v77 .col-side-bottom #log::-webkit-scrollbar-track {
  background: transparent;
}
body.tactical-v77 .col-side-bottom #log::-webkit-scrollbar-thumb {
  background: var(--border, #2a2f3a);
  border-radius: 0;
}
body.tactical-v77 .col-side-bottom #log::-webkit-scrollbar-thumb:hover {
  background: var(--dim, #6b7280);
}

.status-empty {
  color: var(--dim, #6b7280);
  font-size: 11px;
  font-style: italic;
}
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 0;
  font-size: 11.5px;
  border: 1px solid var(--border, #2a2f3a);
  background: var(--panel-2, #1f232c);
  cursor: default;
  white-space: nowrap;
  transition: border-color .16s ease, background .16s ease, color .16s ease, opacity .16s ease;
}
.status-chip.is-inactive {
  color: #7b8492;
  border-color: rgba(150, 158, 172, .18);
  background: rgba(72, 78, 90, .18);
  opacity: .72;
}
.status-chip.is-inactive .status-icon,
.status-chip.is-inactive .status-value,
.status-chip.is-inactive .status-dur {
  color: #828a96;
}
.status-chip.is-inactive .status-icon {
  filter: grayscale(1);
  opacity: .78;
}
.status-chip.is-active {
  opacity: 1;
}
.status-chip.status-good {
  background: rgba(95, 184, 120, .08);
  border-color: rgba(95, 184, 120, .35);
  color: #7ed79a;
}
.status-chip.status-warn {
  background: rgba(232, 160, 74, .08);
  border-color: rgba(232, 160, 74, .35);
  color: #e8c15a;
}
.status-chip.status-bad {
  background: rgba(226, 87, 76, .08);
  border-color: rgba(226, 87, 76, .35);
  color: #f06f6f;
}
.status-chip.status-good.is-inactive,
.status-chip.status-warn.is-inactive,
.status-chip.status-bad.is-inactive {
  color: #7b8492;
  border-color: rgba(150, 158, 172, .18);
  background: rgba(72, 78, 90, .18);
}
.status-chip.status-good.is-active {
  background: rgba(95, 184, 120, .14);
  box-shadow: inset 0 0 0 1px rgba(126, 215, 154, .08);
}
.status-chip.status-warn.is-active {
  background: rgba(232, 160, 74, .14);
  box-shadow: inset 0 0 0 1px rgba(232, 160, 74, .08);
}
.status-chip.status-bad.is-active {
  background: rgba(226, 87, 76, .14);
  box-shadow: inset 0 0 0 1px rgba(226, 87, 76, .08);
}
.status-icon { font-size: 13px; }
.status-name { font-weight: 700; }
.status-value {
  color: #dce2ed;
  font-size: 10.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.status-dur {
  color: var(--muted, #8b94a3);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
 * v1.8 第三批续做 05：状态格嵌入信息行 + 主信息区 800 宽
 * ============================================================ */

#header,
#momentum-row,
#intent-row,
#result-box,
#gameover,
#reward-box,
#match-stage {
  width: min(800px, calc(100vw - 32px));
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

#header {
  padding-top: 8px;
  padding-bottom: 8px;
}

#intent-next {
  flex: 0 0 220px;
}

.status-chips-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  min-height: 22px;
  min-width: 0;
}

.status-chips-inline.status-chips-center {
  justify-content: center;
  margin-top: 4px;
}

.status-chips-inline .status-empty {
  line-height: 1.2;
}

.status-chips-inline .status-chip {
  padding: 3px 6px;
  font-size: 10.5px;
  line-height: 1.2;
  gap: 4px;
}

.status-chips-inline .status-icon {
  font-size: 11.5px;
}

.status-chips-inline .status-value,
.status-chips-inline .status-dur {
  font-size: 9.5px;
}

.status-chips-inline .status-chip.is-inactive .status-dur {
  display: none;
}

#cards.hand-overlap,
#hand-bar {
  width: min(800px, calc(100vw - 32px));
  max-width: 800px;
}

body.post-match #hand-bar,
body.post-match #cards {
  display: none !important;
}

body.result-review #result-box:not(:empty) {
  position: fixed;
  bottom: calc(16px + 268px + 8px + 54px + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: min(800px, calc(100vw - 32px));
  max-width: 800px;
  margin: 0;
  z-index: 48;
}

@media (max-width: 831px) {
  #header,
  #momentum-row,
  #intent-row,
  #result-box,
  #gameover,
  #reward-box,
  #match-stage {
    width: calc(100vw - 32px);
  }

  .momentum-row {
    grid-template-columns: auto auto minmax(80px, 1fr);
  }

  #intent-row {
    flex-direction: column;
  }

  #intent-next {
    flex: 0 0 auto;
  }

  .momentum-row .momentum-hint,
  .momentum-row #status-self {
    grid-column: 1 / -1;
  }

  .status-chips-inline {
    justify-content: flex-start;
  }
}