/* 山海同耕 —— 竖屏 375×667 设计稿；桌面端手机框水平居中；系统字体栈；正文 ≥16px；点击区 ≥44px */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #2b241d;
  background: #1a1512;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center; /* 手机框水平居中 */
}

/* 手机框：竖屏 375×667，小屏时自适应不溢出 */
#app {
  position: relative;
  width: min(375px, 100vw);
  height: min(667px, 100vh);
  overflow: hidden;
  background: #f5efe4;
}

/* 视图切换：默认全隐藏，.active 显示（由引擎/UI 后续任务切换） */
#app section { display: none; height: 100%; }
#app section.active { display: block; }

/* 数据屏/报废屏为 #view-game 内覆盖层（包含块：#view-game 需 position:relative） */
#view-game { position: relative; }
#view-game > section {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: #f5efe4;
}

/* 桌面端按视口高度等比缩放：矮窗口下 667pt 内容不溢出（PRD §8）。
   CSS 无法把视口高度换算成无单位缩放比，由 js/ui.js 的 fitFrame() 在
   resize 时写 transform: scale()；此处只保证 #app 可被 transform 缩放。 */
#app { transform-origin: center center; }

/* —— Task 4 追加：HUD / 场景 / 对白 / 选项 / 打字机 / 叠化 / 横屏提示 —— */

/* 注意：须用 #app 前缀压过 Task 1 的 `#app section.active{display:block}`（特异性 1,1,1 > 1,1,0），
   否则游戏视图退化为 block 布局，#stage 的 flex:1 失效、高度塌成 0 */
#app #view-game {
  display: none;
  flex-direction: column;
  background: #2b241d;
}
#app #view-game.active { display: flex; }

/* HUD：时间/进度/同耕度 + 三条资源条 */
#hud {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 8px 10px;
  font-size: 12px;
  color: #f0e6d2;
  background: rgba(20, 15, 11, 0.92);
  z-index: 5;
}
#hud .hud-res { display: flex; gap: 10px; width: 100%; }
.res-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 18px;
}
.res-chip b { font-weight: 600; }
.res-bar {
  display: inline-block;
  width: 42px;
  height: 6px;
  border-radius: 3px;
  background: rgba(240, 230, 210, 0.25);
  overflow: hidden;
}
.res-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: #d9a441;
  border-radius: 3px;
  transition: width 0.25s ease;
}

/* Task 11：静音按钮常驻（游戏页 HUD 右上角 + 复审轮 1 补的首页常驻）——同一视觉式样：
   44px 点击区，半透明深底同 .ai-badge；aria-pressed=true 时转暖红高亮（静音态可见）。
   #btn-mute 为 index.html 静态 HUD 按钮；.mute-btn 为 renderHome 动态建的首页按钮 */
#btn-mute, .mute-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(240, 230, 210, 0.35);
  border-radius: 6px;
}
#btn-mute { margin-left: auto; }   /* HUD 行布局：推到行尾 */
#btn-mute[aria-pressed="true"], .mute-btn[aria-pressed="true"] { color: #f0e6d2; background: rgba(164, 68, 46, 0.72); }

/* 场景层：bg + 立绘 + AI 角标 */
#stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.scene-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scene-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scene-char {
  position: absolute;
  right: 4%;
  bottom: 0;
  width: 44%;
  height: 62%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px 8px 0 0;
}
.scene-char img { width: 100%; height: 100%; object-fit: contain; display: block; }
.asset-tag {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.05em;
  pointer-events: none;
}
.ai-badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 4;
  font-size: 10px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

