/* 第二幕 · 占卜屏（文档 3.2）——全游戏最重要的一屏。
   左边对话流，右边"水晶球"实时预览 + 词条翻卡。 */

.divination-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 288px;
  gap: 16px;
  align-items: start;
}

.divination-talk,
.divination-orb {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* ---- 水晶球：一个跑着迷你 World 的小画布 ---- */
.orb-frame {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid #22344f;
  background: var(--deep);
  line-height: 0;
}

.preview-canvas {
  width: 100%;
  display: block;
  /* 比例交给画布自己的 width/height（见 previewTank.js 的 W/H）。
     **不要再设 max-height + object-fit: cover**——那会把画面裁掉一块，
     而鱼恰恰常在被裁掉的上下两条里。 */
  height: auto;
}

.orb-frame .preview-warning {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 5px 8px;
  background: rgba(10, 20, 32, 0.9);
  font-size: 11px;
  line-height: 1.4;
}

/* 预览环境切换已移除（2026-08-19）。
   它要回答的是"这条鱼在今日规则下会怎样"，但那件事在投放之后一局就知道了，
   而这一屏的职责只有一个：**让玩家看见自己说的话变成了什么行为**。
   多一个开关只是把注意力从鱼身上引开。预览固定跑标准水域。 */

/* ---- 轮数进度珠 ----
   把 3~5 轮的硬约束做成仪式感，而不是一个禁用态的按钮。
   前三颗是"必须"（粉边），后两颗是"可选"。 */
.turn-beads-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.turn-beads {
  display: flex;
  gap: 5px;
}

.bead {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid #2c4468;
  background: transparent;
  transition: background 0.4s ease-out, box-shadow 0.4s ease-out;
}

.bead.required {
  border-color: var(--accent);
}

.bead.filled {
  background: var(--glow);
  border-color: var(--glow);
  box-shadow: 0 0 6px rgba(126, 232, 224, 0.6);
}

.bead.required.filled {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  box-shadow: 0 0 6px rgba(255, 138, 212, 0.6);
}

.turn-hint {
  font-size: 11px;
  color: var(--ink-faint);
}

/* ---- 词条翻卡 ----
   未定型时是水雾问号，翻译出词条后翻转揭示；数值说明在卡片背面。 */
.affix-cards {
  display: flex;
  gap: 6px;
}

.affix-card {
  flex: 1;
  min-width: 0;
  height: 78px;
  perspective: 600px;
}

.ac-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.affix-card.flipped .ac-inner,
.affix-card.revealed:hover .ac-inner {
  transform: rotateY(180deg);
}

.ac-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--r-sm);
  border: 1px solid #22344f;
  /* 卡面给一点纵向渐变和内高光——翻卡是这一屏的仪式，
     一张纯平色的方块撑不起"揭示"这个动作。 */
  background: linear-gradient(160deg, #16243a, #0d1828);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--sp-1);
  text-align: center;
  overflow: hidden;
}

.ac-back {
  transform: rotateY(180deg);
}

