/* ============================================================
   心岛 v1.0 · 屏 6 · 回旅人之屋 · 翻笔记
   ------------------------------------------------------------
   渲染方案：零出图。全 CSS + SVG。
     背景 = 屏 3 的小屋内景图，模糊压暗（真图到位前用 CSS 兜底）
     纸   = --paper + feTurbulence 噪点 + 中缝阴影
     意象 = SVG 线描，--living 单色 1.5px stroke
     翻页 = rotateY + perspective，700ms

   本文件不得出现任何字面 hex 值，全部走 tokens.css 的 var()。
   ============================================================ */

/* ---------- 背景：玩家回到自己的旅人之屋 ---------- */

.s6-room {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* CSS 兜底：暗室 + 右上一块窗光 + 中下一滩暖光。
     真图（traveler-house-interior.png）到位后由 .s6-room-img 覆盖，
     本层保留作为图未加载时的底。 */
  background:
    radial-gradient(ellipse 34% 26% at 72% 30%, var(--air-veil), transparent 70%),
    radial-gradient(ellipse 46% 34% at 48% 78%, var(--light-faint), transparent 72%),
    linear-gradient(168deg, var(--ink) 0%, var(--ink-deep) 52%, var(--ink-deeper) 100%);
}

/* 真图层：设置 --s6-room-src 即生效，代码一行不用改 */
.s6-room-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--s6-room-src, none);
  background-size: cover;
  background-position: center;
  filter: blur(7px) brightness(.38) saturate(.7);
  transform: scale(1.04); /* 吃掉 blur 的边缘透明 */
}

/* ---------- 笔记本 ---------- */

.s6-stage {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--gutter);
}

.notebook {
  position: relative;                 /* .spine / .turn-hot 的定位参照 */
  perspective: 2400px;
  width: min(1040px, 92vw);
  height: min(660px, 74vh);
}

.book {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* 注意：这里绝对不能加 filter / opacity<1 / overflow:hidden / mask ——
     任何一个都会让 preserve-3d 扁平化，翻页背面就废了。
     书的投影改由各页自己的 box-shadow 承担。 */
}

/* 两个半页槽位 */
.page {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  box-shadow: 0 26px 46px var(--ink-shadow);
}
.page-left  { left: 0;  border-radius: 3px 0 0 3px; }
.page-right { left: 50%; border-radius: 0 3px 3px 0; }

/* 中缝：双向内阴影，翻页时加深
   必须是 .book 的兄弟（不能进 preserve-3d 容器，否则会被翻动页穿过） */
.spine {
  position: absolute;
  top: 0;
  left: 50%;
  width: 68px;
  height: 100%;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--ink-shadow) 42%,
    var(--ink-shadow) 58%,
    transparent 100%
  );
  opacity: .30;
  transition: opacity var(--t-page) var(--e-page);
}
/* spine 现在是 .book 的后继兄弟，用兄弟选择器 */
.book.turning ~ .spine { opacity: .80; }

/* ---------- 翻动的那一页 ---------- */

.flipper {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  z-index: 5;
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: rotateY(0deg);
  transition: transform 600ms var(--e-page);
}
.book.turning .flipper,
.flipper.flipping { transform: rotateY(-178deg); }
.book.no-anim .flipper { transition: none; }

.flip-face {
  position: absolute;
  inset: 0;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 26px 46px var(--ink-shadow);
}
.flip-front { border-radius: 0 3px 3px 0; }
.flip-back  { border-radius: 3px 0 0 3px; transform: rotateY(180deg); }

/* ---------- 页面内容 ---------- */

.page-inner {
  position: relative;
  height: 100%;
  padding: clamp(30px, 4.4vh, 54px) clamp(30px, 3.8vw, 56px);
  display: flex;
  flex-direction: column;
}

/* 左页：心岛守护者的第三人称文字 */
.note-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  letter-spacing: .01em;
  color: var(--ink);
  max-width: var(--measure);
}
.note-body p + p { margin-top: 1.15em; }

/* 守护者留的空白行——那个停顿本身就是内容 */
.note-body .pause {
  display: block;
  height: 1.9em;
}

/* 右页：今日映射 */
.mapping-head {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  color: var(--living);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--air-veil);
}

.weather {
  margin-top: var(--sp-3);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
  letter-spacing: var(--ls-quote);
  color: var(--ink);
}

.imagery-list {
  margin-top: auto;
  padding-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.imagery {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.imagery svg {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  color: var(--living);
}
.imagery-line {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-imagery);
  line-height: var(--lh-imagery);
  letter-spacing: var(--ls-imagery);
  color: var(--ink);
  opacity: .88;
}

/* v3.1: 章节插图占整页 */
.chapter-illustration {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--sp-3) 0;
  min-height: 0;
  width: 100%;
  height: 100%;
}
.chapter-illustration img {
  max-width: 90%;
  max-height: 90%;
  width: 800px;          /* 兜底基础尺寸（无 width=auto 限制时浏览器按原始 800x600）*/
  height: 600px;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 18px 38px var(--ink-shadow);
}

