/* style.css —— 页面容器 / 画布等比居中 / 触控与安全区基础样式
 * 职责：把 canvas 摆到视口中央并保持 9:16，消除页面滚动、双击缩放与 300ms 点击延迟，
 *       暴露 env(safe-area-inset-*) 供 render.js 读取，并为后续 DOM 面板预留 UI 层。
 * 依据：SPEC §1.2 运行约束、§4 文件结构、§8.2 拖拽与手势冲突对策
 */

:root {
  --ink: #0d0b0a;
  --gold: #c9a24a;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;                 /* 页面永不滚动，滚动只允许发生在面板内部 */
  background: var(--ink);
  overscroll-behavior: none;        /* 关掉 iOS/Android 的橡皮筋与下拉刷新 */
}

body {
  position: fixed;                  /* 规避 iOS 地址栏收缩导致的 100vh 抖动 */
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;           /* 等比缩放后的留白居中，避免任何拉伸 */
  touch-action: manipulation;        /* 消除 300ms 点击延迟（配合 viewport meta） */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", "Heiti SC", sans-serif;
}

/* 主画布：尺寸与物理像素由 render.js 设置；touch-action:none 拒绝浏览器接管手势 */
#stage {
  display: block;
  touch-action: none;
  background: var(--ink);
}

/* DOM UI 层：默认透传指针事件，只有面板自身（.panel）才接收事件 */
#ui-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

#ui-layer .panel {
  pointer-events: auto;
  overflow-y: auto;                  /* 面板内部是唯一允许滚动的区域 */
  -webkit-overflow-scrolling: touch;
}

/* 安全区探针：不占位、不可见、不接收事件 */
#safe-probe {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}

.noscript {
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  color: var(--gold);
  font-size: 16px;
}

/* ------------------------------------------------------------------ 结算面板（T4）
 * 用 DOM 实现（SPEC §4 把面板划给 ui.js）：半透明遮罩 + 居中卡片，可滚动，触控友好。 */
/* 【重要】结算面板**不共用** .result-panel 之外的通用面板类（尤其不要挂 .panel）：
 * T6 加的 `.panel { background: linear-gradient(…); border; border-radius; overflow: hidden }`
 * 写在样式表末尾，同优先级下会盖掉这里的半透明遮罩，把结算页变成"金边圆角卡片"
 * （游戏画面被整块遮住、四角被圆角切开）。这条教训记在 CHANGELOG 的当日热修里。 */
