/* 照见 · 牌桌场景层（2026-10-08 由 V6 原型移植）
   同一张临水书室的牌桌：落笔、洗牌、揭牌、读信都在这张桌上发生，按阶段换明暗。
   手机全屏；桌面为居中竖幅舞台，两侧是虚化的同一场景（不放大裁切原图）。 */

@font-face {
  font-family: "YouxinSerif";
  src: local("Source Han Serif SC"), local("Source Han Serif SC Regular"), local("Noto Serif CJK SC"),
    url("/assets/fonts/youxin-serif-core.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

body.scene-page {
  --scene-serif: "YouxinSerif", "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --scene-ink: #f1eee4;
  --scene-ink-2: #d9dccc;
  --scene-ink-3: #b3bdb4;
  --scene-ochre: #d9a47c;
  --scene-gold: #ddc49a;
  --scene-column: 520px;
  background: #08141b;
  min-height: 100dvh;
}

/* 场景页的母品牌标识在顶栏里，不再浮动显示 */
body.scene-page .aiyoumu-signature {
  display: none;
}

.scene-backdrop {
  display: none;
}

@media (min-width: 600px) {
  .scene-backdrop {
    display: block;
    position: fixed;
    inset: -40px;
    background: url("/assets/scene/shuzhai-card-table.webp") center / cover no-repeat;
    filter: blur(26px) brightness(0.4) saturate(0.85);
  }
}

.scene-world {
  position: fixed;
  inset: 0;
  max-width: var(--scene-column);
  margin: 0 auto;
  overflow: hidden;
  pointer-events: none;
  background: #0b1d27;
}

.scene-world img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.04);
  transition: transform 900ms var(--ease), object-position 900ms var(--ease);
}

.scene-shade {
  position: absolute;
  inset: 0;
  transition: opacity 600ms var(--ease);
}

/* 落笔：靠近窗边，压暗以承托输入 */
.world-write img {
  object-position: 61% 50%;
  transform: scale(1.16);
}
.world-write .scene-shade {
  background: linear-gradient(180deg, rgba(13, 29, 40, 0.5), rgba(14, 32, 43, 0.72) 45%, rgba(12, 29, 40, 0.94));
}

/* 牌桌：镜头落到桌面（书室画窗景偏高，放大并以底边为轴把牌垫抬进牌位区） */
.world-table img {
  transform: scale(1.22);
  transform-origin: 50% 100%;
}
.world-table .scene-shade {
  background: linear-gradient(180deg, rgba(8, 23, 34, 0.55), rgba(12, 30, 41, 0.4) 30%, rgba(12, 30, 41, 0.18) 52%, rgba(7, 20, 28, 0.55));
}

/* 读信：退成灯下暗面 */
.world-letter .scene-shade {
  background: linear-gradient(180deg, rgba(9, 25, 35, 0.6), rgba(16, 34, 44, 0.93) 22%, rgba(16, 34, 44, 0.97));
}

/* 首页：整间书室可见，底部压暗 */
.world-room .scene-shade {
  background: linear-gradient(180deg, rgba(8, 23, 34, 0.45), rgba(12, 30, 41, 0.25) 35%, rgba(10, 26, 36, 0.86) 70%, #0b1d27);
}

.scene-page .page {
  position: relative;
  z-index: 1;
  max-width: var(--scene-column);
  min-height: 100dvh;
  padding: 0 24px max(32px, env(safe-area-inset-bottom));
}

/* 顶栏 */
.scene-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: calc(52px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  margin: 0 -10px;
  color: var(--scene-ink-2);
  text-shadow: 0 1px 6px rgba(2, 12, 22, 0.8);
}
.scene-bar > :first-child { justify-self: start; }
.scene-bar > :last-child { justify-self: end; }
.scene-bar-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #e6dcc6;
  white-space: nowrap;
  word-break: keep-all;
}
.scene-bar-title img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
.scene-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  font: inherit;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: #e0d5bf;
  background: none;
  border: 0;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  word-break: keep-all;
}
.scene-tool:focus-visible,
.scene-cta:focus-visible,
.deck-card:focus-visible,
.slot-card:focus-visible {
  outline: 2px solid var(--scene-gold);
  outline-offset: 3px;
}