/* v2.0 修破图（2026-09-08）：插画加载失败时的兜底 UI */
.illustration-failed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3, 18px);
  width: 80%;
  height: 80%;
  border: 1.5px dashed var(--air-veil, #c8c2b4);
  border-radius: 4px;
  background: var(--paper, #f7f1e3);
  color: var(--ink, #3f4e5a);
  font-family: var(--font-body, serif);
  font-size: 14px;
  letter-spacing: .04em;
}
.illustration-failed span {
  opacity: .65;
}
.re-illust-btn {
  cursor: pointer;
  padding: 8px 18px;
  border: 1px solid var(--living, #d4a574);
  border-radius: 3px;
  background: var(--paper, #f7f1e3);
  color: var(--ink, #3f4e5a);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: .05em;
  transition: background .18s ease, color .18s ease;
}
.re-illust-btn:hover {
  background: var(--honey, #d4a574);
  color: var(--paper, #f7f1e3);
}
.re-illust-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.page-illustration-inner {
  align-items: center;
  height: 100%;
}

/* v3.1: 章节号 + 标题（小说式） */
.chapter-no {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  color: var(--living);
  text-align: center;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--air-veil);
  margin-bottom: var(--sp-3);
}
.chapter-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--ink);
  text-align: center;
  margin: var(--sp-3) 0 var(--sp-4) 0;
  font-style: italic;
  letter-spacing: .02em;
}

/* ---------- 今日插画（mmx 出图）----------
   三态：ready → <img>；pending → 旋转 SVG 占位；failed / skipped / 缺字段 → 整块消失。
   意象 SVG 是单色线描，所以插画用 real image；loading="lazy" 避免离屏抢占带宽。 */

.notebook-illustration {
  display: block;
  max-width: 100%;
  max-height: 240px;
  margin: var(--sp-3) auto;
  border-radius: 4px;
  object-fit: cover;
}

.illustration-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  margin: var(--sp-3) auto;
  color: var(--living);
  opacity: .55;
}

.spinner {
  width: 32px;
  height: 32px;
  animation: spin 1.2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 页码：IM Fell English */
.folio {
  position: absolute;
  bottom: clamp(16px, 2.4vh, 26px);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  color: var(--ink);
  opacity: .34;
}
.page-left  .folio, .flip-back  .folio { left:  clamp(30px, 3.8vw, 56px); }
.page-right .folio, .flip-front .folio { right: clamp(30px, 3.8vw, 56px); }

/* ---------- 底部提示 ---------- */

.s6-hint {
  z-index: 10;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  color: var(--air);
  opacity: .5;
  letter-spacing: .04em;
}

/* ---------- 翻页热区：蜜糖唯一律 ----------
   右下角一小片暖光 = 唯一"能点"的地方。
   不画箭头、不画按钮。 */

.turn-hot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 128px;
  height: 128px;
  z-index: 7;
  border: 0;
  background: radial-gradient(
    ellipse 100% 100% at 100% 100%,
    var(--light-halo) 0%,
    transparent 68%
  );
  opacity: .55;
  animation: hot-breath var(--t-breath) ease-in-out infinite;
  transition: opacity var(--t-quick) var(--e-out),
              transform var(--t-quick) var(--e-out);
  transform-origin: 100% 100%;
}
.turn-hot:hover,
.turn-hot:focus-visible { opacity: 1; transform: scale(1.16); }
.turn-hot[disabled] { opacity: 0; pointer-events: none; }

/* 呼吸律：7.2s ≥ 6s */
@keyframes hot-breath {
  0%, 100% { opacity: .42; }
  50%      { opacity: .70; }
}

/* ---------- reduced-motion ----------
   本屏的翻页是 transition 不是 animation，全局压制已经把它压成瞬时，
   turn() 里那个 900ms 兜底计时器保证没有 transitionend 也能收尾。
   这里只把两件"还在动"的东西钉死：
     翻动页不要留下半旋转的中间态；
     热区不呼吸，但**必须仍然亮着** —— 它是本屏唯一能点的地方，
     关掉动效不该把唯一的出口一起关掉。 */

@media (prefers-reduced-motion: reduce) {
  .flipper { transition: none; }
  .turn-hot { animation: none; opacity: .55; }
  .turn-hot[disabled] { opacity: 0; }
}

/* ---------- 窄屏：单页 ---------- */

@media (max-width: 820px) {
  .notebook { height: min(78vh, 720px); }
  .page-right, .flipper { display: none; }
  .page-left { width: 100%; border-radius: 3px; }
  .spine { display: none; }
}