/* ============================================================
   海拉鲁手绘本 · Hyrule Sketchbook
   手绘风格样式表 —— 纸、墨、铅笔、水彩
   ============================================================ */

/* ---------- 字体 ---------- */
/* ⚠️ 路径相对本文件（css/）解析，必须写 ../fonts/；写成 fonts/ 会 404，
   而 macOS 上 Kaiti SC 会默默顶替毛笔字体，很难发现。 */
@import url("../fonts/fonts.css");

/* ---------- 设计变量 ---------- */
:root {
  /* 纸张 */
  --paper: #f7f0de;
  --paper-2: #efe5cc;
  --paper-3: #e6d9bb;
  --paper-edge: #cbb78d;
  --paper-shadow: rgba(94, 74, 44, 0.18);

  /* 墨 */
  --ink: #241f1a;
  --ink-soft: #574e45;
  --ink-faint: #8a7e70;
  --ink-wash: rgba(42, 37, 33, 0.08);

  /* 彩铅 / 水彩 */
  --gold: #d9a441;
  --gold-deep: #b3812a;
  --green: #4f8a5b;
  --blue: #3f6f9e;
  --sky: #a9c4d4;
  --red: #b4453a;
  --violet: #7a5b96;
  --sand: #d8b981;

  /* 字体栈 */
  --font-brush: "Ma Shan Zheng", "Kaiti SC", "STKaiti", cursive;
  --font-hand: "ZCOOL KuaiLe", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --font-latin: "Gaegu", "Comic Sans MS", cursive;
  --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;

  /* 节奏 */
  --page: 1080px;
  --radius: 14px;
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.9;
  color: var(--ink);
  background-color: #ded0b0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 纸纹 + 晕染 + 暗角，整个页面共用一张大纸 */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

/* 纤维颗粒 */
body::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.5;
  mix-blend-mode: multiply;
  opacity: 0.22;
}

/* 纸张边缘暗角 */
body::after {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 250, 235, 0.35), transparent 60%),
    radial-gradient(100% 100% at 50% 50%, transparent 45%, rgba(120, 96, 56, 0.16) 100%);
}

/* 长纤维 */
.paper-fiber {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.14;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.012' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* ---------- 版心 ---------- */
.wrap {
  width: min(var(--page), calc(100% - 48px));
  margin-inline: auto;
}

/* 一页“纸” */
.sheet {
  position: relative;
  width: min(1180px, calc(100% - 32px));
  padding: clamp(48px, 8vw, 96px) clamp(22px, 5vw, 68px);
  margin: 0 auto;
  background:
    linear-gradient(178deg, rgba(255, 252, 242, 0.9), rgba(246, 238, 218, 0.86) 60%, rgba(238, 227, 202, 0.9));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 18px 40px -22px var(--paper-shadow);
  isolation: isolate;
}

/* 手绘外框 */
.sheet + .sheet { margin-top: clamp(20px, 4vw, 54px); }

.frame {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  pointer-events: none;
  overflow: visible;
}
.frame path {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.55;
}

/* ---------- 标题 ---------- */
h1, h2, h3 {
  font-family: var(--font-hand);
  font-weight: 400;
  line-height: 1.35;
  margin: 0;
  letter-spacing: 0.02em;
}

h1 {
  font-family: var(--font-brush);
  font-size: clamp(44px, 8.4vw, 92px);
  line-height: 1.1;
  letter-spacing: 0.04em;
}

h2 {
  font-size: clamp(26px, 3.6vw, 40px);
}

h3 { font-size: clamp(19px, 2.2vw, 24px); }

/* 章节标题：编号 + 笔刷下划线 */
.sec-head {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 10px;
}

.sec-num {
  font-family: var(--font-latin);
  font-size: clamp(38px, 5vw, 62px);
  line-height: 0.8;
  color: var(--ink-faint);
  opacity: 0.7;
  flex: none;
}

.sec-title { position: relative; display: inline-block; }

.sec-title::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -6px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c34-5 62 3 96-1s58 4 96-2 62 5 104-1' fill='none' stroke='%23d9a441' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  opacity: 0.75;
}

