/* 哑光低饱和极简 — 米纸 / 淡墨 / 灰豆沙 */
:root{
  --paper: #efe9df;
  --paper-2:#e6dfd2;
  --ink:   #2c2a26;
  --ink-2: #55524c;
  --muted: #8a857c;
  --accent:#a89a86;
  --line:  #c9c1b3;
  --shadow-none: none;
  --shadow-book:
    0 40px 70px -30px rgba(53,45,35,.42),
    0 18px 40px -18px rgba(53,45,35,.30),
    0 4px 12px -6px rgba(53,45,35,.20);
  --page-w: min(44vw, 540px);
  --page-h: min(66vh, 720px);
  --flip: .9s;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:"Noto Serif SC","Cormorant Garamond",Georgia,"Songti SC",serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 20% -10%, #f6f1e7 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 110%, #e9e2d4 0%, transparent 55%),
    #f2ede3;
  min-height:100%;
  overflow:hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.02em;
  touch-action: manipulation;
}

/* 顶栏 */
.topbar{
  position:fixed; inset:0 0 auto 0;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 32px;
  z-index:5;
  padding-top: calc(22px + env(safe-area-inset-top));
}
.brand{display:flex;align-items:center;gap:14px}
.brand-mark{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--line);
  color:var(--ink-2);
  font-family:"Cormorant Garamond",serif;
  font-size:18px; font-weight:500;
  background:rgba(255,255,255,.4);
  backdrop-filter: blur(6px);
}
.brand-name{
  font-size:15px; color:var(--ink-2); letter-spacing:.25em;
}
.brand-name em{
  font-style:italic; font-family:"Cormorant Garamond",serif;
  color:var(--muted); margin-left:8px; letter-spacing:.15em;
  font-size:13px;
}
.meta{
  font-family:"Cormorant Garamond",serif;
  color:var(--muted); font-size:14px; letter-spacing:.2em;
}

/* 舞台 */
.stage{
  height:100vh; height:100dvh;
  display:grid; place-items:center;
  padding:80px 24px 60px;
}
.hint{
  position:absolute; bottom:36px; left:0; right:0;
  text-align:center; color:var(--muted);
  font-size:12px; letter-spacing:.3em;
  transition: opacity .8s ease;
  pointer-events:none;
}
.hint.fade{ opacity:0 }

/* 书本容器 */
.book{
  position:relative;
  width:calc(var(--page-w) * 2);
  height:var(--page-h);
  perspective: 2200px;
}
/* 整本书的唯一投影 —— 一个实体伪元素承担；避免每张纸叠加阴影 */
.book::after{
  content:""; position:absolute;
  inset: 2% 4% -2% 4%;
  background: rgba(230, 223, 210, .01); /* 需要有可见背景才产生 box-shadow */
  border-radius: 8px;
  box-shadow: var(--shadow-book);
  z-index:-2;
  pointer-events:none;
}
.book-shadow{
  position:absolute; inset:auto 6% -18px 6%;
  height:22px; filter:blur(14px);
  background: radial-gradient(50% 100% at 50% 0%, rgba(50,40,28,.28), transparent 70%);
  z-index:-1;
  pointer-events:none;
}
.pages{
  position:absolute; inset:0;
  transform-style:preserve-3d;
}

