/* ==========================================================================
   AnYiの世界 —— panels.css
   弹窗层（.panel / 衣柜 / 背包 / 存档 / 成就 / 商店） + 战斗界面 + 天赋浮层
   纯黑白灰阶 · 方角 · 2px 黑白框 · 反相表示选中/强调
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * 1. #overlay-root 遮罩层
 * ------------------------------------------------------------------ */
#overlay-root {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2vh 2vw;
  background: var(--c-shade-72);
  overflow: hidden;
}

/* 无弹窗时由 JS 置 display:none；这里兜底一个 :empty 规则 */
#overlay-root:empty {
  display: none;
}

/* 遮罩本身可点（点击空白关闭，由 JS 绑定） */
#overlay-root.closing {
  animation: overlay-out var(--t-mid) ease-in both;
}

@keyframes overlay-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* ------------------------------------------------------------------ *
 * 2. .panel 通用弹窗
 * ------------------------------------------------------------------ */
.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1000px, 92vw);
  max-width: min(1000px, 92vw);
  max-height: 88vh;
  min-height: 0;
  background: var(--c-ink);
  color: var(--c-paper);
  border: var(--bw-2) solid var(--c-paper);
  border-radius: var(--radius-0);
  box-shadow: 0 0 0 var(--bw-1) var(--c-ink), 0 10px 30px var(--c-shade-72);
  font-size: var(--fs-sm);
  animation: panel-in .2s ease-out both;
}

.panel.narrow {
  width: min(560px, 90vw);
}

.panel.wide {
  width: min(1180px, 94vw);
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.99);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* 标题条 */
.panel-title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
  background: var(--c-ink);
  color: var(--c-paper);
  border-bottom: var(--bw-2) solid var(--c-paper);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: .3em;
  line-height: 1.5;
}

.panel-title .panel-sub {
  color: var(--c-dim);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: .1em;
}

/* 关闭按钮 */
.panel-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  height: 1.9em;
  padding: 0;
  background: transparent;
  color: var(--c-paper);
  border: var(--bw-2) solid var(--c-paper);
  border-radius: var(--radius-0);
  font-size: var(--fs-sm);
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.panel-close::before {
  content: "\2715";
}

.panel-close:hover,
.panel-close:focus-visible {
  background: var(--c-paper);
  color: var(--c-ink);
}

.panel-close:active {
  background: var(--c-dim-3);
  color: var(--c-ink);
}

/* 内容区（可滚动） */
.panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  background: var(--c-ink);
  color: var(--c-paper);
  line-height: 1.7;
}

.panel-body::-webkit-scrollbar {
  width: 8px;
}

/* 面板内分节 */
.panel-section {
  margin-bottom: var(--sp-5);
}

.panel-section:last-child {
  margin-bottom: 0;
}

.panel-section-title,
.panel-body h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding-bottom: 2px;
  border-bottom: var(--bw-1) solid var(--c-line);
  color: var(--c-paper);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: .26em;
}

/* 面板底部按钮条 */
.panel-footer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-top: var(--bw-2) solid var(--c-line);
  background: var(--c-ink);
}

/* ------------------------------------------------------------------ *
 * 3. 面板通用网格 / 卡片
 * ------------------------------------------------------------------ */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 17vw, 230px), 1fr));
  gap: var(--sp-3);
  width: 100%;
}

.panel-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel-grid.cols-3 {
  grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 13vw, 180px), 1fr));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
  padding: var(--sp-3);
  background: var(--c-ink);
  color: var(--c-paper);
  border: var(--bw-2) solid var(--c-paper);
  border-radius: var(--radius-0);
  font-size: var(--fs-sm);
  line-height: 1.6;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.card:hover {
  background: var(--c-panel);
  box-shadow: 4px 4px 0 0 var(--c-paper);
  transform: translate(-2px, -2px);
}

.card .card-name,
.card .card-title {
  color: var(--c-paper);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: .16em;
  word-break: break-word;
}

.card .card-desc {
  color: var(--c-dim);
  font-size: var(--fs-xs);
  line-height: 1.7;
  word-break: break-word;
}

