/* ============================================================
   folder.css — 大厅（index.html）专属
   加载动画 / 3D 文件夹 / 索引标签 / 汉堡菜单 / 侧边栏 / 底部标签栏
   依赖 base.css
   ============================================================ */

:root {
  /* 文件夹尺寸：宽度同时受限于视口宽（摊开 2W）与高（书高 1.34W ≤ 82vh） */
  --bw: clamp(300px, min(46vw, 61vh), 560px);
  --bh: calc(var(--bw) * 1.34);
}

html, body { height: 100%; overflow: hidden; }

/* ============================================================
   加载动画：文件夹不断打开并翻页
   双面书页（backface-visibility）+ translateZ 物理分层，
   右缘/下缘纸边线 + 书脊 → 厚度感；级联节奏 + 呼吸停顿。
   ============================================================ */
#loader {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 30px;
  background:
    radial-gradient(900px 600px at 50% 30%, rgba(255, 255, 255, .6), transparent 65%),
    var(--cream);
  transition: opacity .6s ease, visibility 0s .6s;
}
#loader.loader-hide { opacity: 0; visibility: hidden; pointer-events: none; }
#loader.loader-skip { display: none; }

.loader-scene { perspective: 1200px; }

.loader-book {
  position: relative;
  width: 190px; height: 250px;
  transform-style: preserve-3d;
  animation: k-sway 5.8s ease-in-out infinite;
}
@keyframes k-sway {
  0%, 100% { transform: rotateX(22deg) rotateY(-17deg); }
  50%      { transform: rotateX(19deg) rotateY(-13deg); }
}