/* 每一张纸 */
.leaf{
  position:absolute; top:0; left:50%;
  width:var(--page-w); height:100%;
  transform-origin: left center;
  transform-style:preserve-3d;
  transition: transform var(--flip) cubic-bezier(.7,.05,.25,1);
  will-change: transform;
}
.leaf .side{
  position:absolute; inset:0;
  backface-visibility:hidden;
  background: var(--paper);
  border-radius: 4px 12px 12px 4px;
  /* 只保留装订侧的内阴影；外阴影由 .book::after 统一承担，避免多层叠加 */
  box-shadow: inset 8px 0 20px -14px rgba(60,45,25,.28);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.leaf .side.back{
  transform: rotateY(180deg);
  border-radius: 12px 4px 4px 12px;
  box-shadow: inset -8px 0 20px -14px rgba(60,45,25,.28);
}
/* 当前正在翻的那一页保留一点点柔和阴影 —— 用于让"抬起的页"感觉有厚度 */
.leaf.turning .side{
  box-shadow:
    inset 8px 0 20px -14px rgba(60,45,25,.28),
    0 20px 40px -20px rgba(53,45,35,.4);
}
.leaf.turning .side.back{
  box-shadow:
    inset -8px 0 20px -14px rgba(60,45,25,.28),
    0 20px 40px -20px rgba(53,45,35,.4);
}

/* 纸张纹理 */
.leaf .side::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 0% 50%, rgba(0,0,0,.06), transparent 45%),
    radial-gradient(120% 80% at 100% 50%, rgba(0,0,0,.03), transparent 45%),
    repeating-linear-gradient(45deg, rgba(120,100,60,.02) 0 2px, transparent 2px 6px);
  pointer-events:none;
}
.leaf .side::after{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(70,55,30,.05) 1px, transparent 1px),
    radial-gradient(rgba(70,55,30,.04) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: multiply; opacity:.55;
  pointer-events:none;
}

/* 装订侧阴影 */
.leaf .side.front{ background-image: linear-gradient(90deg, rgba(0,0,0,.08), transparent 12%); }
.leaf .side.back{  background-image: linear-gradient(270deg, rgba(0,0,0,.08), transparent 12%); }

/* 作品区 */
.artwork{
  flex:1; margin:22px 26px 8px;
  display:grid; place-items:center;
  background:
    linear-gradient(#efe9df,#efe9df) padding-box,
    linear-gradient(180deg, #d9d0be, #b9ae95) border-box;
  border:1px solid transparent;
  border-radius:4px;
  padding:12px;
  position:relative;
  overflow:hidden;
}
.artwork img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  filter: saturate(.78) contrast(.98);
  border-radius:2px;
  transition: filter .5s ease, opacity .5s ease;
  position: relative; z-index: 1;
}
/* 未加载高清前，thumb 会显得糊 —— 用 blur + 暗一点让它像"待冲印" */
.artwork img.lazy-img:not(.loaded){
  filter: saturate(.7) contrast(.95) blur(6px);
}
.artwork svg.lazy-svg:not(.loaded) image{
  filter: blur(6px);
}
.artwork.blank{ opacity:0; border-color: transparent; background:transparent }

/* 占位米纸底 —— 在图片下沉，图片透明区能看到它 */
.artwork .placeholder{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 50%, #eee5d3 0%, #ded3bd 100%);
  z-index:0;
}
.artwork .placeholder::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(110deg,
    transparent 20%, rgba(255,255,255,.35) 40%, transparent 60%);
  animation: shimmer 2.4s ease-in-out infinite;
}
@keyframes shimmer{
  0%   { transform: translateX(-40%) }
  100% { transform: translateX(40%) }
}
/* 图加载好后，占位淡出 */
.artwork:has(img.loaded) .placeholder,
.artwork:has(svg.loaded) .placeholder{ opacity:0; transition: opacity .6s ease }

/* 跨页横图：用 SVG viewBox 精确切出图的左/右半，两半在书脊处对齐 */
.side.span .artwork.span{
  padding:0; margin:0; border:none; background:transparent;
  position:absolute; inset:0; overflow:hidden;
}
.side.span .span-svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  padding: 22px 0;
  box-sizing: border-box;
  filter: saturate(.78) contrast(.98);
  display:block;
}
.side.span .caption{
  position:absolute; left:22px; right:22px; bottom:10px;
  padding:0; z-index:2;
  color: rgba(80,72,60,.85);
  text-shadow: 0 1px 2px rgba(255,250,240,.5);
}

/* caption */
.caption{
  padding: 6px 26px 22px;
  display:flex; justify-content:space-between; align-items:baseline;
  color:var(--ink-2);
}
.caption .title{
  font-size:13px; letter-spacing:.18em;
  overflow:hidden; text-overflow: ellipsis; white-space:nowrap; max-width:70%;
}
.caption .num{
  font-family:"Cormorant Garamond",serif; font-style:italic;
  color:var(--muted); font-size:13px; letter-spacing:.1em;
}