.card .card-price,
.card .card-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: var(--bw-1) dashed var(--c-line);
  color: var(--c-dim-2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
}

.card .card-actions,
.card .card-btns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
}

.card .card-actions .btn {
  flex: 1 1 auto;
  padding: .24em .5em;
  min-height: 1.9em;
  font-size: var(--fs-xs);
  letter-spacing: .06em;
}

/* 卡片的角标（如"已装备"/"未解锁"） */
.card .card-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  padding: 0 .45em;
  background: var(--c-paper);
  color: var(--c-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
}

/* 选中：反相高亮 */
.card.selected,
.card.is-selected {
  background: var(--c-paper);
  color: var(--c-ink);
  border-color: var(--c-paper);
  box-shadow: 0 0 0 var(--bw-2) var(--c-ink), 0 0 0 4px var(--c-paper);
  transform: none;
}

.card.selected .card-name,
.card.selected .card-title,
.card.selected .card-desc,
.card.selected .card-price,
.card.selected .card-meta,
.card.selected .card-badge,
.card.is-selected .card-name,
.card.is-selected .card-desc {
  color: var(--c-ink);
}

.card.selected .card-desc,
.card.is-selected .card-desc {
  color: var(--c-ink);
  opacity: .78;
}

.card.selected .card-price,
.card.selected .card-meta {
  border-top-color: var(--c-ink);
  color: var(--c-ink);
}

.card.selected .card-badge {
  background: var(--c-ink);
  color: var(--c-paper);
}

.card.selected .btn {
  background: var(--c-ink);
  color: var(--c-paper);
  border-color: var(--c-ink);
}

.card.selected .btn:hover {
  background: var(--c-paper);
  color: var(--c-ink);
  border-color: var(--c-ink);
}

/* 不可用 */
.card.disabled,
.card.locked {
  background: var(--c-panel);
  border-color: var(--c-line);
  border-style: dashed;
  color: var(--c-dim);
  opacity: .6;
}

.card.disabled .card-name,
.card.disabled .card-title,
.card.locked .card-name {
  color: var(--c-dim);
  font-weight: 400;
}

.card.disabled .card-desc,
.card.locked .card-desc {
  color: var(--c-line);
}

.card.disabled:hover,
.card.locked:hover {
  box-shadow: none;
  transform: none;
  background: var(--c-panel);
}

.card.disabled .btn,
.card.locked .btn {
  cursor: not-allowed;
  opacity: .5;
}

/* ------------------------------------------------------------------ *
 * 4. .tab-bar 分类标签
 * ------------------------------------------------------------------ */
.tab-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: var(--sp-4);
  border-bottom: var(--bw-2) solid var(--c-paper);
}

.tab-bar .tab,
.tab {
  flex: 0 0 auto;
  padding: .35em 1.1em;
  background: var(--c-ink);
  color: var(--c-dim-2);
  border: var(--bw-2) solid var(--c-line);
  border-bottom: 0;
  border-radius: var(--radius-0);
  font-size: var(--fs-sm);
  letter-spacing: .24em;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.tab-bar .tab+.tab {
  margin-left: calc(-1 * var(--bw-2));
}

.tab-bar .tab:hover,
.tab:hover {
  background: var(--c-panel-2);
  color: var(--c-paper);
  border-color: var(--c-paper);
}

/* 激活：反相 */
.tab.active,
.tab-bar .tab.active {
  background: var(--c-paper);
  color: var(--c-ink);
  border-color: var(--c-paper);
  font-weight: 700;
}

.tab:disabled {
  cursor: not-allowed;
  opacity: .35;
}

/* ------------------------------------------------------------------ *
 * 5. .save-slot 存档槽
 * ------------------------------------------------------------------ */
.save-slot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-ink);
  color: var(--c-paper);
  border: var(--bw-2) solid var(--c-paper);
  border-radius: var(--radius-0);
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}

.save-slot+.save-slot {
  margin-top: var(--sp-3);
}

.save-slot:hover {
  background: var(--c-panel);
}