/* 场景标题组 */
.scene-kicker {
  display: block;
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: #d4bf98;
}
.scene-kicker::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 1px;
  margin-right: 11px;
  background: currentColor;
}
.scene-title {
  font-family: var(--scene-serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: #f0e8d6;
  margin-top: 14px;
  text-shadow: 0 2px 14px rgba(2, 12, 23, 0.7);
}
.scene-sub {
  margin-top: 8px;
  font-size: 14px;
  line-height: 2;
  color: var(--scene-ink-2);
  text-shadow: 0 1px 8px rgba(2, 12, 23, 0.8);
}
.scene-quote {
  margin-top: 16px;
  padding-left: 14px;
  border-left: 1px solid rgba(217, 164, 124, 0.55);
  font-size: 14px;
  line-height: 1.95;
  color: #e3dfd2;
  text-shadow: 0 1px 8px rgba(2, 12, 23, 0.8);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}

/* 主操作：贴近拇指区 */
.scene-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 0 20px;
  border: 1px solid rgba(217, 164, 124, 0.55);
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(201, 140, 100, 0.08), rgba(217, 164, 124, 0.2), rgba(201, 140, 100, 0.08));
  color: #f3dfc8;
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.2em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  word-break: keep-all;
  transition: background 180ms ease, transform 120ms ease;
}
.scene-cta:active { transform: scale(0.99); }
.scene-cta:disabled { opacity: 0.4; cursor: default; }
.scene-secondary {
  display: block;
  margin: 14px auto 0;
  min-height: 44px;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--scene-ink-3);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(179, 189, 180, 0.4);
  cursor: pointer;
}
.scene-fine {
  font-size: 12px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #a9b7b2;
}

/* ── 落笔 ── */
.write-field {
  margin-top: 26px;
}
.write-field label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #c9b58f;
  margin-bottom: 4px;
}
.write-field textarea {
  width: 100%;
  min-height: 9.5em;
  resize: vertical;
  padding: 12px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(211, 193, 162, 0.35);
  outline: none;
  color: var(--scene-ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.85;
  caret-color: var(--scene-ochre);
}
.write-field textarea:focus { border-color: var(--scene-ochre); }
.write-field textarea::placeholder { color: #93a19b; }

/* ── 牌桌 ── */
.table {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 52px - env(safe-area-inset-top, 0px));
}
.table-head { flex: none; }
.table-stage {
  flex: 1;
  position: relative;
  min-height: 230px;
}
.table-foot {
  flex: none;
  padding-top: 12px;
}

/* 牌（共用比例：原牌 992×1586） */
.card-back {
  background: #0d1319 url("/assets/cards/牌背_照见之镜.webp") center / cover no-repeat;
  border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(214, 192, 141, 0.18), 0 10px 22px -8px rgba(0, 0, 0, 0.75);
}

/* 准备：一叠牌静静放在牌垫中央 */
.deck-pile {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 118px;
  aspect-ratio: 992 / 1586;
  transform: translate(-50%, -50%) rotateX(18deg);
  transform-style: preserve-3d;
}
.deck-pile .card-back {
  position: absolute;
  inset: 0;
}
.deck-pile .card-back:nth-child(1) { transform: translate(3px, 4px); }
.deck-pile .card-back:nth-child(2) { transform: translate(1.5px, 2px); }
.deck-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #c9c3b0;
}