.sec-sub {
  font-family: var(--font-latin);
  font-size: 15px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 26px;
}

.lede {
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 17px;
}

/* ---------- 手写批注 ---------- */
.note {
  font-family: var(--font-hand);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.note-latin {
  font-family: var(--font-latin);
  letter-spacing: 0.06em;
}

/* 带引线的小标注 */
.tag {
  font-family: var(--font-hand);
  font-size: 14px;
  color: var(--ink-soft);
  border-bottom: 1.5px dashed rgba(87, 78, 69, 0.5);
  padding-bottom: 1px;
}

/* ============================================================
   绘画通用类（供所有 SVG 插画使用）
   ============================================================ */

.art { display: block; width: 100%; height: auto; overflow: visible; }

/* 墨线 */
.ln {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ln-2 { stroke-width: 2.1; }
.ln-4 { stroke-width: 4.6; }
.ln-3 { stroke-width: 3; }
.ln-5 { stroke-width: 5.6; }
.ln-soft { stroke: var(--ink-soft); }
.ln-faint { stroke: var(--ink-faint); }
.ln-gold { stroke: var(--gold-deep); }
.ln-red { stroke: var(--red); }
.ln-blue { stroke: var(--blue); }
.ln-green { stroke: var(--green); }
.ln-violet { stroke: var(--violet); }
.ln-tunic { stroke: #4d7a52; }
.ln-hairline { stroke: #b8933c; }

/* 二次复描（由 JS 自动生成，模拟手抖重描） */
.ln--ghost {
  opacity: 0.5;
  stroke-width: 2.1;
  pointer-events: none;
}

/* 铅笔阴影 / 排线 */
.shade { fill: url(#hatch-45); stroke: none; opacity: 0.55; }
.shade-x { fill: url(#hatch-cross); stroke: none; opacity: 0.42; }
.shade-135 { fill: url(#hatch-135); stroke: none; opacity: 0.5; }

/* 水彩块 */
.wash { stroke: none; mix-blend-mode: multiply; }
.wash-sky { fill: var(--sky); opacity: 0.2; }
.wash-gold { fill: var(--gold); opacity: 0.2; }
.wash-green { fill: var(--green); opacity: 0.17; }
.wash-red { fill: var(--red); opacity: 0.24; }
.wash-blue { fill: var(--blue); opacity: 0.2; }
.wash-sand { fill: var(--sand); opacity: 0.28; }
.wash-violet { fill: var(--violet); opacity: 0.18; }
.wash-ink { fill: var(--ink); opacity: 0.1; }

/* 角色配色：水彩铺色层（在墨线之下） */
.colors { mix-blend-mode: multiply; }
.fill-skin { fill: #eec6a2; }
.fill-hair { fill: #e2c06a; }
.fill-tunic { fill: #6d9f68; }
.fill-tunic-dark { fill: #55815a; }
.fill-brown { fill: #8a5f3f; }
.fill-brown-dark { fill: #6f4a30; }
.fill-blue { fill: #4a7aa6; }
.fill-red { fill: #b4503f; }
.fill-cream { fill: #efe3c6; }
.fill-gold { fill: var(--gold); }
.fill-violet { fill: #7a5b96; }
.fill-paper { fill: #f7f0de; }
.fill-stone { fill: #ded2b6; }
.fill-stone-dark { fill: #c2b393; }
.fill-roof { fill: #5b7fa3; }
.fill-hill { fill: #7cab6f; }
.fill-hill-dark { fill: #5d8a58; }
.fill-mountain { fill: #9b8fa0; }
.fill-smoke { fill: #cfc7bb; }
.fill-dune { fill: #e6d3a8; }

/* 路面：先铺一条浅色带，再在上面压虚线，否则虚线会淹没在草地里 */
.road {
  fill: none;
  stroke: #f0e6cb;
  stroke-width: 20;
  stroke-linecap: round;
  opacity: 0.8;
}

/* 键盘图解 */
.key-txt {
  font-family: var(--font-latin);
  font-size: 24px;
  fill: var(--ink);
  text-anchor: middle;
}

.btn--big {
  font-size: 18px;
  padding: 13px 26px;
  color: var(--ink);
  display: inline-block;
  text-decoration: none;
}

/* 链接样式的按钮 */
a.btn { text-decoration: none; display: inline-block; }

/* 图内序号（剖面图路线编号） */
.annot-num {
  font-family: var(--font-latin);
  font-size: 17px;
  fill: var(--red);
  letter-spacing: 0.02em;
}

/* 手写批注 */
.annot-txt {
  font-family: var(--font-hand);
  font-size: 15px;
  fill: var(--ink-soft);
  letter-spacing: 0.08em;
}

/* 实心墨块 */
/* 注意：这里不要写 stroke:none —— 它会覆盖 .ln 的墨线，
   导致所有实心形状丢掉轮廓（曾经踩过这个坑）。 */
.solid { fill: var(--ink); }
.solid-gold { fill: var(--gold); }
.solid-paper { fill: var(--paper); }

/* ============================================================
   封面 / HERO
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 72px 20px 96px;
  overflow: hidden;
  background:
    radial-gradient(90% 60% at 50% 12%, #fdf8ea 0%, #f6eeda 42%, #ecdfc2 100%);
}

.hero-inner {
  position: relative;
  width: min(940px, 100%);
  text-align: center;
  z-index: 2;
}

.hero h1 {
  margin: 0 0 6px;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.hero .zh-sub {
  font-family: var(--font-hand);
  font-size: clamp(15px, 2vw, 20px);
  color: var(--ink-soft);
  letter-spacing: 0.3em;
  margin: 0 0 4px;
}

.hero .en-sub {
  font-family: var(--font-latin);
  font-size: clamp(13px, 1.6vw, 17px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}

/* 封面主图 */
.hero-art {
  height: min(50svh, 540px);
  aspect-ratio: 600 / 580;
  width: auto;
  max-width: 88vw;
  margin: 6px auto -6px;
  filter: drop-shadow(0 12px 18px rgba(90, 70, 40, 0.12));
}

.hero-art svg { width: 100%; height: 100%; }

.hero-meta {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 4vw, 44px);
  flex-wrap: wrap;
  margin-top: 22px;
  font-family: var(--font-latin);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.hero-meta span { position: relative; }
.hero-meta span + span::before {
  content: "◆";
  position: absolute;
  left: clamp(-22px, -2.2vw, -11px);
  top: 0;
  font-size: 7px;
  opacity: 0.5;
}

/* 滚动提示 */
.scroll-hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 6px;
  font-family: var(--font-latin);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
  z-index: 2;
}

.scroll-hint svg { width: 22px; height: 34px; }

/* 漂浮的小精灵 */
.fairy {
  position: absolute;
  width: 46px;
  animation: float 5.5s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
}
.fairy--a { top: 16%; left: 11%; animation-delay: -0.4s; }
.fairy--b { top: 26%; right: 12%; width: 34px; animation-delay: -2.6s; }
.fairy--c { bottom: 22%; left: 18%; width: 26px; animation-delay: -4.1s; }

@media (max-width: 640px) {
  /* 工具条固定在右下角，会把居中的滚动提示压住，所以提示要抬高 */
  .scroll-hint { bottom: 96px; }
  .btn { font-size: 13px; padding: 8px 12px; }
  .toolbar { right: 12px; bottom: 12px; gap: 6px; }

  .fairy--a { top: 33%; left: 5%; width: 34px; }
  .fairy--b { top: 40%; right: 6%; width: 28px; }
  .fairy--c { display: none; }
}

@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
  50% { transform: translate3d(6px, -20px, 0) rotate(4deg); }
}

/* ============================================================
   英雄页 · 立绘
   ============================================================ */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}

.split--flip .split-media { order: 2; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--flip .split-media { order: 0; }
}

.media {
  position: relative;
  background:
    radial-gradient(70% 60% at 50% 40%, rgba(255, 253, 246, 0.95), rgba(240, 230, 208, 0.5));
  border-radius: 4px;
}

.media svg { display: block; width: 100%; height: auto; }

/* 图注 */
.caption {
  font-family: var(--font-hand);
  font-size: 13.5px;
  color: var(--ink-faint);
  text-align: center;
  margin-top: 10px;
  letter-spacing: 0.05em;
}

/* 属性小列表 */
.stats {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.stats li {
  display: grid;
  grid-template-columns: 5.6em 1fr;
  align-items: center;
  gap: 14px;
  font-size: 15px;
}

.stats .k {
  font-family: var(--font-hand);
  color: var(--ink-soft);
  font-size: 14px;
}

.bar {
  position: relative;
  height: 12px;
  border: 1.5px solid var(--ink-soft);
  border-radius: 8px 6px 9px 5px / 6px 9px 5px 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
}

.bar i {
  position: absolute;
  inset: 1px auto 1px 1px;
  width: 0;
  background: repeating-linear-gradient(-38deg, var(--ink-soft) 0 2px, transparent 2px 5px);
  border-radius: 6px;
  transition: width 1.1s cubic-bezier(0.22, 0.8, 0.2, 1);
}

.is-in .bar i { width: var(--v, 50%); }

/* ============================================================
   三角力量
   ============================================================ */

.triforce-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 3vw, 34px);
  margin-top: 30px;
}

@media (max-width: 720px) { .triforce-grid { grid-template-columns: 1fr; } }

.virtue {
  text-align: center;
  padding: 26px 16px 22px;
  position: relative;
}

.virtue svg { width: 74px; height: 74px; margin: 0 auto 12px; }

.virtue h3 { margin-bottom: 4px; }
.virtue p { margin: 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.8; }

.virtue::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(87, 78, 69, 0.35);
  border-radius: 12px 9px 14px 8px / 9px 13px 8px 12px;
  transform: rotate(var(--tilt, 0deg));
  pointer-events: none;
}

/* ============================================================
   城堡全景
   ============================================================ */

.panorama {
  position: relative;
  margin-top: 26px;
  border-radius: 6px;
  overflow: hidden;
}

.panorama svg { display: block; width: 100%; height: auto; }

/* ============================================================
   地图
   ============================================================ */

.map-wrap {
  position: relative;
  margin-top: 26px;
  border-radius: 6px;
  background: linear-gradient(160deg, #f6edd6, #eee0c0);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

.map-wrap svg { display: block; width: 100%; height: auto; }

.map-title {
  font-family: var(--font-brush);
  font-size: 30px;
  fill: var(--ink);
  letter-spacing: 0.12em;
}

/* 地图图钉 */
.pin {
  cursor: pointer;
  outline: none;
  /* 让整个图钉（含标签）都是可点区域，不然只有那个小红点能碰到 */
  pointer-events: bounding-box;
}

.pin .pin-dot {
  fill: var(--red);
  stroke: var(--ink);
  stroke-width: 1.6;
  transition: transform 0.25s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.pin:hover .pin-dot,
.pin:focus-visible .pin-dot { transform: scale(1.35); }

.pin .pin-ring {
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.pin:hover .pin-ring,
.pin:focus-visible .pin-ring { animation: ping 1.4s ease-out infinite; }

@keyframes ping {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2.4); opacity: 0; }
}

.pin text {
  font-family: var(--font-hand);
  font-size: 15px;
  fill: var(--ink);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.pin:hover text,
.pin:focus-visible text { opacity: 1; }

/* ============================================================
   卡片：道具 / 怪物
   ============================================================ */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: clamp(14px, 2.4vw, 26px);
  margin-top: 30px;
}

.card {
  position: relative;
  padding: 20px 16px 18px;
  text-align: center;
  background: linear-gradient(170deg, rgba(255, 253, 246, 0.95), rgba(244, 235, 214, 0.8));
  border: 1.6px solid rgba(87, 78, 69, 0.4);
  border-radius: 14px 10px 16px 9px / 10px 15px 9px 14px;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.32s ease;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.5) inset, 0 10px 20px -18px rgba(90, 70, 40, 0.7);
}

.card:hover {
  transform: rotate(0deg) translateY(-7px) scale(1.025);
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.6) inset, 0 22px 34px -22px rgba(90, 70, 40, 0.65);
  z-index: 3;
}

.card .art { width: 100%; max-width: 132px; margin: 0 auto 12px; }

.card h3 { font-size: 19px; margin-bottom: 2px; }

.card .latin {
  font-family: var(--font-latin);
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 8px;
}

.card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* 卡片排线：平时是淡淡的一层，悬停时加深 */
.card .shade { opacity: 0.18; transition: opacity 0.4s ease; }
.card .shade-x { opacity: 0.14; transition: opacity 0.4s ease; }
.card .shade-135 { opacity: 0.16; transition: opacity 0.4s ease; }

.card:hover .shade { opacity: 0.55; }
.card:hover .shade-x { opacity: 0.42; }
.card:hover .shade-135 { opacity: 0.5; }

/* 三列卡片：角色速写（3 张）和料理（6 张）用，避免出现空列 */
.cards--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 940px;
  margin-inline: auto;
}

@media (max-width: 820px) {
  .cards--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .cards--three { grid-template-columns: 1fr; max-width: 380px; }
}

/* 竖版卡片：角色速写用 */
.card--tall { padding-top: 16px; }
.card--tall .art { max-width: 100%; }

/* 稀有度角标 */
.rank {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: var(--font-latin);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

/* 危险等级：骷髅 */
.danger { letter-spacing: 0.12em; font-size: 11px; }

/* ============================================================
   旅途大事记 · 时间线
   ============================================================ */

.stops {
  position: relative;
  list-style: none;
  margin: 38px 0 0;
  padding: 0;
  max-width: 800px;
}

/* ⚠️ SVG 是替换元素：绝对定位时 top+bottom 拉伸不了它，
   必须显式给 height，否则它会按 viewBox 比例算出 30px 高的小短条。 */
.stops-line {
  position: absolute;
  left: 25px;
  top: 30px;
  width: 6px;
  height: calc(100% - 60px);
  overflow: visible;
  pointer-events: none;
}

.stop {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 22px;
  padding: 15px 0;
}

.stop-num {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  font-family: var(--font-latin);
  font-size: 19px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: var(--paper);
  border: 2px solid rgba(87, 78, 69, 0.5);
  border-radius: 52% 48% 50% 50% / 50% 52% 48% 50%;
  z-index: 1;
  transition: transform 0.3s ease, color 0.3s ease;
}

.stop:hover .stop-num {
  transform: rotate(-4deg) scale(1.06);
  color: var(--ink);
}

.stop-body { padding-top: 4px; }

.stop-body h3 {
  margin-bottom: 3px;
  font-size: 20px;
}

.stop-body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 60ch;
}

@media (max-width: 560px) {
  .stop { grid-template-columns: 46px minmax(0, 1fr); gap: 16px; }
  .stop-num { width: 46px; height: 46px; font-size: 16px; }
  .stops-line { left: 20px; width: 6px; }
}

/* ============================================================
   结语
   ============================================================ */

.closing {
  text-align: center;
  padding-block: clamp(60px, 9vw, 110px);
}

.closing .sign {
  font-family: var(--font-brush);
  font-size: clamp(26px, 3.4vw, 38px);
  margin-top: 26px;
}

.closing .sign small {
  display: block;
  font-family: var(--font-latin);
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--ink-faint);
  margin-top: 6px;
}

footer {
  text-align: center;
  padding: 34px 20px 52px;
  font-size: 13px;
  color: var(--ink-faint);
  line-height: 1.9;
}

footer a { color: var(--ink-soft); }

/* ============================================================
   目录 & 页码 & 章节索引
   ============================================================ */

main { counter-reset: page 0; }
.sheet { counter-increment: page; }
.sheet--toc { counter-increment: none; }

/* 页码：手写在纸页底部 */
.sheet::after {
  content: "— " counter(page, decimal-leading-zero) " —";
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  font-family: var(--font-latin);
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--ink-faint);
  opacity: 0.75;
  pointer-events: none;
}

.sheet--toc::after { content: none; }

.toc-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  max-width: 620px;
}

.toc-list a {
  display: grid;
  grid-template-columns: 3em auto 1fr 3em;
  align-items: baseline;
  gap: 0.55em;
  padding: 9px 8px;
  color: inherit;
  text-decoration: none;
  border-radius: 10px 7px 11px 6px / 7px 10px 6px 9px;
  transition: background 0.25s ease, transform 0.25s ease;
}

.toc-list a:hover,
.toc-list a:focus-visible {
  background: rgba(217, 164, 65, 0.16);
  transform: translateX(5px);
}

.toc-num {
  font-family: var(--font-latin);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.toc-name {
  font-family: var(--font-hand);
  font-size: 19px;
  color: var(--ink);
}

.toc-dots {
  border-bottom: 2px dotted rgba(87, 78, 69, 0.6);
  transform: translateY(-0.32em);
  min-width: 24px;
}

.toc-page {
  font-family: var(--font-latin);
  font-size: 15px;
  color: var(--ink-faint);
  text-align: right;
}

/* 手抄本上的红印章 */
.seal {
  position: absolute;
  right: clamp(30px, 8vw, 110px);
  top: clamp(110px, 16vw, 190px);
  width: clamp(84px, 9vw, 112px);
  height: auto;
  opacity: 0.78;
  pointer-events: none;
}

.seal-txt {
  font-family: var(--font-brush);
  font-size: 34px;
  fill: var(--red);
  text-anchor: middle;
}

@media (max-width: 1000px) {
  .seal { display: none; }
}

.toc-doodle {
  position: absolute;
  right: clamp(24px, 6vw, 76px);
  bottom: clamp(30px, 6vw, 70px);
  width: clamp(96px, 12vw, 150px);
  height: auto;
  opacity: 0.8;
  pointer-events: none;
}

@media (max-width: 860px) {
  /* 手抄本上的红印章 */
.seal {
  position: absolute;
  right: clamp(30px, 8vw, 110px);
  top: clamp(110px, 16vw, 190px);
  width: clamp(84px, 9vw, 112px);
  height: auto;
  opacity: 0.78;
  pointer-events: none;
}

.seal-txt {
  font-family: var(--font-brush);
  font-size: 34px;
  fill: var(--red);
  text-anchor: middle;
}

@media (max-width: 1000px) {
  .seal { display: none; }
}

.toc-doodle { display: none; }
  .toc-name { font-size: 17px; }
}

/* 右侧章节索引 */
.rail {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 9px;
  z-index: 9995;
}

.rail a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  color: var(--ink-faint);
  text-decoration: none;
}

.rail i {
  font-family: var(--font-hand);
  font-style: normal;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  background: linear-gradient(170deg, rgba(255, 253, 246, 0.92), rgba(240, 230, 208, 0.86));
  border-radius: 8px 6px 9px 5px / 6px 8px 5px 7px;
  padding: 2px 8px;
}

.rail b {
  display: block;
  width: 20px;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.4;
  transition: width 0.3s ease, opacity 0.3s ease;
}

.rail a:hover i,
.rail a:focus-visible i,
.rail a.is-active i { opacity: 1; transform: none; }

.rail a:hover b,
.rail a:focus-visible b { opacity: 0.85; width: 28px; }

.rail a.is-active { color: var(--ink); }
.rail a.is-active b { width: 32px; opacity: 1; }

@media (max-width: 1180px) { .rail { display: none; } }

/* ============================================================
   工具条
   ============================================================ */

.toolbar {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 8px;
  z-index: 9997;
}

.btn {
  font-family: var(--font-hand);
  font-size: 14px;
  color: var(--ink-soft);
  background: linear-gradient(170deg, rgba(255, 253, 246, 0.96), rgba(240, 230, 208, 0.9));
  border: 1.5px solid rgba(87, 78, 69, 0.5);
  border-radius: 12px 9px 13px 8px / 9px 12px 8px 11px;
  padding: 9px 15px;
  cursor: pointer;
  box-shadow: 0 8px 18px -14px rgba(90, 70, 40, 0.9);
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px) rotate(-0.6deg);
  color: var(--ink);
  box-shadow: 0 14px 22px -16px rgba(90, 70, 40, 0.9);
}

.btn:active { transform: translateY(0) scale(0.97); }

/* 铅笔笔迹画布 */
.pencil-trail {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9996;
}

/* ============================================================
   出场动画
   ============================================================ */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 0.8, 0.2, 1);
}

[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal="fade"] { transform: none; }

[data-reveal="left"] { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }

[data-reveal="sketch"] {
  transform: rotate(-1.2deg) scale(0.965);
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.9, 0.2, 1);
}

[data-reveal="sketch"].is-in { transform: rotate(var(--tilt, 0deg)); }

/* 描边绘制动画 */
.draw-ready {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}

.draw-go {
  transition: stroke-dashoffset var(--dur, 1.1s) cubic-bezier(0.35, 0.15, 0.2, 1) var(--delay, 0s);
  stroke-dashoffset: 0;
}

/* 装饰性虚线：只淡入，不参与描边动画 */
.line-fade { opacity: 0; transition: opacity 0.9s ease var(--delay, 0.4s); }
.line-fade.is-on { opacity: var(--o, 1); }

/* 水彩淡入 */
.wash-ready { opacity: 0; }
.wash-go { transition: opacity 1.1s ease var(--delay, 0.5s); opacity: 1; }

/* 尊重减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .draw-ready { stroke-dasharray: none; stroke-dashoffset: 0; }
  .wash-ready { opacity: 1; }
  .fairy { animation: none; }
  .pencil-trail { display: none; }
}

/* ============================================================
   打印：把这一页变成一本可以翻的小册子
   ============================================================ */
@media print {
  @page { margin: 14mm; }

  /* 提灯模式下点打印，必须强制变回浅色纸，不然印出来是一本黑书 */
  :root,
  html.lamp-on {
    --paper: #ffffff;
    --paper-2: #ffffff;
    --paper-3: #ffffff;
    --ink: #241f1a;
    --ink-soft: #574e45;
    --ink-faint: #8a7e70;
  }

  html.lamp-on .colors { mix-blend-mode: multiply !important; opacity: 1 !important; }
  html.lamp-on #hatch-45 line,
  html.lamp-on #hatch-135 line,
  html.lamp-on #hatch-soft line,
  html.lamp-on #hatch-cross path { stroke: #574e45 !important; }

  body {
    background: #fff;
    font-size: 12pt;
  }

  /* 屏幕上那些"气氛"和"控件"都不打印 */
  body::before,
  body::after,
  .paper-fiber,
  .lamp-glow,
  .toolbar,
  .rail,
  .pencil-trail,
  .scroll-hint,
  .fairy,
  /* 手抄本上的红印章 */
.seal {
  position: absolute;
  right: clamp(30px, 8vw, 110px);
  top: clamp(110px, 16vw, 190px);
  width: clamp(84px, 9vw, 112px);
  height: auto;
  opacity: 0.78;
  pointer-events: none;
}

.seal-txt {
  font-family: var(--font-brush);
  font-size: 34px;
  fill: var(--red);
  text-anchor: middle;
}

@media (max-width: 1000px) {
  .seal { display: none; }
}

.toc-doodle { display: none !important; }

  /* 未触发的出场动画在纸上必须全部是"已完成"状态 */
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .wash-ready { opacity: 1 !important; }
  .line-fade { opacity: var(--o, 1) !important; }
  .draw-ready { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .ln--ghost { opacity: 0.5 !important; }

  .hero {
    min-height: auto;
    break-after: page;
    background: #fff;
  }

  .sheet {
    width: 100%;
    padding: 0 0 14mm;
    margin: 0;
    background: none;
    box-shadow: none;
    break-after: page;
    break-inside: avoid;
  }

  .sheet + .sheet { margin-top: 0; }

  .card,
  .stop,
  .virtue,
  .panorama,
  .map-wrap { break-inside: avoid; }

  .card { transform: none !important; }

  a { color: inherit; text-decoration: none; }
}

/* ============================================================
   提灯模式 —— 把纸换成夜色，光晕跟着鼠标
   ============================================================ */

.lamp-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9994;
  opacity: 0;
  transition: opacity 0.9s ease;
  background: radial-gradient(
    circle 340px at var(--lx, 50%) var(--ly, 38%),
    rgba(255, 216, 145, 0.34),
    rgba(255, 186, 110, 0.14) 46%,
    rgba(255, 170, 90, 0) 74%
  );
  mix-blend-mode: soft-light;
}

html.lamp-on .lamp-glow { opacity: 1; }

html.lamp-on {
  --paper: #241f1a;
  --paper-2: #2c2620;
  --paper-3: #332b24;
  --paper-edge: #4a3f33;
  --ink: #f2e7cc;
  --ink-soft: #cbbca0;
  --ink-faint: #9b8c75;
  --ink-wash: rgba(242, 231, 204, 0.08);
  --paper-shadow: rgba(0, 0, 0, 0.55);
}

html.lamp-on body { background-color: #14110e; }

html.lamp-on .hero {
  background: radial-gradient(90% 60% at 50% 12%, #3b3229 0%, #241f1a 46%, #131009 100%);
}

html.lamp-on .sheet {
  background: linear-gradient(178deg, rgba(47, 40, 33, 0.97), rgba(37, 32, 27, 0.96) 60%, rgba(30, 26, 22, 0.98));
  box-shadow: 0 1px 0 rgba(255, 240, 210, 0.06) inset, 0 20px 44px -24px rgba(0, 0, 0, 0.85);
}

/* 水彩层在夜里改用 screen，让颜色在暗纸上「透光」 */
html.lamp-on .colors { mix-blend-mode: screen; opacity: 0.62; }

/* 排线图案是用属性写死颜色的，夜里要单独换成浅色 */
html.lamp-on #hatch-45 line,
html.lamp-on #hatch-135 line,
html.lamp-on #hatch-soft line,
html.lamp-on #hatch-cross path { stroke: #cbbca0; }

html.lamp-on body::before { mix-blend-mode: screen; opacity: 0.12; }
html.lamp-on .paper-fiber { mix-blend-mode: screen; opacity: 0.07; }

html.lamp-on .media {
  background: radial-gradient(70% 60% at 50% 40%, rgba(70, 60, 48, 0.9), rgba(40, 34, 28, 0.5));
}

html.lamp-on .card {
  background: linear-gradient(170deg, rgba(54, 46, 38, 0.95), rgba(38, 32, 27, 0.9));
  border-color: rgba(203, 188, 160, 0.35);
  box-shadow: 0 2px 0 rgba(255, 240, 210, 0.05) inset, 0 12px 24px -20px rgba(0, 0, 0, 0.9);
}

html.lamp-on .card:hover {
  box-shadow: 0 2px 0 rgba(255, 240, 210, 0.08) inset, 0 24px 36px -24px rgba(0, 0, 0, 0.95);
}

html.lamp-on .virtue::before { border-color: rgba(203, 188, 160, 0.28); }

html.lamp-on .map-wrap {
  background: linear-gradient(160deg, #322a22, #241f1a);
  box-shadow: 0 1px 0 rgba(255, 240, 210, 0.05) inset;
}

html.lamp-on .bar { background: rgba(0, 0, 0, 0.35); }

html.lamp-on .stop-num {
  background: linear-gradient(170deg, rgba(54, 46, 38, 0.96), rgba(38, 32, 27, 0.92));
  border-color: rgba(203, 188, 160, 0.35);
}

html.lamp-on .btn,
html.lamp-on .rail i {
  background: linear-gradient(170deg, rgba(58, 49, 40, 0.96), rgba(40, 34, 28, 0.92));
  border-color: rgba(203, 188, 160, 0.4);
  color: var(--ink-soft);
}

html.lamp-on .btn:hover { color: var(--ink); }

html.lamp-on .toc-list a:hover,
html.lamp-on .toc-list a:focus-visible { background: rgba(240, 200, 120, 0.14); }

html.lamp-on .toc-dots { border-bottom-color: rgba(203, 188, 160, 0.55); }

/* 夜里的小精灵会自己发光 */
html.lamp-on .fairy { filter: brightness(1.35) drop-shadow(0 0 8px rgba(255, 220, 150, 0.65)); }

@media (prefers-reduced-motion: reduce) {
  .lamp-glow { transition: none; }
}