.save-slot .slot-no,
.save-slot .save-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8em;
  padding: 0 .3em;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
}

.save-slot .save-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: 2px;
  border-bottom: var(--bw-1) solid var(--c-line);
}

.save-slot .save-name {
  color: var(--c-paper);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: .18em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.save-slot .save-time,
.save-slot .save-meta {
  color: var(--c-dim);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
}

.save-slot .save-info {
  color: var(--c-dim-2);
  font-size: var(--fs-xs);
  line-height: 1.8;
}

.save-slot .save-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: var(--bw-1) dashed var(--c-line);
}

.save-slot .save-actions .btn {
  padding: .24em .8em;
  min-height: 1.9em;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
}

/* 空槽：虚线 + 灰字 */
.save-slot.empty,
.save-slot.is-empty {
  border-style: dashed;
  border-color: var(--c-line);
  color: var(--c-dim);
}

.save-slot.empty .save-name {
  color: var(--c-dim);
  font-weight: 400;
  letter-spacing: .1em;
}

/* 当前选中槽：反相 */
.save-slot.selected {
  background: var(--c-paper);
  color: var(--c-ink);
  box-shadow: 0 0 0 var(--bw-2) var(--c-ink);
}

.save-slot.selected .save-name,
.save-slot.selected .save-time,
.save-slot.selected .save-info,
.save-slot.selected .save-meta {
  color: var(--c-ink);
}

.save-slot.selected .save-no {
  background: var(--c-ink);
  color: var(--c-paper);
}

/* ------------------------------------------------------------------ *
 * 6. .kv 键值对行
 * ------------------------------------------------------------------ */
.kv {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 3px 0;
  border-bottom: var(--bw-1) dotted var(--c-panel-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.kv+.kv {
  margin-top: 0;
}

.kv:last-child {
  border-bottom: 0;
}

.kv .kv-key,
.kv .kv-k {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--c-dim);
  letter-spacing: .16em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kv .kv-val,
.kv .kv-v {
  flex: 0 1 auto;
  margin-left: auto;
  color: var(--c-paper);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  text-align: right;
  word-break: break-word;
}

.kv .kv-val.up,
.kv .kv-v.up {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kv .kv-val.down,
.kv .kv-v.down {
  color: var(--c-dim-2);
  font-style: italic;
}

.kv.highlight {
  background: var(--c-paper);
  color: var(--c-ink);
}

.kv.highlight .kv-key,
.kv.highlight .kv-val {
  color: var(--c-ink);
}

/* 审视 / 对话的标签行 */
.inspect-tags {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.tag-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  padding: var(--sp-1) 0 var(--sp-2);
  border-bottom: var(--bw-1) solid var(--c-panel-2);
}

.tag-row:last-child {
  border-bottom: 0;
}

.tag-row .tag-label,
.tag-row .tag-name {
  flex: 0 0 auto;
  min-width: 4.5em;
  color: var(--c-dim);
  font-size: var(--fs-xs);
  letter-spacing: .2em;
}

.tag-row .tag,
.tag-row .tag-item {
  display: inline-flex;
  align-items: center;
  padding: .05em .5em;
  background: var(--c-ink);
  color: var(--c-paper);
  border: var(--bw-1) solid var(--c-paper);
  border-radius: var(--radius-0);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  white-space: nowrap;
}

.tag-row .tag.strong,
.tag-row .tag-item.strong {
  background: var(--c-paper);
  color: var(--c-ink);
  border-color: var(--c-ink);
  font-weight: 700;
}

.tag-row .tag.dim,
.tag-row .tag-item.dim {
  background: transparent;
  border-color: var(--c-line);
  border-style: dashed;
  color: var(--c-dim);
}

/* ------------------------------------------------------------------ *
 * 7. 成就列表
 * ------------------------------------------------------------------ */
.ach-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-ink);
  color: var(--c-paper);
  border: var(--bw-2) solid var(--c-paper);
  border-radius: var(--radius-0);
  font-size: var(--fs-sm);
  line-height: 1.6;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}

.ach-item+.ach-item {
  margin-top: var(--sp-2);
}

.ach-item .ach-name {
  flex: 0 0 auto;
  min-width: 8em;
  font-weight: 700;
  letter-spacing: .16em;
}

.ach-item .ach-desc {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--c-dim-2);
  font-size: var(--fs-xs);
  word-break: break-word;
}