.ac-icon { font-size: 15px; opacity: 0.75; }
.ac-part { font-size: 10px; color: var(--ink-faint); }
.ac-name { font-size: 12px; font-weight: 600; color: var(--ink); }
.ac-unknown { font-size: 17px; color: #2c4468; }
.ac-desc { font-size: 10.5px; color: #a9bcd6; line-height: 1.35; }
.ac-effect { font-size: 9.5px; color: var(--glow); line-height: 1.3; }

/* 未定型：水雾。斜纹之外再叠一层**缓慢流动的雾**——
   "还没定下来"是一个进行中的状态，静止的斜纹表达不了它。 */
.ac-misty {
  background:
    linear-gradient(115deg, transparent 30%, rgba(126, 232, 224, 0.06) 50%, transparent 70%),
    repeating-linear-gradient(135deg, #0c1626, #0c1626 5px, #0e1a2e 5px, #0e1a2e 10px);
  background-size: 240% 100%, auto;
  animation: mist-drift 5s ease-in-out infinite;
}
@keyframes mist-drift {
  0%, 100% { background-position: 120% 0, 0 0; }
  50% { background-position: -20% 0, 0 0; }
}

/* 揭示的那一下：翻转 + 一圈按档位着色的光晕。
   这是玩家等了三句话才等到的时刻，值得一个明确的"到了"。 */
.affix-card.revealed .ac-front {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 14px var(--ac-glow, transparent);
}
.affix-card.positive { --ac-glow: rgba(127, 224, 163, 0.22); }
.affix-card.tradeoff { --ac-glow: rgba(201, 167, 240, 0.22); }
.affix-card.negative { --ac-glow: rgba(240, 160, 160, 0.22); }

/* 可以翻看背面的卡片给一个手势提示——不给的话没人知道能翻。 */
.affix-card.revealed { cursor: pointer; }
.affix-card.revealed .ac-front::after {
  content: '↻';
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: 9px;
  color: var(--ink-faint);
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .ac-misty { animation: none; }
  .ac-inner { transition: none; }
}

.affix-card.positive .ac-front { border-color: #3a8f5a; }
.affix-card.positive .ac-name { color: var(--good); }
.affix-card.negative .ac-front { border-color: #a04848; }
.affix-card.negative .ac-name { color: var(--bad); }
/* 有得有失：紫 */
.affix-card.tradeoff .ac-front { border-color: #6b4fa0; }
.affix-card.tradeoff .ac-name { color: #c9a7f0; }

@keyframes reveal-pop {
  0% { transform: rotateY(180deg) scale(0.9); opacity: 0.3; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}

.affix-card.just-revealed .ac-inner {
  animation: reveal-pop 0.65s cubic-bezier(0.2, 0.8, 0.25, 1);
}

/* 套装成型是这一屏最大的演出：三卡一起发光 */
@keyframes bond-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 184, 75, 0); }
  50% { box-shadow: 0 0 14px 2px rgba(232, 184, 75, 0.55); }
}

.affix-cards.bonded {
  animation: bond-glow 2.2s ease-in-out infinite;
  border-radius: var(--r-md);
}

.affix-cards.bonded .ac-front {
  border-color: var(--other);
}

/* 变奏 / 血统：顶部固定一条上下文摘要（底子是哪条鱼、传下哪枚印记） */
.lineage-banner {
  padding: 7px 11px;
  margin-bottom: 8px;
  background: rgba(155, 111, 214, 0.13);
  border-left: 3px solid #9b6fd6;
  border-radius: var(--r-sm);
  font-size: 12px;
  color: #d5c2f0;
  line-height: 1.5;
}

.ghost-btn {
  background: transparent;
  border-color: #2c4468;
  color: var(--ink-dim);
}

.ghost-btn:hover {
  background: #16233a;
  color: var(--ink);
}

/* ---- 开场：先选这次要怎么造 ---- */
.divination-start { display: grid; gap: 12px; }

.start-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.start-option {
  display: grid;
  gap: 4px;
  padding: 14px 14px 12px;
  text-align: left;
  border-radius: var(--r-md);
  border: 1px solid #22344f;
  background: #0d1a29;
  cursor: pointer;
}
.start-option:hover {
  border-color: #4a6fa0;
  background: #12233a;
}
.so-icon { font-size: 20px; }
.so-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.so-desc { font-size: 11.5px; color: var(--ink-dim); line-height: 1.45; }
.so-cost { font-size: 11px; color: var(--other); }

/* ---- 选鱼 ---- */
.start-picker {
  border-top: 1px solid #1c2c44;
  padding-top: 10px;
  display: grid;
  gap: 8px;
}
.picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink);
}
.picker-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.picker-row {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  text-align: left;
  border-radius: var(--r-sm);
  border: 1px solid #1f3350;
  background: #0c1626;
  cursor: pointer;
  min-width: 0;
}
.picker-row:hover:not(:disabled) { border-color: #4a6fa0; background: #12233a; }
/* 不合格的也列出来但禁用——只显示合格的话，玩家会以为自己那条鱼消失了。 */
.picker-row.blocked { opacity: 0.45; cursor: not-allowed; }
.pk-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pk-career { font-size: 10.5px; color: var(--ink-dim); font-family: "SFMono-Regular", Consolas, monospace; }
.pk-mark { font-size: 10.5px; color: #c79bd8; }
.pk-why { font-size: 10.5px; color: #b07a7a; }

/* ---- 当前方式 + 回头路 ----
   进对话之后三个入口是隐藏的，这条就是唯一的出口。它同时回答两个问题：
   我在哪条路上、怎么换。 */
.divination-mode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  margin-bottom: 10px;
  border-radius: var(--r-sm);
  background: #0d1a29;
  border: 1px solid #1c2c44;
}

.mode-label {
  font-size: 12px;
  font-weight: 600;
  color: #a9bcd6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.divination-mode .ghost-btn {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 3px 10px;
}

/* 买不起的入口：禁用 + 变灰，价格那行改成"还差多少"。
   在点之前就说清楚，而不是等他选完模式挑完鱼才拒绝。 */
.start-option:disabled { cursor: not-allowed; }
.start-option.unaffordable { opacity: 0.45; }
.start-option.unaffordable:hover { border-color: #22344f; background: #0d1a29; }
.start-option.unaffordable .so-cost { color: #d98a8a; }

/* 鱼谱满员（3 条）：新添鱼的两条路灰掉，变奏留着——它是顶替，不新增。
   和"买不起"用同一套视觉，因为对玩家来说是同一件事：这条路现在走不通，
   原因写在卡片上。 */
.start-option.locked { opacity: 0.45; }
.start-option.locked:hover { border-color: #22344f; background: #0d1a29; }
.start-option.locked .so-cost { color: #d98a8a; }

.start-full-note {
  padding: 8px 11px;
  border-radius: var(--r-sm);
  border-left: 3px solid #d98a8a;
  background: rgba(217, 138, 138, 0.1);
  font-size: 12px;
  line-height: 1.5;
  color: #e7c9c9;
}

/* 变奏的那句"这一条会顶替谁"。它是这一步最容易被略过、代价又最大的一条信息，
   所以给它一条竖线拎出来——和买不起那种"警告"不同，这里是中性的说明。 */
.prep-replace {
  border-left: 3px solid #4a6fa0;
  background: rgba(74, 111, 160, 0.12);
  padding: 7px 10px;
  border-radius: var(--r-sm);
}

/* ---- "占卜师正在想" ----
   三个点依次起落。它存在的理由很实际：变奏/血统要等一次 LLM 往返，
   没有这个的话玩家不知道自己点没点上。 */
.chat-bubble.thinking {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
}

.chat-bubble.thinking .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c79bd8;
  animation: think-bounce 1.1s infinite ease-in-out;
}
.chat-bubble.thinking .dot:nth-child(2) { animation-delay: 0.15s; }
.chat-bubble.thinking .dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes think-bounce {
  0%, 70%, 100% { transform: translateY(0); opacity: 0.45; }
  35% { transform: translateY(-5px); opacity: 1; }
}

/* 尊重"减少动态效果"的系统偏好：改成静态的深浅交替。 */
@media (prefers-reduced-motion: reduce) {
  .chat-bubble.thinking .dot { animation: none; opacity: 0.6; }
}

/* ---- 准备区：三种方式各有一步不同的准备 ---- */
.divination-prep { display: grid; gap: 10px; }
.prep-title { margin: 0 0 4px; font-size: 15px; color: var(--ink); }
.prep-body { display: grid; gap: 8px; }

.prep-locks { display: grid; gap: 6px; }

.prep-actions { display: flex; gap: 8px; }
.prep-actions .primary-btn { flex: 1; }
.prep-actions .ghost-btn { flex: 0 0 auto; }

/* 先祖的生涯：一行数字，玩家掏钱之前先看它。 */
.prep-career {
  padding: 8px 11px;
  border-radius: var(--r-sm);
  background: #0c1626;
  font-size: 11.5px;
  color: #a9bcd6;
  font-family: "SFMono-Regular", Consolas, monospace;
}

/* 血脉印记预览。这是"血统"和"占卜"的区别所在，给它足够的分量——
   玩家花 100 珍珠买的就是这一块。 */
.prep-mark {
  padding: 11px 13px;
  border-radius: var(--r-md);
  background: rgba(199, 155, 216, 0.09);
  border: 1px solid rgba(199, 155, 216, 0.32);
  display: grid;
  gap: 3px;
}
.prep-mark.empty {
  background: rgba(255, 255, 255, 0.03);
  border-color: #22344f;
  color: var(--ink-dim);
  font-size: 12px;
}
.pm-head { display: flex; align-items: baseline; gap: 7px; }
.pm-icon { font-size: 17px; }
.pm-name { font-size: 14px; font-weight: 700; color: #c79bd8; }
.pm-from { font-size: 11.5px; color: #a9bcd6; }
.pm-desc { font-size: 11.5px; color: var(--ink); }
.pm-locked { margin-top: 3px; font-size: 11px; color: var(--other); }

/* 等待回复时输入区整体压暗——"现在不能说话"要看得出来。 */
.chat-input-row input:disabled,
.chat-input-row button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- 三维预览：条形 ----
   这是这一屏的核心承诺——"你说的话变成了什么行为"。一行数字读不出
   哪个高哪个低，更读不出"我刚说的那句把哪一条推上去了"。
   条形之后，每说一句都能**看见某一条在动**。 */
.stat-preview {
  display: grid;
  gap: 5px;
  font-size: var(--fs-sm);
}

.sp-row {
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  align-items: center;
  gap: var(--sp-2);
}

.sp-label { color: var(--ink-dim); font-size: var(--fs-xs); }

.sp-track {
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.sp-fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  /* 值变化时滑过去而不是跳过去——"某一条在动"正是要看的东西，
     跳变的话玩家会错过是哪一条变了。 */
  transition: width var(--t-slow) var(--ease-swim);
}
.sp-fill.forage { background: var(--stat-forage); box-shadow: 0 0 6px color-mix(in srgb, var(--stat-forage) 55%, transparent); }
.sp-fill.fear   { background: var(--stat-fear); box-shadow: 0 0 6px color-mix(in srgb, var(--stat-fear) 55%, transparent); }
.sp-fill.hunt   { background: var(--stat-hunt); box-shadow: 0 0 6px color-mix(in srgb, var(--stat-hunt) 55%, transparent); }

.sp-val {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: var(--fs-xs);
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 空态：三条空槽而不是三个破折号——空槽让玩家看得出"这里将来会有三条值"。 */
.sp-row.empty .sp-val { color: var(--ink-faint); }

/* ---- 水晶球：给它一点玻璃 ----
   一个方框里跑着的迷你鱼缸，加一圈内阴影和上缘高光之后就成了"球面"。
   这一屏叫"水晶球"，它就该看起来像个球。 */
.orb-frame {
  position: relative;
  box-shadow:
    inset 0 0 22px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.orb-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* 左上一抹高光 + 四角压暗，模拟球面的反射和边缘衰减 */
  background:
    radial-gradient(ellipse at 26% 16%, rgba(255, 255, 255, 0.09), transparent 42%),
    radial-gradient(ellipse at center, transparent 52%, rgba(4, 10, 18, 0.5) 100%);
}

/* ---- 例句 chip ----
   新玩家不知道该说什么。这四个 chip 是这一屏的破冰器，值得比一排灰按钮更像
   "可以试试"——所以给它们一点占卜的紫，和占卜师气泡同色系。 */
.example-chip {
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  background: rgba(160, 111, 208, 0.08);
  border: 1px solid rgba(160, 111, 208, 0.26);
  color: #c9b3e0;
  transition:
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
}
.example-chip:hover {
  background: rgba(160, 111, 208, 0.18);
  border-color: rgba(160, 111, 208, 0.55);
  color: #e8d9ff;
  transform: translateY(-1px);
}

.example-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-2); }