/* 封面 & 封底 */
.leaf.cover .side.front, .leaf.back-cover .side.back{
  background:
    radial-gradient(120% 100% at 50% 0%, #d9cfbb 0%, #c7bba4 45%, #b3a689 100%);
  color:#2b271f;
}
.leaf.cover .side.front .artwork,
.leaf.back-cover .side.back .artwork{ display:none }
.cover-inner{
  position:absolute; inset:0;
  display:grid; place-items:center; text-align:center;
  padding: 40px;
}
.cover-inner .kanji{
  font-size: clamp(56px, 8vw, 96px);
  font-weight:400; letter-spacing:.2em;
  color:#2b241a;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.cover-inner .en{
  margin-top:14px;
  font-family:"Cormorant Garamond",serif; font-style:italic;
  letter-spacing:.4em; color:#524836;
}
.cover-inner .rule{
  width:60px; height:1px; background:#7a6e56; margin:22px auto;
}
.cover-inner .sub{
  font-size:12px; color:#5b503b; letter-spacing:.35em;
}

/* 翻转 */
.leaf.flipped{ transform: rotateY(-180deg); }
.leaf .side .glare{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  opacity:0; transition: opacity .5s ease;
  pointer-events:none;
}
.leaf.turning .side .glare{ opacity:.35 }

/* 导航按钮 */
.nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:transparent; border:1px solid var(--line);
  color:var(--ink-2);
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  cursor:pointer;
  transition: background .3s, color .3s, transform .3s, opacity .3s;
  z-index:20;
  backdrop-filter: blur(6px);
  -webkit-tap-highlight-color: transparent;
}
.nav:hover{ background:rgba(255,255,255,.5); color:var(--ink); }
.nav:active{ transform:translateY(-50%) scale(.94) }
.nav.prev{ left:-72px }
.nav.next{ right:-72px }
.nav[disabled]{ opacity:.2; pointer-events:none }

/* 页脚 */
.footlink{
  position:fixed; left:0; right:0;
  bottom: calc(16px + env(safe-area-inset-bottom));
  text-align:center; color:var(--muted);
  font-size:11px; letter-spacing:.35em;
  display:flex; gap:14px; justify-content:center;
  pointer-events:none;
}
.footlink .dot{opacity:.6}

.empty{
  color:var(--muted); text-align:center; padding:24px;
  font-size:13px; letter-spacing:.15em; line-height:1.9;
}
.empty code{
  background:rgba(0,0,0,.05); padding:2px 6px; border-radius:4px;
  font-family: ui-monospace, Menlo, monospace; font-size:12px;
}

/* ---------- 移动端（横屏手机）—— 用户主动横过了，走"接近桌面"的对开 ---------- */
@media (orientation: landscape) and (hover: none) and (max-height: 500px){
  :root{
    --page-h: min(calc(100dvh - 60px), 440px);
    --page-w: min(calc(var(--page-h) * 0.72), 44dvw);
    --flip: .9s;
  }
  .topbar{ padding: 4px 12px; padding-top: calc(2px + env(safe-area-inset-top)); }
  .brand-mark{ width:24px; height:24px; font-size:12px }
  .brand-name{ font-size:11px; letter-spacing:.2em }
  .brand-name em{ font-size:10px; margin-left:6px }
  .meta{ font-size:11px }

  .stage{ padding: 34px 8px 8px }

  .artwork{ margin: 12px 14px 4px; padding: 6px }
  .caption{ padding: 4px 14px 10px }
  .caption .title{ font-size:11px; letter-spacing:.15em }
  .caption .num{ font-size:11px }

  .nav{ width:36px; height:36px; background: rgba(255,255,255,.65); }
  .nav.prev{ left:6px }
  .nav.next{ right:6px }

  .hint, .footlink{ display:none }

  .cover-inner{ padding: 20px }
  .cover-inner .kanji{ font-size: clamp(32px, 7dvh, 60px) }
  .cover-inner .sub{ letter-spacing:.25em; font-size:10px }
  .cover-inner .en{ font-size:12px; letter-spacing:.3em }
}

@media (prefers-reduced-motion: reduce){
  .leaf{ transition: none }
}