.ach-item .ach-cond,
.ach-item .ach-hint {
  flex: 0 0 auto;
  color: var(--c-dim);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  white-space: nowrap;
}

/* 未解锁：灰色 + 降透明 + 条件提示可见 */
.ach-item.locked {
  background: var(--c-panel);
  border-color: var(--c-line);
  color: var(--c-dim);
  opacity: .6;
}

.ach-item.locked .ach-name {
  font-weight: 400;
  color: var(--c-dim);
}

.ach-item.locked .ach-name::before {
  content: "\25A1";
  margin-right: .4em;
  color: var(--c-line);
}

.ach-item.locked .ach-desc,
.ach-item.locked .ach-cond,
.ach-item.locked .ach-hint {
  color: var(--c-line);
}

.ach-item.locked .ach-cond,
.ach-item.locked .ach-hint {
  font-style: italic;
}

/* 已解锁：白框 + 名称加粗 */
.ach-item.unlocked {
  border-color: var(--c-paper);
  border-width: var(--bw-2);
  color: var(--c-paper);
  opacity: 1;
}

.ach-item.unlocked .ach-name {
  font-weight: 700;
  color: var(--c-paper);
}

.ach-item.unlocked .ach-name::before {
  content: "\25A0";
  margin-right: .4em;
  color: var(--c-paper);
}

.ach-item.unlocked:hover {
  background: var(--c-panel-2);
  box-shadow: 4px 4px 0 0 var(--c-paper);
}

/* 成就计数 */
.ach-counter {
  margin-left: auto;
  color: var(--c-dim);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
}

/* ------------------------------------------------------------------ *
 * 8. 商店
 * ------------------------------------------------------------------ */
.shop-gold {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .2em .8em;
  background: var(--c-paper);
  color: var(--c-ink);
  border: var(--bw-2) solid var(--c-ink);
  border-radius: var(--radius-0);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .12em;
}

.shop-gold::before {
  content: "所持金";
  padding-right: .5em;
  border-right: var(--bw-1) solid var(--c-ink);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: .2em;
}

.shop-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-ink);
  color: var(--c-paper);
  border: var(--bw-2) solid var(--c-paper);
  border-radius: var(--radius-0);
  font-size: var(--fs-sm);
  line-height: 1.6;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}

.shop-item+.shop-item {
  margin-top: var(--sp-2);
}

.shop-item:hover {
  background: var(--c-panel-2);
}

.shop-item .shop-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  letter-spacing: .14em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-item .shop-desc {
  flex: 2 1 auto;
  min-width: 0;
  color: var(--c-dim);
  font-size: var(--fs-xs);
  word-break: break-word;
}

.shop-item .shop-price {
  flex: 0 0 auto;
  min-width: 5em;
  color: var(--c-paper);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  letter-spacing: .08em;
  text-align: right;
  white-space: nowrap;
}

.shop-item .shop-price::after {
  content: " G";
  color: var(--c-dim);
  font-size: .85em;
}

.shop-item .shop-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  gap: var(--sp-1);
}

.shop-item .shop-actions .btn {
  padding: .22em .7em;
  min-height: 1.9em;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
}

/* 买不起：灰化 */
.shop-item.disabled,
.shop-item.cannot-afford {
  border-color: var(--c-line);
  border-style: dashed;
  color: var(--c-dim);
}

.shop-item.disabled .shop-name,
.shop-item.cannot-afford .shop-name,
.shop-item.disabled .shop-price,
.shop-item.cannot-afford .shop-price {
  color: var(--c-dim);
  font-weight: 400;
}

/* 买入 / 卖出 用反相区分 */
.shop-item .btn.buy {
  background: var(--c-paper);
  color: var(--c-ink);
  border-color: var(--c-paper);
}

