/* =====================================================================
 * 树屋贺卡 · 出血舞台风（整页是一张画）
 * 配色取自插画本身：天空浅灰青、地面暖黄、城市剪影淡粉；
 * 主橙/墨绿/马克笔三色延续原手账调子，插画去框羽化融入页面
 * ===================================================================== */

/* Caveat 手写体已本地化（latin 子集 75KB），不再请求 Google Fonts —— 国内打开不会白屏等字体 */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/caveat-latin.woff2") format("woff2");
}

:root {
  --paper: #f2ecdf;          /* 米纸底 */
  --ink: #4a4238;            /* 墨色文字 */
  --ink-soft: #6b5f4e;       /* 弱化文字（从 #8a7f70 加深：米纸上的对比度 3.3:1 → 5.3:1，小字可读） */
  --orange: #d4622a;         /* 主橙（按钮/贴纸） */
  --green: #2f5d46;          /* 树屋衬底绿（标签/书封/落款） */
  --sky: #e4e8e4;            /* 插画上部天空的浅灰青（页面背景上半） */
  --ground: #f3ddb0;         /* 插画下部地面的暖黄（页面背景下半） */
  --line-blue: #2b5dd7;      /* 马克笔蓝 */
  --line-yellow: #f0b429;    /* 马克笔黄 */
  --line-red: #e05a3a;       /* 马克笔红 */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);   /* 带质量感的缓动 */
  --font-hand: "Caveat", "Xingkai SC", "KaiTi", cursive;
}

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

html, body { height: 100%; }