/* 对白层 */
#dialogue {
  flex: none;
  min-height: 168px;
  padding: 12px 12px 14px;
  background: linear-gradient(180deg, rgba(28, 22, 16, 0.94), rgba(20, 15, 11, 0.98));
  color: #f5efe4;
  z-index: 5;
}
.dlg-name {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #f0d9a8;
  margin-bottom: 6px;
}
.dlg-text {
  font-size: 16px;
  line-height: 1.6;
  min-height: 52px;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: pointer;
}
.dlg-text::after {
  content: '▍';
  color: #d9a441;
  animation: blink 0.9s steps(1) infinite;
}
.dlg-text.done::after { content: none; }
@keyframes blink { 50% { opacity: 0; } }
.dlg-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* 选项按钮：点击区 ≥44px；cost 徽标 */
.choice-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  font-size: 16px;
  text-align: left;
  color: #2b241d;
  background: #f0e6d2;
  border: 1px solid rgba(43, 36, 29, 0.25);
  border-radius: 8px;
}
.choice-btn:active { background: #e2d4b8; }
.cost-badge {
  flex: none;
  font-size: 12px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
  color: #fff;
  background: #a4442e;
}

/* clue/fact/letter 通用文本 + 继续按钮（Task 6 扩展） */
.dlg-plain { display: flex; flex-direction: column; gap: 10px; }
.next-btn {
  align-self: flex-end;
  min-height: 44px;
  padding: 8px 20px;
  font-size: 16px;
  color: #f5efe4;
  background: #7a5c2e;
  border: none;
  border-radius: 8px;
}
.next-btn:active { background: #8f6c38; }

/* 场景切换叠化 0.35s；淡出期间禁交互，避免连点重复推进 */
#view-game.scene-fade #stage, #view-game.scene-fade #dialogue {
  animation: scene-fade 0.35s ease both;
  pointer-events: none;
}
@keyframes scene-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* 覆盖层（Task 5 答错屏/报废屏内容）；#app 前缀压过 `#app section.active{display:block}` */
#app #view-fact.active, #app #view-bust.active {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 24px;
}

/* 横屏提示（PRD §8：不做横屏布局） */
#view-rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  color: #f5efe4;
  background: #1a1512;
  padding: 24px;
}
@media (orientation: landscape) and (max-height: 420px) {
  #view-rotate { display: flex; }
}

/* 选项/按钮点击区 ≥44px（PRD §8） */
button {
  min-width: 44px;
  min-height: 44px;
  font: inherit;
  cursor: pointer;
}

/* —— Task 4B 追加：氛围层（暗角/颗粒/暖光/视差）＋ 反馈特效 ＋ 叙述衬线 ——
   氛围层一律 pointer-events:none，不拦截对白区与按钮点击；均为 fixed 全屏且挂在
   #app 之外，不受 js/ui.js fitFrame 桌面缩放 transform 影响（含块一致性）。
   z-index 50：高于 #app 内容（最高为 view-fact/view-bust 覆盖层的 10），
   低于横屏提示 #view-rotate（99），横屏提示仍可正常盖住氛围层。 */

.vignette {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(20, 12, 6, 0.45) 100%);
}
.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
.warmlight {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 214, 150, 0.14), transparent 40%);
}

/* 场景图视差：叠化时位移/放大，0.35s ease-out 与 .scene-fade 同步
   （T5/T8 给场景图元素挂 .parallax-bg 类即生效） */
.parallax-bg { transition: transform 0.35s ease-out; }
#view-game.scene-fade .parallax-bg { transform: translateY(-6px) scale(1.02); }

/* 反馈特效触发类：js/fx.js 只切 class/清定时器，动画规则全部收在这里 */
#view-game.fx-shake { animation: fx-shake 0.3s ease-in-out; }
.fx-bump { display: inline-block; animation: fx-bump 0.25s ease-out; }
#view-game.fx-drain { animation: fx-drain 0.4s ease-out; }
@keyframes fx-shake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-4px); }
  50%  { transform: translateX(4px); }
  75%  { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}
@keyframes fx-bump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes fx-drain {
  0%   { filter: grayscale(0); }
  50%  { filter: grayscale(0.9); }
  100% { filter: grayscale(0); }
}

/* 叙述文本衬线：全系统字体栈，不引外部字体（T6 叙述节点挂此类） */
.serif-narr {
  font-family: "Songti SC", "STSong", SimSun, "Noto Serif CJK SC", serif;
}