.shop-item .btn.buy:hover {
  background: var(--c-ink);
  color: var(--c-paper);
  border-color: var(--c-paper);
}

.shop-item .btn.sell {
  background: var(--c-ink);
  color: var(--c-paper);
  border-color: var(--c-paper);
}

.shop-item .btn.sell:hover {
  background: var(--c-paper);
  color: var(--c-ink);
}

/* ------------------------------------------------------------------ *
 * 9. #battle-root 战斗界面
 *    grid 分区：左竖排日志 / 敌人立绘 / 中层选项 / 底层玩家信息
 * ------------------------------------------------------------------ */
#battle-root {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: clamp(170px, 16vw, 220px) minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "log enemy  enemy"
    "log options options"
    "bottom bottom bottom";
  gap: 0;
  background: var(--c-ink);
  color: var(--c-paper);
  font-size: var(--fs-sm);
  overflow: hidden;
}

/* 战斗背景（可选，由 JS 设置背景图/类名） */
#battle-root .battle-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: grayscale(1) contrast(1.05);
  pointer-events: none;
}

#battle-root .battle-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-shade-60);
}

#battle-root>* {
  position: relative;
  z-index: 1;
}

/* 战斗中的状态标签（流血 / 中毒 / 眩晕 / 禁锢 / 致盲） */.battle-status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.status-tag {
  padding: 0 var(--sp-2);
  border: var(--bw-1) solid var(--c-line-strong);
  background: var(--c-shade-72);
  color: var(--c-paper);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
}

/* ★ 存档导出 / 导入的文本框
   （手机适配那一段把 .panel 设成了不可选中，这里要显式开回来，不然复制不了） */
.save-text {
  display: block;
  width: 100%;
  min-height: 9em;
  max-height: 34vh;
  margin: var(--sp-3) 0;
  padding: var(--sp-3);
  background: var(--c-ink);
  color: var(--c-paper);
  border: var(--bw-2) solid var(--c-line-strong);
  border-radius: var(--radius-0);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
  overflow-wrap: anywhere;
  resize: vertical;
  -webkit-user-select: text;
  user-select: text;
}

.save-text:focus {
  outline: none;
  border-color: var(--c-paper);
}

/* --- 9.1 .battle-log 最左竖排窄栏 --- */
.battle-log {
  grid-area: log;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  background: var(--c-shade-60);
  border-right: var(--bw-2) solid var(--c-line);
  color: var(--c-paper);
  font-size: var(--fs-xs);
  line-height: 1.65;
  word-break: break-word;
}

.battle-log .battle-log-title {
  flex: 0 0 auto;
  position: sticky;
  top: calc(-1 * var(--sp-3));
  margin: calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3)) var(--sp-2) calc(-1 * var(--sp-4));
  padding: 2px var(--sp-3);
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .3em;
}

.log-line {
  display: block;
  padding: 1px 0 1px var(--sp-2);
  border-left: var(--bw-1) solid var(--c-panel-2);
  color: var(--c-dim-2);
  font-size: var(--fs-xs);
  line-height: 1.65;
  word-break: break-word;
}

.log-line+.log-line {
  margin-top: 1px;
}

/* 最新一条加亮：白底黑字 */
.log-line.new,
.log-line.latest {
  background: var(--c-paper);
  color: var(--c-ink);
  border-left-color: var(--c-ink);
  font-weight: 700;
  padding: 1px var(--sp-2);
  box-shadow: 0 0 0 var(--bw-1) var(--c-paper);
  animation: log-in .18s ease-out both;
}