.result-panel {
  display: none;              /* 显隐由 ui.js 用内联 display 控制，这里只给初始态 */
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;   /* 用 margin:auto 居中，见下：避免"居中 + 溢出"把顶部裁掉 */
  gap: 10px;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 18px calc(24px + env(safe-area-inset-bottom, 0px));
  background: rgba(6, 5, 4, 0.86);   /* 半透明压暗：结算时仍能看见身后的战场 */
  color: var(--gold);
  text-align: center;
  pointer-events: auto;
  overflow-y: auto;                 /* 内容比屏幕高时可滚动（矮屏/刘海机） */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 居中的正确写法：把"居中"交给首尾子元素的 auto 外边距。
 * 若用 justify-content:center，内容一旦超过容器高度，顶部会被裁掉且**滚不回来**（flex 溢出经典坑）。
 * 选择器要带上元素名（h2 / .rp-buttons）把优先级抬到 (0,2,1)——否则会被下面 `.result-panel .rp-title{margin:0}`
 * 这类同优先级的后置规则盖掉，结果内容贴顶。 */
.result-panel > h2:first-child { margin-top: auto; }
.result-panel > .rp-buttons:last-child { margin-bottom: auto; }

.result-panel .rp-title {
  font-size: 40px;
  margin: 0;
  letter-spacing: 4px;
}
.result-panel .rp-title.rp-win { color: #e8c877; }
.result-panel .rp-title.rp-lose { color: #d8453c; }

.result-panel .rp-sub {
  margin: 0;
  font-size: 16px;
  color: #8a8375;
  letter-spacing: 1px;
}

.result-panel .rp-stats {
  list-style: none;
  margin: 6px 0;
  padding: 0;
  width: min(320px, 88vw);
  border-top: 1px solid rgba(201, 162, 74, 0.3);
  border-bottom: 1px solid rgba(201, 162, 74, 0.3);
}
.result-panel .rp-stats li {
  display: flex;
  justify-content: space-between;
  padding: 8px 2px;
  font-size: 16px;
  color: #e8e2d4;
}
.result-panel .rp-stats li + li { border-top: 1px solid rgba(201, 162, 74, 0.14); }
.result-panel .rp-stats li b { color: #e8c877; }

.result-panel .rp-reward { margin: 4px 0 0; font-size: 20px; color: #e8c877; letter-spacing: 2px; }
.result-panel .rp-advice { margin: 0; font-size: 14px; color: #8a8375; max-width: 88vw; line-height: 1.6; }

.result-panel .rp-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}
.result-panel .rp-btn {
  min-width: 132px;
  padding: 14px 22px;
  font-size: 18px;
  font-family: inherit;
  color: #e8e2d4;
  background: #b4302a;
  border: 2px solid #e8c877;
  border-radius: 10px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.result-panel .rp-btn:active { transform: scale(0.97); background: #d8453c; }

/* 载入占位（见 index.html 里的 #boot-hint）：脚本未加载完时先给玩家一个可见反馈 */
#boot-hint {
  position: fixed;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font: 500 22px/1.6 "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  color: #c9a24a;
  letter-spacing: 4px;
  pointer-events: none;   /* 不吃指针事件，避免影响后续操作 */
  z-index: 5;
}

/* ============================================================================
   T6：通用 DOM 面板（js/ui_panel.js 的 .panel-mask / .panel / .p-* 系列）
   设计约束来自 T6 DoD①：390×844 下可完整触控、内容可滚动、不遮不挡。
   `.panel` 基类（见上，pointer-events:auto + overflow-y:auto）是旧结算面板与
   新面板共用的部分；下面是新面板的骨架与控件。
   ============================================================================ */

.panel-mask {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 安全区：刘海与底部横条都不压内容 */
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 12px calc(env(safe-area-inset-bottom, 0px) + 14px);
  background: rgba(6, 5, 4, 0.84);
  pointer-events: auto;
}

.panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: 100%;               /* 兜住 390×844：面板不超出遮罩的可用高度 */
  min-height: 0;                  /* flex 子项要能收缩，内容区才会出现滚动条 */
  background: linear-gradient(180deg, #241f1a 0%, #1b1714 100%);
  border: 2px solid rgba(201, 162, 74, 0.75);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
  overflow: hidden;               /* 圆角裁剪；滚动交给 .panel-body */
  color: #e8e2d4;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(201, 162, 74, 0.35);
  flex: 0 0 auto;
}
.panel-title { font-size: 19px; font-weight: bold; color: #c9a24a; letter-spacing: 1px; }
.panel-sub   { flex: 1; text-align: right; font-size: 13px; color: #8a8375; }
.panel-close {
  width: 40px; height: 40px;
  font-size: 17px; font-family: inherit; color: #e8e2d4;
  background: #33291f; border: 1px solid rgba(201, 162, 74, 0.5); border-radius: 10px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.panel-close:active { background: #4a3a2a; }

/* 页签（图鉴/经文树用）：横向一排，可换行 */
.panel-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 12px 0;
  flex: 0 0 auto;
}

.panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* 面板滚到底不带着页面一起滚 */
  padding: 10px 12px 14px;
}

.panel-foot {
  display: none;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
  border-top: 1px solid rgba(201, 162, 74, 0.28);
}
.p-hint { flex: 1 1 100%; font-size: 13px; color: #8a8375; }
.p-hint.ok  { color: #7fe08a; }
.p-hint.bad { color: #ff6b5e; }

/* 通用按钮：触控高度 ≥ 44px */
.p-btn {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 16px;
  font-family: inherit;
  color: #e8e2d4;
  background: #33291f;
  border: 2px solid rgba(201, 162, 74, 0.55);
  border-radius: 10px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.p-btn:active { transform: scale(0.97); background: #4a3a2a; }
.p-btn.on    { background: #b4302a; border-color: #e8c877; }
.p-btn.lock  { color: #6d675c; background: #241f1a; border-color: rgba(201, 162, 74, 0.22); }
.p-btn.wide  { flex: 1 1 100%; }

/* 列表行：左标签 + 右值 */
.p-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px;
  padding: 6px 2px;
  border-bottom: 1px dashed rgba(201, 162, 74, 0.18);
}
.p-row-l { flex: 1; font-size: 15px; }
.p-row-r { font-size: 14px; color: #c9a24a; white-space: nowrap; }

/* 卡片（法宝匣的武器、图鉴的条目） */
.p-card {
  padding: 10px 12px;
  margin: 8px 0;
  background: rgba(201, 162, 74, 0.06);
  border: 1px solid rgba(201, 162, 74, 0.3);
  border-radius: 10px;
}
.p-card .p-card-t { font-size: 16px; color: #e8c877; }
.p-card .p-card-d { font-size: 13px; color: #b9b1a1; margin-top: 4px; line-height: 1.5; }
.p-card.silhouette .p-card-t { color: #6d675c; }
.p-card.silhouette .p-card-d { color: #4f4a41; }

.p-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 11px;
  border-radius: 8px;
  background: rgba(201, 162, 74, 0.18);
  color: #c9a24a;
  vertical-align: 2px;
}
.p-tag.ok  { background: rgba(127, 224, 138, 0.18); color: #7fe08a; }
.p-tag.bad { background: rgba(255, 107, 94, 0.18);  color: #ff6b5e; }
.p-tag.gold { background: rgba(232, 200, 119, 0.2); color: #e8c877; }

.p-section { font-size: 14px; color: #c9a24a; margin: 12px 0 4px; }
.p-note { font-size: 12px; color: #8a8375; line-height: 1.6; margin: 6px 0; }

/* 经文树的一格（3 系 × 5 级） */
.p-chain { margin: 10px 0 4px; }
.p-chain-h { display: flex; align-items: baseline; gap: 8px; font-size: 15px; }
.p-chain-h b { color: #e8c877; }
.p-chain-h span { font-size: 12px; color: #8a8375; }
.p-steps { display: flex; gap: 8px; margin-top: 8px; }
.p-step {
  flex: 1;
  min-height: 44px;
  padding: 6px 4px;
  font-size: 12px;
  font-family: inherit;
  color: #b9b1a1;
  background: #241f1a;
  border: 1px solid rgba(201, 162, 74, 0.28);
  border-radius: 8px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.p-step.on    { color: #0d0b0a; background: #c9a24a; border-color: #e8c877; font-weight: bold; }
.p-step.next  { border-color: #e8c877; color: #e8c877; }
.p-step.lock  { color: #59544b; }