/* ---- 封底（z=0 基准面） ---- */
.l-back {
  position: absolute; inset: 0;
  background: linear-gradient(150deg, #EFE7D3, #E3D7BC);
  border-radius: 6px 13px 13px 6px;
  box-shadow: 0 22px 38px rgba(74, 66, 56, .26);
  transform: translateZ(0);
}

/* ---- 书脊 ---- */
.l-spine {
  position: absolute; top: 1px; bottom: 1px; left: -3px; width: 8px;
  background: linear-gradient(90deg, #D8CCAF, #E9E0CC);
  border-radius: 6px 0 0 6px;
  transform: translateZ(1px);
}

/* ---- 纸边厚度（右缘 + 下缘） ---- */
.l-edges {
  position: absolute; top: 6px; bottom: 6px; right: 1px; width: 7px;
  border-radius: 0 3px 3px 0;
  background: repeating-linear-gradient(90deg, #FDFBF3 0 1.4px, #DCD2BA 1.4px 2.3px);
  box-shadow: 1px 0 2px rgba(74, 66, 56, .12);
  transform: translateZ(2px);
}
.l-edges-b {
  position: absolute; left: 8px; right: 2px; bottom: 1px; height: 6px;
  border-radius: 0 0 4px 4px;
  background: repeating-linear-gradient(0deg, #FDFBF3 0 1.4px, #DCD2BA 1.4px 2.3px);
  transform: translateZ(2px);
}

/* ---- 翻页叶片：容器旋转，正反双面 ---- */
.l-leaf {
  position: absolute; top: 4px; bottom: 4px; left: 5px; right: 3px;
  transform-origin: left center;
  transform-style: preserve-3d;
  will-change: transform;
}
.l-face {
  position: absolute; inset: 0;
  border-radius: 5px 11px 11px 5px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.l-f {
  background:
    var(--paper-noise),
    var(--paper);
  border: 1px solid rgba(74, 66, 56, .07);
  border-left: none;
  box-shadow: inset 2px 0 5px rgba(74, 66, 56, .05);
}
.l-b {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(transparent 0 22px, var(--line) 22px 23px),
    #F1E9D4;
  border: 1px solid rgba(74, 66, 56, .14);
  box-shadow: -2px 2px 6px rgba(74, 66, 56, .16);
}

/* 三张内页：translateZ 分层，级联翻页。
   关键点：翻过去后 translateZ 取负——局部 -z 在 -165° 时指向观众，
   让翻走的页面停在封底【前面】，否则会被封底挡住"消失" */
.l-leaf0 { animation: k-leaf0 5.8s cubic-bezier(.6, .02, .3, 1) infinite; }
.l-leaf1 { animation: k-leaf1 5.8s cubic-bezier(.6, .02, .3, 1) infinite; }
.l-leaf2 { animation: k-leaf2 5.8s cubic-bezier(.6, .02, .3, 1) infinite; }

@keyframes k-leaf0 {
  0%, 13%   { transform: rotateY(0deg) translateZ(6px); }
  27%, 43%  { transform: rotateY(-165deg) translateZ(-6px); }
  57%, 100% { transform: rotateY(0deg) translateZ(6px); }
}
@keyframes k-leaf1 {
  0%, 19%   { transform: rotateY(0deg) translateZ(4px); }
  33%, 39%  { transform: rotateY(-165deg) translateZ(-4px); }
  52%, 100% { transform: rotateY(0deg) translateZ(4px); }
}
@keyframes k-leaf2 {
  0%, 25%   { transform: rotateY(0deg) translateZ(2px); }
  39%, 45%  { transform: rotateY(-166deg) translateZ(-2px); }
  60%, 100% { transform: rotateY(0deg) translateZ(2px); }
}

/* 封面叶（最上层 z=8） */
.l-coverleaf { animation: k-coverleaf 5.8s cubic-bezier(.58, .03, .28, 1) infinite; }
.l-coverleaf .l-f {
  background: linear-gradient(155deg, #F3ECDC, #E6DCC6);
  border: 1px solid rgba(74, 66, 56, .10);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 2px 2px 8px rgba(74, 66, 56, .14);
}
.l-coverleaf .l-b {
  background: linear-gradient(155deg, #EFE7D2, #E2D6BA);
  box-shadow: -2px 2px 8px rgba(74, 66, 56, .18);
}
.l-coverleaf span {
  font-family: var(--hand-title);
  font-size: 40px; color: var(--ink);
  transform: rotate(-4deg);
}
@keyframes k-coverleaf {
  0%, 4%    { transform: rotateY(0deg) translateZ(8px); }
  18%, 50%  { transform: rotateY(-160deg) translateZ(-8px); }
  66%, 100% { transform: rotateY(0deg) translateZ(8px); }
}

.loader-text {
  font-family: var(--hand);
  font-size: 26px; color: var(--ink-2);
  letter-spacing: 2px;
}
.dot { display: inline-block; animation: blink 1.4s infinite; }
.d2 { animation-delay: .25s; }
.d3 { animation-delay: .5s; }
@keyframes blink { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }

/* 字符提示：轮播当前正在准备的页面 */
.loader-hint {
  margin-top: -14px;
  min-height: 26px;
  font-family: var(--hand);
  font-size: 19px; color: var(--ink-2);
  letter-spacing: 1px;
  opacity: .85;
  transition: opacity .32s ease, transform .32s ease;
}
.loader-hint.swap { opacity: 0; transform: translateY(6px); }

/* ============================================================
   左上角音乐按钮（贴纸风，播放时显示律动条）
   ============================================================ */
.music-btn {
  position: fixed;
  left: 18px; top: 16px;
  z-index: 220;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #FFFDF6;
  border: 1.5px solid rgba(74, 66, 56, .20);
  box-shadow: 0 4px 10px rgba(74, 66, 56, .16);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-4deg);
  transition: transform .25s ease, box-shadow .25s ease;
}
.music-btn:hover {
  transform: rotate(0deg) scale(1.08);
  box-shadow: 0 7px 16px rgba(74, 66, 56, .22);
}
.music-note { width: 22px; height: 22px; }
.music-eq {
  display: none;
  align-items: flex-end;
  gap: 3px; height: 18px;
}
.music-eq i {
  width: 4px;
  border-radius: 2px;
  animation: music-eq 1s ease-in-out infinite;
}
.music-eq i:nth-child(1) { background: var(--rose); height: 60%; }
.music-eq i:nth-child(2) { background: var(--blue); height: 100%; animation-delay: .18s; }
.music-eq i:nth-child(3) { background: var(--green); height: 42%; animation-delay: .36s; }
@keyframes music-eq {
  0%, 100% { transform: scaleY(.45); }
  50%      { transform: scaleY(1); }
}
.music-btn.playing .music-note { display: none; }
.music-btn.playing .music-eq { display: inline-flex; }

@media (prefers-reduced-motion: reduce) {
  .music-eq i { animation: none; }
}

/* ============================================================
   主场景
   ============================================================ */
#scene {
  position: fixed; inset: 0;
  opacity: 0;
  transition: opacity .8s ease .1s;
}
#scene.show { opacity: 1; }
#scene.show-fast { transition: opacity .3s ease; }

.stage {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  perspective: 2300px;
  perspective-origin: 50% 42%;
}

/* 状态恢复时禁用一切过渡，避免闪动 */
.no-anim, .no-anim * { transition: none !important; }

/* 打开/合上时的整体平移（带过渡） */
.book-shift {
  transform: translateX(calc(var(--bw) / 2));
  transition: transform 1.1s var(--ease-book);
  transform-style: preserve-3d;
}
.book-shift.closed { transform: translateX(0); }

/* 鼠标视差（无过渡，跟手） */
.book-tilt {
  transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -10deg));
  transition: transform .4s ease-out;
  transform-style: preserve-3d;
}

.book {
  position: relative;
  width: var(--bw); height: var(--bh);
  transform-style: preserve-3d;
}

.book-shadow {
  position: absolute;
  left: 50%; bottom: 7vh;
  width: calc(var(--bw) * 1.9); height: 52px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(74, 66, 56, .20), transparent 62%);
  filter: blur(5px);
  z-index: -1;
}

/* ---------- 封底与书脊 ---------- */
.back-cover {
  position: absolute;
  top: 4px; left: 8px;
  width: calc(var(--bw) - 12px); height: calc(var(--bh) - 4px);
  background: linear-gradient(150deg, var(--cream-2), var(--cream-3));
  border-radius: 6px 14px 14px 6px;
  box-shadow: 0 14px 30px rgba(74, 66, 56, .18);
  z-index: 0;
}
.spine {
  position: absolute;
  top: 2px; bottom: 2px; left: 0;
  width: 24px;
  background: linear-gradient(90deg, #DCD2BA, var(--cream-3) 70%);
  border-radius: 6px 0 0 6px;
  z-index: 1;
}

/* ---------- 整册纸边厚度（右缘 + 下缘） ---------- */
.book-edges {
  position: absolute;
  top: 12px; bottom: 8px; right: 7px; width: 9px;
  border-radius: 0 4px 4px 0;
  background: repeating-linear-gradient(90deg, #FBF7EA 0 1.6px, #DCD2BA 1.6px 2.6px);
  box-shadow: 1px 1px 2px rgba(74, 66, 56, .10);
  z-index: 1;
}
.book-edges-b {
  position: absolute;
  left: 16px; right: 8px; bottom: 3px; height: 7px;
  border-radius: 0 0 5px 5px;
  background: repeating-linear-gradient(0deg, #FBF7EA 0 1.6px, #DCD2BA 1.6px 2.6px);
  z-index: 1;
}

/* ---------- 装订环 ----------
   贴近纸面（14px），环心填纸色——像真的穿在纸上，
   而不是浮在半空的圆圈 */
.rings {
  position: absolute;
  left: 1px; top: 0; bottom: 0; width: 22px;
  transform: translateZ(14px);
  z-index: 60;
  pointer-events: none;
}
.ring {
  position: absolute; left: 0;
  width: 19px; height: 19px;
  border: 3.5px solid #C7BFAE;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 237, 222, .95) 40%, rgba(74, 66, 56, .10) 46%, transparent 55%);
  box-shadow: inset 0 1.5px 2px rgba(74, 66, 56, .28), 0 1px 1px rgba(255, 255, 255, .7);
}

/* ---------- 纸张（sheet） ----------
   每张纸 translateZ 物理分层（0.8px 间隔），消除共面 z-fighting：
   右侧未翻堆：小编号在上；左侧已翻堆：大编号在上。 */
.sheet {
  position: absolute;
  top: calc(10px + var(--i, 0) * 2px);
  left: calc(12px + var(--i, 0) * 3px);
  width: calc(var(--bw) - 26px);
  height: calc(var(--bh) - 20px);
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: rotateY(0deg) translateZ(calc((5 - var(--i, 0)) * 0.8px));
  transition: transform .95s var(--ease-book);
  will-change: transform;
}
/* 注意：翻前/翻后必须保持相同的 transform 函数列表（rotateY + translateZ），
   否则浏览器退化为矩阵插值，旋转轴会歪——页面像"从书的后面绕到前面" */
.sheet.flipped { transform: rotateY(-180deg) translateZ(calc(var(--i, 0) * -0.8px)); }

.face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 6px 12px 12px 6px;
}
.face.back { transform: rotateY(180deg); }

/* 背对镜头的面永不响应点击 —— Chrome 对 backface-hidden 的面
   在 preserve-3d 倾斜场景下仍可能命中（幽灵命中会吞掉点击） */
.sheet:not(.flipped) .face.back,
.sheet.flipped .face.front { pointer-events: none; }

/* 翻到左侧的纸（含封面）整个不参与命中，否则其投影会罩住右侧当前页；
   只有背面露出的小标签和"合上文件夹"保持可点 */
.sheet.flipped, .sheet.flipped .face { pointer-events: none; }
.sheet.flipped .face.back .tab,
.sheet.flipped .face.back .close-book { pointer-events: auto; }

.paper {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background:
    var(--paper-noise),
    var(--paper);
  border: 1px solid rgba(74, 66, 56, .07);
  border-left: none;
  box-shadow: inset 2px 0 6px rgba(74, 66, 56, .05), 1px 2px 5px rgba(74, 66, 56, .10);
  display: flex; flex-direction: column;
}
.paper-back {
  background:
    repeating-linear-gradient(transparent 0 30px, var(--line) 30px 31px),
    var(--paper-back);
  align-items: center; justify-content: center;
  display: flex;
}

/* 页眉 / 页体 */
.page-head {
  display: flex; align-items: baseline; gap: 6px 14px;
  flex-wrap: wrap;
  padding: 30px 30px 6px 48px;
}
.page-head h2 { font-size: 40px; color: var(--ink); letter-spacing: 2px; white-space: nowrap; }
.head-en { font-family: var(--hand-en); color: var(--ink-2); font-size: 20px; letter-spacing: .5px; }
.page-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 26px 30px 48px;
  /* 隐藏滚动条（保持可滚动），避免滚动条时隐时现导致页面位移 */
  scrollbar-width: none;
}
.page-body::-webkit-scrollbar { width: 0; height: 0; }

/* 页内和纸胶带位置（在 .face 上） */
.face > .washi { top: -9px; left: 34%; }

/* ---------- 索引标签 ---------- */
.tab {
  position: absolute;
  top: calc(58px + var(--i, 0) * 82px);
  width: 84px; height: 50px;
  font-family: var(--hand);
  font-size: 21px; color: #FFFDF8;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(74, 66, 56, .25);
  transition: transform .25s ease, filter .25s ease;
  z-index: 8;
}
.tab-front {
  right: -78px;
  border-radius: 0 11px 11px 0;
  box-shadow: inset -4px 0 0 rgba(0, 0, 0, .07), 3px 2px 5px rgba(74, 66, 56, .18);
}
.tab-back {
  left: -78px;
  border-radius: 11px 0 0 11px;
  box-shadow: inset 4px 0 0 rgba(0, 0, 0, .07), -3px 2px 5px rgba(74, 66, 56, .18);
}
.tab-front:hover { transform: translateX(7px); filter: brightness(1.06); }
.tab-back:hover { transform: translateX(-7px); filter: brightness(1.06); }
.sheet.active .tab-front { transform: translateX(10px); filter: brightness(1.08) saturate(1.1); }

.c-rose   { background: var(--rose); }
.c-blue   { background: var(--blue); }
.c-green  { background: var(--green); }
.c-purple { background: var(--purple); }
.c-taupe  { background: var(--taupe); }

/* ---------- "放大进入" 浮动贴纸 ----------
   脱离 3D 书体的平面按钮（3D 倾斜场景下 Chrome 会幽灵命中，
   页内按钮会被翻过去的封面/纸张吞掉点击） */
.enter-fab {
  position: fixed;
  right: 26px; bottom: 26px;
  z-index: 170;
  padding: 10px 20px;
  background: #FFFDF6;
  border: 1.5px solid rgba(74, 66, 56, .22);
  border-radius: 22px;
  box-shadow: 0 4px 12px rgba(74, 66, 56, .18);
  font-family: var(--hand);
  font-size: 20px; color: var(--ink);
  transform: rotate(-2deg);
  transition: transform .2s ease, box-shadow .2s ease,
              opacity .3s ease, visibility 0s .3s;
}
.enter-fab:hover {
  transform: rotate(0deg) scale(1.06);
  box-shadow: 0 7px 16px rgba(74, 66, 56, .22);
}
.enter-fab i {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; margin-right: 8px;
  vertical-align: 2px;
  background: var(--taupe);
  transition: background .3s;
}
.enter-fab.hide {
  opacity: 0; visibility: hidden;
  transform: rotate(-2deg) translateY(10px);
  pointer-events: none;
}

/* ---------- 通用占位块（大厅内） ---------- */
.empty-block { margin-top: 40px; }
.empty-block.tall { margin-top: 90px; padding: 80px 20px; }

.page-note {
  margin-top: 26px;
  font-family: var(--hand);
  font-size: 21px; color: var(--ink-2);
  text-align: center;
}

/* 便利贴 */
.sticky {
  position: absolute;
  right: 14px; top: 92px;
  width: 148px;
  padding: 12px 14px;
  background: #EFE3AC;
  transform: rotate(4deg);
  box-shadow: 0 4px 8px rgba(74, 66, 56, .18);
  font-family: var(--hand);
  font-size: 18px; line-height: 1.55; color: #6B5E3F;
  z-index: 6;
}
.sticky::before {
  content: '';
  position: absolute;
  top: -8px; left: 50%;
  width: 44px; height: 14px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(200, 190, 160, .55);
  box-shadow: 0 1px 1px rgba(74, 66, 56, .1);
}

/* 封面内页 */
.cover-inner { flex-direction: column; gap: 20px; background: linear-gradient(155deg, #EFE7D4, #E7DDC6); }
.cover-sheet {
  top: 0; left: 6px;
  width: calc(var(--bw) - 12px);
  height: var(--bh);
  z-index: 20;
  transform: rotateY(0deg) translateZ(4.8px);
}
.cover-sheet.flipped { transform: rotateY(-180deg) translateZ(1.6px); }
.cover-face {
  background: linear-gradient(155deg, #F3ECDC 0%, #EAE1CC 100%);
  border: 1px solid rgba(74, 66, 56, .10);
  border-radius: 6px 14px 14px 6px;
  box-shadow: inset 2px 0 8px rgba(74, 66, 56, .06), 2px 3px 10px rgba(74, 66, 56, .14);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cover-face::after {
  content: '';
  position: absolute; inset: 12px;
  border: 1.5px solid rgba(74, 66, 56, .10);
  border-radius: 4px 10px 10px 4px;
  pointer-events: none;
}

.cover-label {
  position: relative;
  background: var(--paper);
  padding: 34px 44px 28px;
  transform: rotate(-2deg);
  box-shadow: 0 6px 16px rgba(74, 66, 56, .15);
  text-align: center;
  z-index: 3;
}
.cover-name { font-family: var(--hand-title); font-size: 72px; letter-spacing: 10px; color: var(--ink); line-height: 1.1; }
.cover-sub-en { font-family: var(--hand-en); font-size: 22px; color: var(--ink-2); letter-spacing: 3px; margin-top: 4px; }
.cover-divider { width: 70%; height: 1px; margin: 14px auto 12px; background: linear-gradient(90deg, transparent, rgba(74,66,56,.3), transparent); }
.cover-sub { font-size: 13px; color: var(--ink-2); letter-spacing: 2px; }

.w-tape-1 { left: 12%; top: 6%; transform: rotate(-38deg); width: 86px; background: rgba(157, 176, 192, .55); }
.w-tape-2 { left: auto; right: 10%; top: auto; bottom: 8%; transform: rotate(-32deg); width: 86px; background: rgba(169, 187, 161, .55); }

.stamp {
  position: absolute;
  right: 26px; top: 30px;
  padding: 6px 14px;
  border: 3px double var(--rose-d);
  border-radius: 6px;
  color: var(--rose-d);
  font-family: var(--hand-en);
  font-size: 24px; font-weight: 600; letter-spacing: 2px;
  transform: rotate(14deg);
  opacity: .8;
  z-index: 3;
}

.swatches {
  position: absolute;
  left: 30px; bottom: 26px;
  display: flex; gap: 8px;
  z-index: 3;
}
.swatches i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 -2px 3px rgba(0,0,0,.12); }

/* 封面内页 */
.cover-inner { flex-direction: column; gap: 20px; background: linear-gradient(155deg, #EFE7D4, #E7DDC6); }
.inner-note { font-family: var(--hand); font-size: 22px; color: var(--ink-2); transform: rotate(-2deg); }
/* 封面内页 / 空白页的「我的站点」入口 */
.cover-sites {
  font-family: var(--hand);
  font-size: 20px; color: var(--blue-d);
  text-decoration: none;
  padding: 5px 14px;
  border: 1.5px dashed rgba(122, 145, 164, .55);
  border-radius: 18px;
  background: rgba(255, 255, 255, .35);
  transform: rotate(-1.5deg);
  transition: transform .2s, background .2s;
}
.cover-sites:hover { transform: rotate(0) translateY(-2px); background: rgba(255, 255, 255, .7); }
.sites-entry {
  display: inline-block;
  margin-top: 34px;
  font-size: 22px; color: var(--blue-d);
  text-decoration: none;
  padding: 7px 20px;
  border: 1.5px dashed rgba(122, 145, 164, .5);
  border-radius: 20px;
  background: rgba(255, 255, 255, .4);
  transform: rotate(-1deg);
  transition: transform .2s, background .2s;
}
.sites-entry:hover { transform: rotate(0) translateY(-2px); background: rgba(255, 255, 255, .75); }
.pocket {
  position: relative;
  width: 74%; height: 190px;
  border: 2px dashed rgba(74, 66, 56, .28);
  border-radius: 10px;
  background: rgba(255, 255, 255, .30);
  transform: rotate(-1deg);
}
.pocket-card {
  position: absolute;
  left: 50%; bottom: 96px;
  transform: translateX(-50%) rotate(2.5deg);
  background: var(--paper);
  padding: 16px 24px;
  font-family: var(--hand);
  font-size: 24px; color: var(--ink);
  box-shadow: 0 5px 12px rgba(74, 66, 56, .16);
  white-space: nowrap;
}
.close-book {
  margin-top: 6px;
  font-family: var(--hand);
  font-size: 20px; color: var(--ink-2);
  padding: 6px 14px;
  border-radius: 8px;
  transition: background .2s;
}
.close-book:hover { background: rgba(74, 66, 56, .08); color: var(--ink); }

/* ============================================================
   右侧汉堡菜单 + 侧边栏
   ============================================================ */
#hamburger {
  position: fixed;
  right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 210;
  width: 46px; height: 58px;
  background: var(--paper);
  border: 1px solid rgba(74, 66, 56, .16);
  border-right: none;
  border-radius: 12px 0 0 12px;
  box-shadow: -3px 3px 10px rgba(74, 66, 56, .14);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  transition: background .25s;
}
#hamburger:hover { background: var(--cream-2); }
#hamburger span {
  width: 20px; height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .35s ease, opacity .25s;
}
#hamburger.open {
  top: 14px; right: 12px;
  transform: none;
  border-radius: 12px;
  border-right: 1px solid rgba(74, 66, 56, .16);
  width: 42px; height: 42px;
}
#hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
#hamburger.open span:nth-child(2) { opacity: 0; }
#hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

#overlay {
  position: fixed; inset: 0;
  background: rgba(90, 80, 66, .18);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .4s, visibility 0s .4s;
  z-index: 190;
}
#overlay.open { opacity: 1; visibility: visible; transition-delay: 0s; }

#sidebar {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 252px;
  background: linear-gradient(180deg, #FBF7EE, #F3EDDF);
  border-left: 1px solid rgba(74, 66, 56, .12);
  box-shadow: -10px 0 26px rgba(74, 66, 56, .10);
  transform: translateX(106%);
  transition: transform .48s cubic-bezier(.7, 0, .25, 1);
  z-index: 200;
  padding: 88px 24px 24px;
}
#sidebar.open { transform: translateX(0); }

.side-title { font-family: var(--hand-title); font-size: 34px; color: var(--ink); }
.side-title-en { font-family: var(--hand-en); font-size: 18px; color: var(--ink-2); margin: 2px 0 18px; }

.side-nav { display: flex; flex-direction: column; gap: 4px; border-top: 1.5px dashed rgba(74,66,56,.2); padding-top: 16px; }
.side-nav button, .side-nav a.side-sites {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: background .2s, transform .2s;
}
.side-nav button:hover, .side-nav a.side-sites:hover { background: rgba(255, 255, 255, .65); transform: translateX(4px); }
.side-nav button.active, .side-nav a.side-sites.active { background: #FFFDF6; box-shadow: 0 2px 8px rgba(74, 66, 56, .10); }
/* 「我的站点」外链入口：和翻页按钮排在一起，但颜色稍不同，像贴纸 */
.side-nav a.side-sites { margin-top: 6px; border-top: 1.5px dashed rgba(74,66,56,.18); border-radius: 0 0 10px 10px; padding-top: 13px; }
.sdot { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: inset 0 -1.5px 2px rgba(0,0,0,.15); }
.sdot-cover { background: var(--paper); border: 2px solid var(--ink-2); box-shadow: none; width: 9px; height: 9px; }
.side-nav .hand { font-family: var(--hand); font-size: 23px; color: var(--ink); flex: 1; }
.side-nav em { font-family: var(--hand-en); font-style: normal; font-size: 16px; color: var(--ink-2); }

.side-foot {
  position: absolute;
  bottom: 20px; left: 24px;
  font-family: var(--hand-en);
  font-size: 17px; color: var(--ink-2);
  letter-spacing: 1px;
}

/* ============================================================
   移动端底部标签栏（桌面端隐藏）
   ============================================================ */
#mobileNav { display: none; }

/* 手账本引导气泡（桌面端隐藏） */
.journal-hint { display: none; }

/* ============================================================
   移动端：竖向手账本
   装订环移到顶边，纸张绕顶边向上翻（日历式），
   一次只显示当前页，底部标签栏 + 滑动手势导航。
   ============================================================ */
@media (max-width: 760px) {
  :root {
    --bw: min(92vw, 430px);
    --bh: min(600px, calc(100vh - 196px));
    --bh: min(600px, calc(100dvh - 196px));
  }

  .stage {
    padding-bottom: 84px;
    perspective: 1700px;
    perspective-origin: 50% 36%;
  }

  /* 平正视角，不再倾斜 */
  .book-shift, .book-tilt { transform: none !important; }

  /* 底壳 = 手账本封底框 */
  .back-cover {
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 14px;
  }
  .spine, .book-edges, .book-edges-b { display: none; }
  .book-shadow { width: calc(var(--bw) * 1.05); bottom: 10vh; }

  /* 装订环移到顶边 */
  .rings {
    left: 0; right: 0; top: -9px; bottom: auto;
    width: auto; height: 22px;
    transform: translateZ(30px);
  }
  .ring { top: 0 !important; }
  .rings .ring:nth-child(1) { left: 9%; }
  .rings .ring:nth-child(2) { left: 24%; }
  .rings .ring:nth-child(3) { left: 40%; }
  .rings .ring:nth-child(4) { left: 56%; }
  .rings .ring:nth-child(5) { left: 72%; }
  .rings .ring:nth-child(6) { left: 87%; }

  /* 隐藏纸张侧边标签，改用底部标签栏 */
  .tab { display: none; }

  /* 纸张：贴齐底壳内缘，绕顶边翻转；默认藏起来 */
  .sheet, .cover-sheet {
    top: 12px; left: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 20px);
    transform-origin: center top;
    transform: scale(.96) rotateX(0deg);
    opacity: 0; visibility: hidden;
    pointer-events: none;
    z-index: 2 !important;
    transition: transform .55s cubic-bezier(.3, .9, .35, 1.05),
                opacity .45s ease,
                visibility 0s .6s;
  }
  /* 桌面端的 .flipped 变换在移动端一律作废（兜底，正常不会带上这个类） */
  .sheet.flipped, .cover-sheet.flipped { transform: scale(.96) rotateX(0deg); }
  .face { border-radius: 8px; }

  /* 当前页 */
  .sheet.m-show, .cover-sheet.m-show {
    transform: scale(1) rotateX(0deg);
    opacity: 1; visibility: visible;
    pointer-events: auto;
    z-index: 5 !important;
    transition: transform .55s cubic-bezier(.3, .9, .35, 1.05),
                opacity .45s ease,
                visibility 0s 0s;
  }
  /* 向上翻走（翻到下一页）——函数列表与 .m-show 对齐，保证逐分量插值 */
  .sheet.m-up, .cover-sheet.m-up {
    transform: scale(1) rotateX(-102deg);
    opacity: 0; visibility: visible;
    z-index: 8 !important;
    transition: transform .55s cubic-bezier(.5, .05, .85, .4),
                opacity .5s ease .1s,
                visibility 0s .62s;
  }
  /* 从上方落下（返回上一页）的起始姿态 */
  .sheet.m-show.m-down-in, .cover-sheet.m-show.m-down-in {
    transform: scale(1) rotateX(-102deg);
    opacity: 0;
    z-index: 6 !important;
    transition: none !important;
  }

  #mobileNav {
    display: flex; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(246, 241, 231, .82), var(--cream));
    border-top: 1px solid rgba(74, 66, 56, .12);
    backdrop-filter: blur(6px);
    overflow-x: auto;
    scrollbar-width: none;
    z-index: 150;
  }
  #mobileNav::-webkit-scrollbar { display: none; }
  #mobileNav button {
    flex: 1 0 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 13px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(74, 66, 56, .12);
    font-family: var(--hand);
    font-size: 19px; color: var(--ink);
    white-space: nowrap;
    touch-action: manipulation;
  }
  #mobileNav button i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  #mobileNav button.active {
    background: #FFFDF6;
    border-color: rgba(74, 66, 56, .30);
    box-shadow: 0 2px 8px rgba(74, 66, 56, .14);
  }

  /* 引导气泡 */
  .journal-hint {
    display: block;
    position: fixed; left: 50%; bottom: 92px;
    transform: translateX(-50%) rotate(-2deg);
    /* 固定定位元素只给 left 时会按「剩余可用宽度」收缩，长句被折成两行；
       用 max-content 让气泡按文字宽度展开，再兜一个屏幕内上限 */
    width: max-content;
    max-width: calc(100vw - 40px);
    background: #FFFDF6;
    border: 1.5px solid rgba(74, 66, 56, .2);
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 19px; color: var(--ink);
    text-align: center; line-height: 1.65;
    box-shadow: 0 6px 16px rgba(74, 66, 56, .18);
    z-index: 160;
    opacity: 0; visibility: hidden;
    transition: opacity .4s ease, visibility 0s .4s;
    pointer-events: none;
  }
  .journal-hint span { font-size: 16px; color: var(--ink-2); }
  .journal-hint.show { opacity: 1; visibility: visible; transition-delay: 0s; }

  .page-head { padding: 24px 20px 4px 40px; }
  .page-head h2 { font-size: 30px; }
  .head-en { font-size: 17px; }
  .page-body { padding: 12px 16px 24px 40px; }
  .empty-tip { font-size: 20px; }
  .enter-fab { right: 14px; bottom: 84px; font-size: 18px; padding: 8px 16px; }

  .cover-label { padding: 24px 26px 20px; }
  .cover-name { font-size: 48px; letter-spacing: 6px; }
  .stamp { font-size: 19px; right: 18px; top: 22px; }
  .pocket-card { font-size: 20px; padding: 12px 18px; }

  #sidebar { width: min(76vw, 260px); }
  .sticky { display: none; }
}

/* 更小的手机 */
@media (max-width: 360px) {
  :root { --bw: 92vw; }
  .page-head h2 { font-size: 27px; }
  .loader-book { width: 158px; height: 210px; }
  .loader-text { font-size: 22px; }
  .loader-hint { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .loader-book, .l-leaf { animation: none; }
  .sheet, .cover-sheet, .book-shift { transition: none; }
}