@keyframes log-in {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* 战斗日志的语义前缀：反相区分，不用颜色 */
.log-line.dmg::before,
.log-line.hurt::before {
  content: "\25B8 ";
  font-weight: 700;
}

.log-line.heal::before {
  content: "+ ";
  font-weight: 700;
}

.log-line.miss::before {
  content: "\00D7 ";
  font-weight: 700;
}

.log-line.sys,
.log-line.system {
  color: var(--c-dim);
  font-style: italic;
}

.log-line.round {
  margin: var(--sp-2) 0;
  padding: 1px var(--sp-2);
  background: transparent;
  border-left: 0;
  border-top: var(--bw-1) dashed var(--c-line);
  border-bottom: var(--bw-1) dashed var(--c-line);
  color: var(--c-paper);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .2em;
  text-align: center;
}

/* --- 9.2 .battle-enemy 敌人区 --- */
.battle-enemy {
  grid-area: enemy;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-width: 0;
  min-height: 0;
  padding: var(--sp-4);
  overflow: hidden;
}

.battle-enemy .enemy-figure {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(180px, 24vw, 340px);
  height: clamp(200px, 42vh, 420px);
  max-height: 46vh;
  background: var(--c-ink);
  border: var(--bw-2) solid var(--c-paper);
  border-radius: var(--radius-0);
  filter: grayscale(1) contrast(1.05);
  overflow: hidden;
  animation: enemy-breathe 3.4s ease-in-out infinite;
}

.battle-enemy .enemy-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) contrast(1.05);
}

.battle-enemy .enemy-figure .placeholder {
  width: 100%;
  height: 100%;
  min-height: 100%;
  font-size: var(--fs-xs);
}

@keyframes enemy-breathe {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

/* 受击抖动 */
.battle-enemy .enemy-figure.hit {
  animation: enemy-hit .22s ease-out 2;
}

@keyframes enemy-hit {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-7px);
  }

  75% {
    transform: translateX(7px);
  }

  100% {
    transform: translateX(0);
  }
}

.battle-enemy .enemy-name {
  padding: .1em .9em;
  background: var(--c-shade-60);
  border-bottom: var(--bw-2) solid var(--c-paper);
  color: var(--c-paper);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: .34em;
  text-align: center;
  text-shadow: 0 0 8px var(--c-ink);
}

.battle-enemy .enemy-sub,
.battle-enemy .enemy-count {
  color: var(--c-dim);
  font-size: var(--fs-xs);
  letter-spacing: .16em;
}

/* 敌人血条 */
.enemy-hpbar {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2);
  width: clamp(200px, 26vw, 360px);
  height: clamp(8px, 1.4vh, 14px);
  padding: 0;
  background: var(--c-ink);
  border: var(--bw-2) solid var(--c-paper);
  border-radius: var(--radius-0);
  overflow: hidden;
}

.enemy-hpbar .hp-fill,
.enemy-hpbar .enemy-hpfill,
.enemy-hpbar .enemy-hp-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--c-paper);
  transition: width var(--t-slow);
}

/* 血量偏低：斜纹（灰阶表示"危险"） */
.enemy-hpbar.low .hp-fill,
.enemy-hpbar.low .enemy-hpfill,
.enemy-hpbar .hp-fill.low {
  background: repeating-linear-gradient(90deg,
      var(--c-paper) 0 4px,
      var(--c-ink) 4px 8px);
}

.enemy-hpbar .hp-text,
.enemy-hpbar .enemy-hptext {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-paper);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-shadow: 0 0 3px var(--c-ink), 0 0 2px var(--c-ink);
}

/* 天赋1：对方下回合行动 */
.enemy-intent {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  max-width: min(90%, 520px);
  padding: .18em .8em;
  background: var(--c-ink);
  color: var(--c-paper);
  border: var(--bw-1) dashed var(--c-paper);
  border-radius: var(--radius-0);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  line-height: 1.7;
  text-align: center;
  animation: intent-in .2s ease-out both;
}

.enemy-intent::before {
  content: "\25B6";
  font-size: .9em;
}

@keyframes intent-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* --- 9.3 .battle-options 中层选项 --- */
.battle-options {
  grid-area: options;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 15vw, 220px), 1fr));
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  border-top: var(--bw-1) solid var(--c-line);
}

/* 单列铺满（选项少时） */
.battle-options.single-col {
  grid-template-columns: 1fr;
}

.battle-options .opt {
  width: 100%;
}

.battle-options .opt.disabled,
.battle-options .opt:disabled {
  background: var(--c-panel-2);
  color: var(--c-dim);
  border-color: var(--c-line);
  border-style: dashed;
}