/* —— Task 5 追加：配对关双槽 / 选项分组 / 提交按钮 / 覆盖层文案 / cost 徽标高亮 —— */
.pair-wrap { display: flex; flex-direction: column; gap: 10px; }
.pair-hint {
  padding: 8px 10px;
  border-left: 3px solid #d9a441;
  background: rgba(217, 164, 65, 0.14);
  border-radius: 0 8px 8px 0;
}
.pair-hint .dlg-text { min-height: 0; }
.pair-slots { display: flex; flex-direction: column; gap: 8px; }
.pair-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px dashed rgba(43, 36, 29, 0.45);
  border-radius: 8px;
  background: rgba(240, 230, 210, 0.55);
}
.pair-slot.filled { border-style: solid; background: #f0e6d2; }
.pair-slot-label { font-size: 13px; color: #6b5b45; }
.pair-slot-value { font-size: 16px; color: #2b241d; }
.pair-slot-value:empty::before { content: "？"; color: #a4442e; }
.pair-options { display: flex; flex-direction: column; gap: 10px; }
.pair-opt-head { font-size: 12px; color: #6b5b45; margin-bottom: 4px; }
.pair-submit { display: flex; align-items: center; gap: 8px; }
.pair-submit:disabled { background: #b8ad97; color: #f5efe4; }
/* cost 徽标高亮：提交按钮上的 attemptCost 提示 */
.pair-submit .cost-badge { background: #a4442e; box-shadow: 0 0 0 2px rgba(164, 68, 46, 0.25); }
.layer-text { font-size: 16px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.layer-source { font-size: 12px; color: #8a8578; }

/* —— Task 6 追加：线索卡 / 家书 / 数据屏 / 首页 / 问问当年占位 —— */

/* 三种叙述节点共用：正文 ≥16px、衬线（.serif-narr）、预格式换行 */
.clue-text, .letter-text, .fact-text {
  font-size: 16px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 线索卡：虚线金框"小本子"感，标题用暖金 */
.clue-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px dashed rgba(217, 164, 65, 0.65);
  border-radius: 8px;
  background: rgba(217, 164, 65, 0.08);
}
.clue-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #f0d9a8;
}
.clue-title::before { content: '线索 · '; color: #d9a441; }
/* 线索卡配图（I2 修复）：正式图就位后 renderClue 经 assetUrl(n.bg) 渲染；
   无正式图时 ui 不插该元素，布局维持原文本卡不变 */
.clue-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
  border-radius: 6px;
}

/* 家书：暖纸底 + 深字，h3 标题（js/ui.js renderLetter 建 h3.letter-title） */
.letter-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px;
  border-radius: 8px;
  background: #f0e6d2;
  color: #2b241d;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.letter-title {
  font-size: 18px;
  font-weight: 600;
  color: #7a5c2e;
  letter-spacing: 0.04em;
}
.letter-title::after { content: '（家书）'; font-size: 12px; font-weight: 400; color: #8a8578; }

/* 数据屏：左侧数据红线 + 右下来源行 */
.fact-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-left: 3px solid #a4442e;
  border-radius: 0 8px 8px 0;
  background: rgba(164, 68, 46, 0.1);
}
.fact-source { font-size: 12px; color: #c9bda6; }

/* 首页：#app 前缀压过 `#app section.active{display:block}`，改弹性列布局 */
#app #view-home {
  background: linear-gradient(180deg, #2b241d 0%, #1a1512 100%);
  color: #f5efe4;
}
#app #view-home.active { display: flex; flex-direction: column; }
.home-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 36px 20px 18px;
  overflow-y: auto;
}
.home-title { font-size: 24px; font-weight: 700; letter-spacing: 0.18em; color: #f0d9a8; }
.home-sub { font-size: 13px; color: #b9ad97; margin-top: -6px; }
/* 首页主视觉（I2 修复）：key_visual 正式图就位后 renderHome 经 assetUrl('key_visual') 渲染；
   无正式图时 ui 不插该元素，标题布局维持现状不破版。限高＋cover 防超高竖图把
   难度二选挤出可视区（.home-wrap 有 overflow-y:auto，极端比例下滚动可达） */
.home-key-visual {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: cover;
  border-radius: 8px;
}
.home-label { font-size: 13px; color: #b9ad97; }
.home-diff { display: flex; gap: 10px; }
.home-diff .home-btn { flex: 1; }
.home-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 16px;
  color: #2b241d;
  background: #f0e6d2;
  border: 1px solid rgba(43, 36, 29, 0.25);
  border-radius: 8px;
}
.home-btn:active { background: #e2d4b8; }
.home-btn.home-cont { background: #d9a441; font-weight: 600; }
.home-btn:disabled { background: #4a4038; color: #8a8578; border-color: transparent; }
.home-note { margin-top: auto; padding-top: 12px; font-size: 12px; line-height: 1.6; color: #8a8578; }
/* 首页 AI 角标跟随文档流排在声明下方（覆盖 .ai-badge 的 absolute 定位） */
#view-home .ai-badge { position: static; align-self: flex-end; }
/* 首页常驻静音按钮（复审轮 1）：.home-wrap 列布局里靠右（同 ai-badge 模式），
   不被 gap 撑成满宽——flex 列默认 stretch 会把 44px 小按钮拉满一行 */
#view-home .mute-btn { align-self: flex-end; }

/* 问问当年占位（Task 10 双轨问答接入前的最小页） */
#app #view-qa { background: #f5efe4; }
#app #view-qa.active { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.qa-title { font-size: 20px; font-weight: 600; color: #7a5c2e; }

/* —— Task 8 追加：纪念卡视图（canvas 1080×1440 等比缩窄进 375 宽视口） —— */
#app #view-card { background: #2b241d; }
#app #view-card.active {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 12px;
  overflow-y: auto;
}
.card-wrap { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
/* 保存图片＋复制数据并排一行（均在纪念卡下方） */
.card-actions { display: flex; gap: 12px; justify-content: center; }
.card-actions .next-btn { flex: 1; max-width: 160px; }
/* canvas 固定 1080×1440（3:4），CSS 缩到视口宽；高度自适应保持比例 */
.card-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.card-copy { align-self: center; }
.card-back { background: #4a4038; color: #f0e6d2; border-color: transparent; }
/* iOS 长按存图降级：Card.save 插入的 img + 提示（触屏可长按） */
.card-ios-img { display: block; width: 100%; height: auto; border-radius: 8px; }
.card-ios-tip { font-size: 13px; color: #b9ad97; text-align: center; }

/* —— Task 7 追加：自动演示角标（仅 body.demo 可见） —— */
.demo-badge {
  display: none;
  position: fixed; top: 10px; right: 10px; z-index: 99;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(43, 36, 29, 0.72); color: #f5efe4;
  font-size: 12px; letter-spacing: 1px;
}
body.demo .demo-badge { display: block; }

/* —— Task 10 追加：问问当年问答页 —— */
.qa-host { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }
.qa-note { font-size: 13px; color: #8a8578; text-align: center; letter-spacing: 2px; }
.qa-tip { font-size: 13px; color: #a4442e; background: rgba(164,68,46,.1); border-radius: 8px; padding: 6px 10px; }
.qa-form { display: flex; gap: 8px; }
.qa-input { flex: 1; min-width: 0; font-size: 16px; padding: 10px 12px; border: 1px solid rgba(43,36,29,.35); border-radius: 8px; background: #f5efe4; }
.qa-out { min-height: 60px; background: rgba(240,230,210,.55); border-left: 3px solid #d9a441; border-radius: 0 8px 8px 0; padding: 10px 12px; }
.qa-answer { font-size: 16px; line-height: 1.6; color: #2b241d; }
.qa-source { font-size: 12px; color: #8a8578; margin-top: 6px; }
.qa-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.qa-chip { font-size: 13px; padding: 6px 10px; border: 1px solid rgba(43,36,29,.3); border-radius: 999px; background: transparent; color: #4a3b2c; min-height: 32px; }
.qa-frame { width: 100%; height: 60vh; border: none; border-radius: 8px; background: #f5efe4; }
.qa-fallback { display: block; margin: 8px auto 0; font-size: 13px; padding: 6px 14px; border: 1px solid rgba(43,36,29,.3); border-radius: 999px; background: transparent; color: #4a3b2c; min-height: 32px; }