body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  /* 出血舞台底色：上天空下地面，复刻插画的色彩环境——图文都长在这张画里 */
  background: linear-gradient(180deg, var(--sky) 0%, #e9e6da 56%, var(--ground) 100%);
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 画面质感：细噪点（格线让位给沉浸感，噪点让渐变更像画布） ---------- */
.paper {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
.paper::after {
  content: ""; position: absolute; inset: 0; opacity: .05;
  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'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 布局：出血舞台——文字列浮在左侧天空区，插画去框浮在右侧 ---------- */
.copy, .stage { position: fixed; top: 0; bottom: 0; z-index: 1; }
.copy  {
  left: 0; width: 41%;
  padding: clamp(24px, 4.5vw, 68px);
  padding-bottom: clamp(88px, 11vh, 130px);  /* 底部留出进度点的位置，滚动到最后一行也不被压住 */
  display: flex; flex-direction: column;
  overflow-y: auto;              /* 矮窗口下内容自己滚，不再被 body 的 overflow:hidden 裁掉 */
  scrollbar-width: thin;
  scrollbar-color: rgba(107, 95, 78, .35) transparent;
}
.copy::-webkit-scrollbar { width: 4px; }
.copy::-webkit-scrollbar-thumb { background: rgba(107, 95, 78, .3); border-radius: 4px; }
/* 舞台铺满全屏且不接鼠标：插画浮在右半，左半天空留给文字 */
.stage { inset: 0; pointer-events: none; }

.stage--empty .tree { opacity: 0; }   /* 开场时树屋还没“种下”，从天空里淡入 */

/* 插画去框：右侧近满高、按方图等比适配（1600×1600，树屋完整不裁），
   四周用径向遮罩羽化——插像素水彩一样洇进天空与地面。
   mask 带 -webkit- 前缀，微信 WebView（内嵌浏览器内核）才生效 */
.tree {
  position: absolute; top: 50%; right: -2%;
  height: 96vh; aspect-ratio: 1 / 1;
  object-fit: cover; opacity: 0;
  transform: translateY(-50%) scale(.985);
  transition: opacity 1.1s var(--ease), transform 1.4s var(--ease);
  -webkit-mask-image: radial-gradient(ellipse 64% 58% at 52% 50%, #000 52%, transparent 79%);
          mask-image: radial-gradient(ellipse 64% 58% at 52% 50%, #000 52%, transparent 79%);
}
.tree.is-lit { opacity: 1; transform: translateY(-50%) scale(1); }

/* ---------- 文字层 ---------- */
.eyebrow {
  font-size: 11px; letter-spacing: .28em; color: var(--ink-soft);
  text-transform: uppercase; margin-bottom: 22px;
}
.chapter-tag {
  display: inline-block; align-self: flex-start;
  font-size: 11px; letter-spacing: .2em; color: #fff;
  background: var(--green); border-radius: 999px; padding: 5px 14px; margin-bottom: 26px;
}

/* ---------- 门牌贴纸（第 2 页：把域名做成实体，礼物看得见摸得着） ---------- */
.door-plate {
  position: relative; align-self: flex-start;
  background: #fff; border-radius: 12px;
  padding: 14px 24px 16px; margin-bottom: 30px;
  transform: rotate(-1.5deg);
  box-shadow: 0 12px 26px rgba(74, 66, 56, .16), inset 0 0 0 1px rgba(74, 66, 56, .1);
}
.door-plate::before {   /* 顶部一截半透明胶带，贴纸感 */
  content: ""; position: absolute; top: -10px; left: 50%;
  width: 76px; height: 20px; transform: translateX(-50%) rotate(-4deg);
  background: rgba(240, 180, 41, .45); border-radius: 2px;
  box-shadow: 0 2px 6px rgba(74, 66, 56, .12);
}
.door-label {
  display: block; font-size: 11px; letter-spacing: .26em;
  color: var(--ink-soft); margin-bottom: 6px;
}
.door-domain {
  position: relative; display: inline-block;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: clamp(18px, 1.7vw, 26px); font-weight: 700; letter-spacing: .02em;
}
.door-domain .mark { left: -4%; bottom: -6px; width: 108%; height: 12px; }

h1.title {
  font-size: clamp(40px, 5.6vw, 84px); line-height: 1.04;
  font-weight: 800; letter-spacing: .01em; margin-bottom: 10px;
}
h1.title .hand {
  font-family: var(--font-hand); color: var(--orange);
  font-size: 1.25em; line-height: 1; display: block; margin-bottom: 6px;
}
h2.title {
  font-size: clamp(26px, 2.6vw, 40px); line-height: 1.3;
  font-weight: 700; margin-bottom: 18px; max-width: 18em;
}
.title em { font-style: normal; position: relative; white-space: nowrap; }

/* 马克笔痕迹通用类：标题 <em> 划线、门牌域名划线都走这里 */
.mark { position: absolute; left: -2%; bottom: -10px; width: 104%; height: 14px; overflow: visible; pointer-events: none; }
.mark path {
  fill: none; stroke-width: 3.2; stroke-linecap: round;
  stroke-dasharray: 300; stroke-dashoffset: 300;
  transition: stroke-dashoffset 1s var(--ease) .35s;
}
.mark.is-drawn path { stroke-dashoffset: 0; }

/* 键盘可达性：所有可聚焦元素都有清晰焦点环 */
:where(button, a):focus-visible { outline: 3px solid var(--line-blue); outline-offset: 2px; }

.body-text {
  font-size: clamp(15px, 1.25vw, 18px); line-height: 2.05; color: #5d5344;
  max-width: 30em; margin-bottom: 34px;
}

.btn {
  align-self: flex-start; cursor: pointer; text-decoration: none;
  font-size: 15px; font-weight: 600; color: #fff;
  background: var(--orange); border: none; border-radius: 999px;
  padding: 14px 30px; letter-spacing: .06em;
  box-shadow: 0 12px 26px rgba(212, 98, 42, .32);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(212, 98, 42, .4); }
.btn:active { transform: scale(.97); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(74,66,56,.35); }
.btn--small { padding: 8px 18px; font-size: 13px; box-shadow: none; }

/* ---------- 章节切换动效 ---------- */
.screen { display: flex; flex-direction: column; align-items: flex-start; margin: auto 0 }  /* margin:auto 居中且内容超高时不会被裁顶 */
.screen-body { display: contents }  /* 桌面：包裹层隐形，布局与从前完全一致；手机见媒体查询 */
.screen.is-leaving { animation: leave .45s var(--ease) forwards; }
.screen.is-entering { animation: enter .7s var(--ease) both; }
@keyframes leave { to { opacity: 0; transform: translateY(-18px); } }
@keyframes enter { from { opacity: 0; transform: translateY(26px); } }

/* ---------- HUD：音乐按钮 ---------- */
.hud { position: fixed; top: 22px; right: 22px; z-index: 5; display: flex; align-items: center; gap: 12px; }
.music-btn {
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.75); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(74,66,56,.2);
  transition: background .25s var(--ease);
}
.music-btn:hover { background: rgba(255,255,255,.95); }
.music-btn svg { width: 18px; height: 18px; }
.hidden { display: none !important; }

/* ---------- 底部进度点（可点击跳页） ---------- */
.dots { position: fixed; bottom: 26px; left: 21%; transform: translateX(-50%); z-index: 5; display: flex; gap: 6px; }
.dot {
  width: 26px; height: 26px; padding: 0; border: none; background: transparent;
  cursor: pointer; position: relative;
}
.dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(74,66,56,.25); transition: all .4s var(--ease);
}
.dot:hover::after { background: rgba(74,66,56,.5); }
.dot.on::after { background: var(--orange); transform: translate(-50%, -50%) scale(1.4); }

/* ---------- 书籍区块（第四章内嵌卡片） ---------- */
.book-card {
  display: flex; gap: 18px; align-items: center;
  background: #fff; border-radius: 16px; padding: 16px; max-width: 420px;
  box-shadow: 0 14px 34px rgba(74,66,56,.14);
  margin-bottom: 30px;
}
.book-cover {
  flex: none; width: 86px; height: 118px; border-radius: 6px 10px 10px 6px;
  background: linear-gradient(160deg, #2f5d46, #1e3d2d);
  color: #f2ecdf; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-hand); font-size: 30px; text-align: center; line-height: 1.15;
  box-shadow: inset 4px 0 8px rgba(0,0,0,.25), 4px 6px 14px rgba(74,66,56,.25);
  transform: rotate(-3deg);
}
.book-meta h3 { font-size: 17px; margin-bottom: 4px; }
.book-meta p { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 12px; }
.book-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- PDF 阅读器 ---------- */
.reader { position: fixed; inset: 0; z-index: 20; background: rgba(40, 34, 26, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; flex-direction: column; padding: 18px; }
.reader-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; color: #fff; }
.reader-title { font-weight: 600; }
.reader-actions { display: flex; gap: 10px; }
.reader-frame { flex: 1; border: none; border-radius: 14px; background: #fff; }
.reader-fallback { color: rgba(255,255,255,.92); font-size: 12.5px; margin-top: 10px; text-align: center; }

/* 第 4 页收尾：手写英文大字比开场标题收敛一号，两行也能自然换行 */
.title--finale { margin-bottom: 18px; }
.title--finale .hand { font-size: clamp(38px, 4.2vw, 64px); line-height: 1.15; margin-bottom: 0; }

/* ---------- 落款 ---------- */
.signoff { font-family: var(--font-hand); font-size: clamp(30px, 3vw, 44px); color: var(--green); line-height: 1.4; }
.signoff .date { display: block; font-family: inherit; font-size: .6em; color: var(--ink-soft); margin-top: 10px; }
.again { margin-top: 30px; }

/* ---------- 房产证彩蛋：第 4 页信封入口 + 证书弹层 ---------- */
.deed-entry {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px; padding: 4px 2px;   /* 紧跟落款日期，不拉开大空隙 */
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--ink-soft);
  border-bottom: 1px dashed rgba(107, 95, 78, .5);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.deed-entry:hover { color: var(--orange); border-color: var(--orange); }
.deed-entry svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.deed {
  position: fixed; inset: 0; z-index: 30;                     /* 盖过阅读层(z-20) */
  background: rgba(40, 34, 26, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.deed-card {
  position: relative; width: 100%; max-width: 430px;
  max-height: 82dvh; overflow-y: auto;
  background: var(--paper); border-radius: 14px;
  padding: 30px 28px 64px;   /* 底部留白给红章，不压正文 */
  box-shadow: 0 24px 60px rgba(40, 34, 26, .4),
              inset 0 0 0 1.5px rgba(47, 93, 70, .55),   /* 证书双线框 */
              inset 0 0 0 5px var(--paper), inset 0 0 0 6.5px rgba(47, 93, 70, .3);
  transform: rotate(-.6deg);
}
.deed-close {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  width: 32px; height: 32px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(74, 66, 56, .08); color: var(--ink-soft); font-size: 14px;
}
.deed-close:hover { background: rgba(74, 66, 56, .16); color: var(--ink); }
.deed-title {
  font-size: 21px; font-weight: 800; color: var(--green);
  letter-spacing: .04em; margin-bottom: 14px;
}
.deed-intro { font-size: 14px; line-height: 1.9; color: #5d5344; margin-bottom: 14px; }
.deed-steps { list-style: none; counter-reset: deed; margin-bottom: 14px; }
.deed-steps li {
  counter-increment: deed;
  position: relative; padding-left: 32px;
  font-size: 13.5px; line-height: 1.85; color: #5d5344; margin-bottom: 10px;
}
.deed-steps li::before {
  content: counter(deed);
  position: absolute; left: 0; top: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); color: var(--paper);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.deed-outro { font-size: 13.5px; line-height: 1.9; color: var(--ink); margin-bottom: 10px; }
.deed-note { font-size: 11.5px; color: var(--ink-soft); opacity: .85; }
/* 红章：旋转盖在右下角，微透印章感 */
.deed-stamp {
  position: absolute; right: 22px; bottom: 18px;
  padding: 6px 10px; border: 2.5px solid rgba(192, 57, 43, .75); border-radius: 6px;
  color: rgba(192, 57, 43, .85); font-size: 12px; font-weight: 700; letter-spacing: .18em;
  transform: rotate(8deg); opacity: .9; pointer-events: none;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 .7 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23r)'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 .7 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* ---------- 矮窗口（笔记本小屏）：压缩第 4 页节奏；再不够高时 .copy 自己滚，不再裁内容 ---------- */
@media (min-width: 861px) and (max-height: 780px) {
  .copy { padding-top: 34px; padding-bottom: 74px; }
  .chapter-tag { margin-bottom: 16px; }
  h2.title { margin-bottom: 12px; }
  .body-text { margin-bottom: 22px; line-height: 1.8; }
  .door-plate { padding: 10px 18px 12px; margin-bottom: 20px; }
  .book-card { padding: 12px; margin-bottom: 20px; }
  .signoff { font-size: clamp(26px, 2.4vw, 34px); }
  .signoff .date { margin-top: 8px; }
  .again { margin-top: 16px; }
}

/* ---------- 手机：插画占上半且底缘渐隐，文字直接坐在暖黄地面上 ---------- */
@media (max-width: 860px) {
  /* 手机 vh 按“地址栏收起”的最大高度算，53vh+47vh 会比实际屏幕高出一截 → 滚过头；
     改用 dvh（动态视口高度，跟随地址栏伸缩），vh 作为旧内核回退 */
  html {
    height: auto;
    background: var(--ground);   /* 橡皮筋过滚兑底暖黄色，不再露白 */
    overscroll-behavior-y: none; /* 关掉橡皮筋回弹 */
  }
  body {
    height: auto;
    overflow: visible; overflow-x: hidden;
    background: none;  /* 渐变改画在 fixed 的 .paper 层上（见下），永远精确盖住可见视口 */
  }
  .paper {
    /* 天空→地面的色彩分界：用百分比锚定 fixed 层自身 = 锁定可见视口，不随滚动拉伸 */
    background: linear-gradient(180deg, var(--sky) 0, var(--sky) 42%, var(--ground) 58%, var(--ground) 100%);
  }
  .stage {
    position: relative; width: 100%; height: 53vh; top: auto; right: auto;
    left: auto; bottom: auto;
    height: 53dvh;
  }
  .tree {
    top: 0; right: 0; width: 100%; height: 100%; aspect-ratio: auto;
    object-position: 50% 60%;
    transform: scale(.985);
    /* 底缘渐隐：树屋下半慢慢化进地面色，文字区直接接上来 */
    -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
  }
  .tree.is-lit { transform: scale(1); }
  .copy {
    position: relative; width: 100%; height: 47vh; min-height: 47vh; top: auto;
    height: 47dvh; min-height: 47dvh;  /* 固定占满插画以下区域：整页高度=53+47=100dvh，页面本身不再滚 */
    padding: 18px 22px 76px; justify-content: flex-start;  /* 顶距 26→18：给第 2 页门牌多留 8px */
  }
  /* 四页按钮钉在同一位置：每屏固定占满文字区，内容在 screen-body 内自成滚动，
     按钮永远沉底不随内容高度漂移，也不会盖字 */
  .screen { flex: 1; min-height: 0; margin: 0; }
  .screen-body {
    display: block; flex: 1; min-height: 0; overflow-y: auto;
    width: 100%;
    scrollbar-width: none;  /* 内容滚动区不显滚动条，保持画面干净 */
  }
  /* 内容被底边切住且未滚到底时，底部 30px 渐隐——柔和地暗示下面还有，不像裁切故障 */
  .screen-body.is-cut {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent 100%);
            mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent 100%);
  }
  .screen > .btn { flex: none; margin-top: 14px; }
  .hud { top: 14px; right: 14px; }
  /* 手机保留小号进度点：不然没法回看上一页；再配合左右滑动翻页（见 app.js） */
  .dots { bottom: 10px; left: 50%; transform: translateX(-50%); }
  .dot { width: 22px; height: 22px; }
  .dot::after { width: 6px; height: 6px; }
  /* 第 3 页（书卡页）紧凑：插画尺寸不动，压缩文字区自身 */
  .chapter-tag { margin-bottom: 12px; }
  h2.title { font-size: clamp(22px, 5.6vw, 30px); margin-bottom: 8px; }
  .body-text { line-height: 1.75; font-size: 15px; margin-bottom: 14px; }
  .book-card { padding: 10px; gap: 10px; margin-bottom: 16px; max-width: 340px; width: 100%; }
  .book-cover { width: 62px; height: 86px; font-size: 20px; }
  .book-meta h3 { font-size: 15px; margin-bottom: 2px; }
  .book-meta p { margin-bottom: 8px; font-size: 12px; }
  .btn { padding: 12px 26px; font-size: 14px; }
  .door-plate { padding: 10px 18px 12px; margin-bottom: 12px; }  /* 第 2 页门牌收紧：小屏也要让正文完整放下 */
  .chapter-tag { margin-bottom: 10px; }
  .screen .title { margin-bottom: 8px; }
  .reader { padding: 10px; }
}

/* ---------- 尊重系统「减少动态效果」设置：关掉所有过渡与动画 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}