.battle-options .opt .opt-note {
  float: right;
  color: var(--c-dim);
  font-size: var(--fs-xs);
}

.battle-options .opt:hover:not(:disabled) .opt-note {
  color: var(--c-dim-3);
}

/* --- 9.4 .battle-bottom 底层 --- */
.battle-bottom {
  grid-area: bottom;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(10px, 1.4vw, 26px);
  min-width: 0;
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
  background: var(--c-ink);
  border-top: var(--bw-2) solid var(--c-paper);
  color: var(--c-paper);
  font-size: var(--fs-xs);
  overflow: hidden;
}

/* 玩家生命/魔力 */
.battle-bottom .battle-stats,
.battle-bottom .stat-block {
  flex: 0 0 auto;
  min-width: clamp(150px, 15vw, 220px);
}

.battle-bottom .stat-row {
  padding: 0;
}

.battle-bottom .stat-bar {
  margin-bottom: 2px;
}

/* 详细信息 */
.battle-detail {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 22vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--sp-3);
  border-left: var(--bw-1) solid var(--c-line);
  border-right: var(--bw-1) solid var(--c-line);
  color: var(--c-dim-2);
  font-size: var(--fs-xs);
  line-height: 1.7;
}

.battle-detail .kv {
  padding: 1px 0;
  border-bottom-color: var(--c-panel-2);
}

.battle-detail .detail-title {
  display: block;
  margin-bottom: 2px;
  color: var(--c-paper);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .24em;
}

#btn-battle-settings {
  flex: 0 0 auto;
  margin-left: auto;
  padding: .3em .9em;
  min-height: 1.9em;
  background: transparent;
  color: var(--c-paper);
  border: var(--bw-2) solid var(--c-paper);
  border-radius: var(--radius-0);
  font-size: var(--fs-xs);
  letter-spacing: .24em;
  transition: background var(--t-fast), color var(--t-fast);
}

#btn-battle-settings:hover {
  background: var(--c-paper);
  color: var(--c-ink);
}

/* 战斗结束遮罩（内部使用） */
#battle-root .battle-result {
  grid-area: enemy;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  background: var(--c-shade-72);
  color: var(--c-paper);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: .4em;
  text-align: center;
}

/* ------------------------------------------------------------------ *
 * 10. #talent-overlay 天赋2 浮层（不阻塞节奏的小卡片）
 *     注：#talent-overlay 自身就是这个卡片的样式，内容直接挂在它下面
 *     （.talent-ask / .talent-pick / .talent-btns），不要再包一层 wrapper，
 *     否则卡片的背景 / 边框 / 动画会被包在内层而看不到。
 * ------------------------------------------------------------------ */
#talent-overlay {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: min(400px, 34vw);
  max-height: min(70vh, 520px);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  background: var(--c-ink);
  color: var(--c-paper);
  border: var(--bw-2) solid var(--c-paper);
  border-radius: var(--radius-0);
  box-shadow: 0 0 0 var(--bw-1) var(--c-ink), 0 8px 26px var(--c-shade-72);
  font-size: var(--fs-sm);
  line-height: 1.6;
  overflow: hidden;
  animation: talent-in .22s cubic-bezier(.2, .9, .3, 1.2) both;
  pointer-events: auto;
}

#talent-overlay::before {
  content: "天赋";
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 .55em;
  background: var(--c-paper);
  color: var(--c-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .3em;
}

@keyframes talent-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.talent-ask {
  display: block;
  margin-top: 1.2em;
  padding-bottom: var(--sp-2);
  border-bottom: var(--bw-1) solid var(--c-line);
  color: var(--c-paper);
  font-size: var(--fs-md);
  line-height: 1.75;
  letter-spacing: .06em;
  word-break: break-word;
}

.talent-ask .talent-ctx {
  display: block;
  margin-top: 2px;
  color: var(--c-dim);
  font-size: var(--fs-xs);
  letter-spacing: .18em;
}