/* 洗牌：两叠分开、交错、归拢（纯 transform，可跳过，减少动效时直接完成） */
.shuffle {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 118px;
  aspect-ratio: 992 / 1586;
  transform: translate(-50%, -50%);
}
.shuffle .card-back {
  position: absolute;
  inset: 0;
  transition: transform 520ms var(--ease);
}
.shuffle.split .card-back.l { transform: translateX(calc(-58% - var(--i) * 1px)) rotate(-4deg); }
.shuffle.split .card-back.r { transform: translateX(calc(58% + var(--i) * 1px)) rotate(4deg); }
.shuffle.weave .card-back.l { transform: translateX(-22%) translateY(calc(var(--i) * -1.2px)) rotate(-2deg); }
.shuffle.weave .card-back.r { transform: translateX(22%) translateY(calc(var(--i) * -1.2px + 0.6px)) rotate(2deg); }
.shuffle.gather .card-back { transform: translateY(calc(var(--i) * -0.6px)); }
.shuffle-steps {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #8f9a93;
}
.shuffle-steps i {
  width: 22px;
  height: 1px;
  background: rgba(201, 195, 176, 0.3);
}
.shuffle-steps span.on { color: #ecdcbc; }

/* 三个牌位 */
.slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.slot2 {
  text-align: center;
}
.slot2-frame {
  position: relative;
  aspect-ratio: 992 / 1586;
  border: 1px dashed rgba(214, 192, 141, 0.28);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--scene-serif);
  font-size: 20px;
  color: rgba(236, 220, 188, 0.35);
  background: rgba(8, 20, 28, 0.35);
}
.slot2.is-next .slot2-frame {
  border: 1px solid rgba(221, 196, 154, 0.75);
  color: rgba(236, 220, 188, 0.7);
  box-shadow: 0 0 22px -6px rgba(221, 196, 154, 0.5);
}
.slot2-name {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: #c9c3b0;
}
.slot2-card {
  margin-top: 2px;
  min-height: 1.8em;
  font-family: var(--scene-serif);
  font-size: 14px;
  color: #f0e8d6;
}
.slot2-pos {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--scene-ochre);
  min-height: 1.6em;
}

/* 翻面的牌：落位后正面朝上 */
.slot-card {
  position: absolute;
  inset: -1px;
  padding: 0;
  border: 0;
  background: none;
  perspective: 900px;
  cursor: zoom-in;
}
.slot-card .flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 700ms var(--ease);
}
.slot-card.flipped .flip { transform: rotateY(180deg); }
.slot-card .side {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 7px;
  overflow: hidden;
}
.slot-card .front {
  transform: rotateY(180deg);
  background: #0d1319;
  box-shadow: 0 0 0 1px rgba(214, 192, 141, 0.25), 0 12px 24px -10px rgba(0, 0, 0, 0.8);
}
.slot-card .front img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.slot-card .front img.reversed { transform: rotate(180deg); }

/* 取牌途中的那张：从牌列提起，飞到牌位 */
.fly-card {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  transition: left 620ms var(--ease), top 620ms var(--ease), width 620ms var(--ease), height 620ms var(--ease), transform 620ms var(--ease);
}

/* 牌列：浅弧排开，横向滑动浏览，轻点揭开 */
.deck-rail {
  position: relative;
  margin: 0 -24px;
  padding: 26px 24px 18px;
  display: flex;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.deck-rail::-webkit-scrollbar { display: none; }
.deck-card {
  flex: none;
  width: 62px;
  aspect-ratio: 992 / 1586;
  margin-right: -26px;
  padding: 0;
  border: 0;
  cursor: pointer;
  transform: translateY(var(--arc, 0px)) rotate(var(--tilt, 0deg));
  transition: transform 180ms ease, opacity 300ms ease;
}
.deck-card:last-child { margin-right: 0; }
.deck-card.taken { opacity: 0; pointer-events: none; }
@media (hover: hover) {
  .deck-card:hover { transform: translateY(calc(var(--arc, 0px) - 14px)) rotate(var(--tilt, 0deg)); }
}
.deck-card:active { transform: translateY(calc(var(--arc, 0px) - 14px)) rotate(var(--tilt, 0deg)); }
.deck-rail.locked .deck-card { pointer-events: none; }
.rail-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #b9c1b8;
}

/* 牌面细看 */
.card-zoom {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  background: rgba(6, 15, 21, 0.92);
}
.card-zoom img {
  max-height: 70dvh;
  max-width: min(78vw, 360px);
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(214, 192, 141, 0.3), 0 30px 60px -20px #000;
}
.card-zoom img.reversed { transform: rotate(180deg); }
.card-zoom p { color: #e8e1cf; font-size: 14px; letter-spacing: 0.1em; }

/* 读信 */
.letter .analysis p,
.letter .analysis li {
  font-family: var(--scene-serif);
  font-size: 16px;
  line-height: 2.2;
  color: #d6d9ce;
}
.letter .analysis h2,
.letter .analysis h3 {
  font-family: var(--scene-serif);
  font-weight: 400;
  color: #ecdcbc;
}
.letter .analysis strong { color: #f0dfc0; font-weight: 400; }
.letter-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.letter-cards button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: zoom-in;
}
.letter-cards img {
  width: 100%;
  aspect-ratio: 992 / 1586;
  object-fit: contain;
  border-radius: 6px;
  background: #0d1319;
  box-shadow: 0 0 0 1px rgba(214, 192, 141, 0.2);
}
.letter-cards img.reversed { transform: rotate(180deg); }
.letter-cards span { display: block; margin-top: 8px; font-size: 12px; color: #c9c3b0; letter-spacing: 0.12em; }
.letter-cards b { display: block; font-family: var(--scene-serif); font-weight: 400; font-size: 14px; color: #efe6d3; }
.letter-question summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #c9b58f;
  cursor: pointer;
}
.letter-question p { font-size: 14px; line-height: 2; color: #dcd9cb; overflow-wrap: break-word; }

@media (prefers-reduced-motion: reduce) {
  .scene-world img,
  .shuffle .card-back,
  .slot-card .flip,
  .fly-card,
  .deck-card {
    transition: none !important;
  }
}

/* 危机状态：整页让位，场景退去，只留清楚的求助方式 */
body.crisis-mode .scene-world,
body.crisis-mode .scene-backdrop {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.scene-page .eg-list button { color: #dcd6c4; }
.scene-page .ask-meta { display: flex; align-items: center; margin-top: 6px; }

.letter-body { margin-top: 22px; }
.letter .paywall .pw-card { background: rgba(13, 31, 40, 0.92); }
.next-step {
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid rgba(196, 178, 139, 0.25);
}
.next-step label { display: block; }
.next-step textarea {
  width: 100%;
  margin-top: 12px;
  padding: 10px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(211, 193, 162, 0.35);
  outline: none;
  color: var(--scene-ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.85;
  resize: vertical;
}
.next-step textarea:focus { border-color: var(--scene-ochre); }
.scene-page .card { background: rgba(13, 31, 40, 0.86); }

/* 首页：整间书室在上，文字与入口落在桌面暗部 */
.index-hero {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 52px - env(safe-area-inset-top, 0px));
  padding-top: 28vh;
}
.index-title {
  font-size: 40px;
  letter-spacing: 0.4em;
}
.index-creed {
  margin-top: 22px;
}
.index-creed p {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 2;
  color: #dcdccf;
  text-shadow: 0 1px 8px rgba(2, 12, 23, 0.9);
}
.index-actions {
  margin-top: 30px;
}
.scene-page .disclaimer {
  color: #93a29c;
  margin-top: 30px;
}

/* 场景页不用旧版桌面"案几"面板：舞台本身就是那张桌子 */
@media (min-width: 700px) {
  body.scene-page { background: #08141b; }
  .scene-page .page {
    margin: 0 auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 32px max(32px, env(safe-area-inset-bottom));
  }
}

/* 合看时牌桌区为空：不占高度，"读这封信"落在一屏之内；牌位在宽屏上不无限放大 */
.table-stage:empty {
  display: none;
}
.table-foot {
  margin-top: auto;
}
.slots {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* 主操作离屏幕下沿留出呼吸与手势条空间 */
.table {
  min-height: calc(100dvh - 52px - env(safe-area-inset-top, 0px) - max(32px, env(safe-area-inset-bottom, 0px)));
}