/* 是 / 否 按钮：反相，一眼可点 */
#talent-overlay .talent-actions,
#talent-overlay .talent-row {
  display: flex;
  flex-direction: row;
  gap: var(--sp-2);
}

.talent-yes,
.talent-no,
#talent-overlay .talent-btn {
  flex: 1 1 0;
  padding: .45em .6em;
  border-radius: var(--radius-0);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: .3em;
  line-height: 1.6;
  text-align: center;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}

.talent-yes {
  background: var(--c-paper);
  color: var(--c-ink);
  border: var(--bw-2) solid var(--c-paper);
  box-shadow: 0 0 0 var(--bw-1) var(--c-ink);
}

.talent-yes:hover,
.talent-yes:focus-visible {
  background: var(--c-ink);
  color: var(--c-paper);
  box-shadow: inset 0 0 0 var(--bw-2) var(--c-paper);
}

.talent-no {
  background: var(--c-ink);
  color: var(--c-paper);
  border: var(--bw-2) solid var(--c-paper);
}

.talent-no:hover,
.talent-no:focus-visible {
  background: var(--c-paper);
  color: var(--c-ink);
}

/* 天赋2 指定掉落物：可滚动物品选择列表 */
#talent-overlay .talent-pick {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  max-height: min(40vh, 300px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-2);
  background: var(--c-panel);
  border: var(--bw-1) solid var(--c-line);
  border-top: var(--bw-2) solid var(--c-paper);
}

#talent-overlay .talent-pick:empty {
  display: none;
}

#talent-overlay .talent-pick .pick-title {
  flex: 0 0 auto;
  margin-bottom: 2px;
  color: var(--c-dim);
  font-size: var(--fs-xs);
  letter-spacing: .24em;
}

.pick-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
  padding: .22em .7em;
  background: var(--c-ink);
  color: var(--c-paper);
  border: var(--bw-1) solid var(--c-paper);
  border-radius: var(--radius-0);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  line-height: 1.7;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.pick-item:hover,
.pick-item:focus-visible {
  background: var(--c-paper);
  color: var(--c-ink);
}

.pick-item.selected,
.pick-item.active {
  background: var(--c-paper);
  color: var(--c-ink);
  font-weight: 700;
  box-shadow: inset 0 0 0 var(--bw-1) var(--c-ink);
}

.pick-item .pick-note {
  flex: 0 0 auto;
  color: var(--c-dim);
  font-size: var(--fs-xs);
}

.pick-item:hover .pick-note,
.pick-item.selected .pick-note {
  color: var(--c-ink);
}

.pick-item:disabled,
.pick-item.disabled {
  cursor: not-allowed;
  background: var(--c-panel-2);
  color: var(--c-line);
  border-color: var(--c-line);
  border-style: dashed;
}

/* 浮层倒计时条（可选，表示"不阻塞节奏"的等待） */
#talent-overlay .talent-timer {
  height: var(--bw-2);
  background: var(--c-paper);
  transform-origin: left center;
  animation: talent-timer linear both;
}

#talent-overlay .talent-timer.slow {
  animation-duration: 6s;
}

#talent-overlay .talent-timer.normal {
  animation-duration: 4s;
}

@keyframes talent-timer {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

/* 审视弹窗里的图片区 */
.panel .inspect-figure {
  width: clamp(120px, 14vw, 200px);
  height: clamp(150px, 22vh, 260px);
  background: var(--c-ink);
  border: var(--bw-2) solid var(--c-paper);
  filter: grayscale(1) contrast(1.05);
  overflow: hidden;
}

.panel .inspect-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

/* 设置面板里的滑条（黑白） */
.panel input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: clamp(6px, 1vh, 10px);
  background: var(--c-ink);
  border: var(--bw-1) solid var(--c-line-strong);
  cursor: pointer;
}

.panel input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 18px;
  background: var(--c-paper);
  border: var(--bw-2) solid var(--c-ink);
  border-radius: var(--radius-0);
}

.panel input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 18px;
  background: var(--c-paper);
  border: var(--bw-2) solid var(--c-ink);
  border-radius: var(--radius-0);
}