/* study-letters.css · 书房书信三套交互样式（场景纪元 · 第六格）
   自 demo《elian_archive_recent_letters_preview_v4_6_true_final》适配移植：
   base64 素材全部替换为线上既有引用；vh/px 定位层不写死——信封、幽灵信封、纸张、
   详情卡、展板、阅读器纸张的几何全部由 study-letters.js 经舞台 API（mode 'room'）写入。
   仅桌面端使用（模块仅桌面挂载）；reduced-motion 分支保留并补严格降级。 */

#studyLettersRoot, .sl-overlay { box-sizing: border-box; }
#studyLettersRoot *, .sl-overlay * { box-sizing: border-box; }

/* ===== 变量与缓动（demo 原值） ===== */
:root {
  --sl-gold: #caa76b;
  --sl-gold-soft: rgba(202,167,107,.28);
  --sl-ink: #49392a;
  --sl-ease: cubic-bezier(.18,.82,.18,1);
}
.sl-overlay button { font: inherit; }

/* ===== 今日书信：面板内信封（定位由 JS 经舞台写入，filter/变换沿用 demo） ===== */
.sl-today-envelope {
  position: absolute; z-index: 8; border: 0; background: none; padding: 0; cursor: pointer;
  filter: drop-shadow(0 14px 16px rgba(0,0,0,.34));
  transform: rotate(-3.2deg) translateY(0);
  transition: transform .34s var(--sl-ease), filter .34s ease;
}
.sl-today-envelope:hover, .sl-today-envelope:focus-visible {
  transform: rotate(-2deg) translateY(-5px) scale(1.015);
  filter: drop-shadow(0 20px 22px rgba(0,0,0,.42));
  outline: none;
}
.sl-today-envelope.is-opened { transform: rotate(-1.3deg) translateY(0); }
.sl-today-envelope.is-opened .sl-today-envelope-shell { filter: saturate(.95) brightness(.96); }
.sl-today-envelope.is-hidden { opacity: 0; pointer-events: none; }
.sl-today-envelope-shell {
  position: absolute; inset: 0;
  background: url('/img/home-letter-tilt.v1.webp') center / contain no-repeat;
}
.sl-today-envelope-glint {
  position: absolute; inset: 16% 12% 18% 18%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,234,189,.18) 0, rgba(255,217,148,.06) 35%, rgba(255,210,130,0) 70%);
  opacity: 0; transition: opacity .28s ease; mix-blend-mode: screen;
}
.sl-today-envelope:hover .sl-today-envelope-glint,
.sl-today-envelope:focus-visible .sl-today-envelope-glint,
.sl-today-envelope.is-opened .sl-today-envelope-glint { opacity: .58; }
.sl-today-envelope-note {
  position: absolute; right: 5%; bottom: 8%; padding: 6px 10px; border-radius: 999px;
  font-size: 10px; letter-spacing: .16em; background: rgba(22,16,11,.58);
  border: 1px solid rgba(202,167,107,.26); color: rgba(239,229,210,.76);
}
/* 无信日：羊皮纸上只留一句（实机语义保留）。 */
.sl-today-empty {
  position: absolute; z-index: 8; border: 0; background: none; padding: 10px; cursor: pointer;
  color: rgba(234,223,200,.82); text-align: center;
  font: 500 14px/1.7 "Noto Serif SC Web", "Noto Serif SC", "Songti SC", serif;
  letter-spacing: .08em; text-shadow: 0 1px 6px rgba(0,0,0,.55);
  transition: color .24s ease, transform .24s var(--sl-ease);
}
.sl-today-empty:hover, .sl-today-empty:focus-visible { color: #f4e6c8; transform: translateY(-2px); outline: none; }

/* ===== 近期书信：展示柜三卡（槽位 top 为实机值，卡面/图钉/旋转沿用 demo） ===== */
.sl-recent-card {
  --card-rotate: 0deg; --pin-image: none;
  position: absolute; left: 2%; width: 96%; height: 28%; min-height: 0;
  padding: 4% 21% 3.5% 9%;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  overflow: hidden; border: 0; border-radius: 2px;
  background: url('/img/room/ui/05-past-letter-card.v1.webp') center 38% / cover no-repeat;
  color: #493622; text-align: left; cursor: pointer;
  filter: brightness(.78) drop-shadow(3px 5px 6px rgba(0,0,0,.48));
  transform: translateZ(0) rotate(var(--card-rotate)); transform-origin: 50% 52%;
  transition: transform .32s var(--sl-ease), filter .30s ease, opacity .28s ease;
}
.sl-recent-card:nth-child(1) { top: 1%; --card-rotate: -.65deg; --pin-image: url('/img/room/ui/06-pin-eight-point-star.v1.webp'); }
.sl-recent-card:nth-child(2) { top: 35.5%; --card-rotate: .42deg; --pin-image: url('/img/room/ui/06-pin-compass-rose.v1.webp'); }
.sl-recent-card:nth-child(3) { top: 70%; --card-rotate: -.24deg; --pin-image: url('/img/room/ui/06-wax-dot-red.v1.webp'); }
.sl-recent-card::before {
  content: ""; position: absolute; z-index: 3; right: 4.5%; top: 50%; width: 15%; aspect-ratio: 1;
  background: var(--pin-image) center / contain no-repeat; pointer-events: none;
  filter: drop-shadow(1px 2px 2px rgba(0,0,0,.48)); transform: translateY(-50%);
  transition: transform .32s var(--sl-ease), filter .30s ease;
}
.sl-recent-card::after {
  content: ""; position: absolute; inset: 3% 2%; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,238,193,.13), transparent 33%, rgba(72,42,19,.06));
  mix-blend-mode: soft-light; opacity: .72;
}
.sl-recent-card:hover, .sl-recent-card:focus-visible {
  z-index: 8; outline: none; filter: brightness(.98) drop-shadow(7px 11px 11px rgba(0,0,0,.58));
  transform: translate3d(0,-5px,20px) rotate(0deg) scale(1.025);
}
.sl-recent-card:hover::before, .sl-recent-card:focus-visible::before {
  transform: translateY(-50%) scale(1.06); filter: drop-shadow(2px 4px 4px rgba(0,0,0,.52));
}
#desktopRecentList:hover .sl-recent-card:not(:hover) { filter: brightness(.69) drop-shadow(2px 4px 5px rgba(0,0,0,.42)); opacity: .88; }
.sl-recent-summary {
  position: relative; z-index: 2; width: 100%; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  color: #49331d; font: 600 clamp(8px,.70vw,12px)/1.42 "Noto Serif SC Web", "Noto Serif SC", "Songti SC", serif;
  letter-spacing: .025em; text-shadow: 0 1px rgba(255,241,210,.18);
}
.sl-recent-date {
  position: relative; z-index: 2; color: rgba(88,62,37,.72);
  font: 600 clamp(7px,.58vw,10px)/1.2 Georgia, "Noto Serif SC Web", serif; letter-spacing: .06em;
}
.sl-recent-empty {
  color: rgba(234,223,200,.62); font: 500 13px/1.6 "Noto Serif SC Web", "Noto Serif SC", serif;
  letter-spacing: .06em; padding: 8px 4px;
}

/* ===== 今日书信层（召唤/抽信/展开/收合；z 110 全站最高交互层） ===== */
.today-layer { position: fixed; inset: 0; z-index: 110; pointer-events: none; perspective: 1400px; }
.today-layer[hidden] { display: none !important; }
.today-layer.is-open { pointer-events: auto; }
.today-backdrop { position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(19,14,10,.12), rgba(7,5,4,.62)); opacity: 0; }
.today-particles { position: fixed; left: 50%; top: 50%; width: 1px; height: 1px; overflow: visible; pointer-events: none; opacity: 0; }
.today-particles span {
  position: absolute; width: var(--size,7px); height: var(--size,7px); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,248,220,1) 0, rgba(255,214,127,.88) 38%, rgba(241,181,77,.28) 72%, rgba(241,181,77,0) 100%);
  box-shadow: 0 0 10px rgba(255,221,150,.72), 0 0 22px rgba(231,170,70,.34);
}
@keyframes driftSpark {
  0% { transform: translate3d(0,0,0) scale(.45); opacity: 0; }
  12% { opacity: 1; }
  62% { opacity: .9; }
  100% { transform: translate3d(var(--dx),var(--dy),0) scale(1.35); opacity: 0; }
}
.today-particles.is-awake { opacity: 1; }
.today-particles.is-awake span { animation: driftSpark 1.85s ease-out infinite; animation-delay: var(--delay); }
.today-ghost-envelope {
  position: fixed; left: 0; top: 0; width: 120px; aspect-ratio: 800/574;
  border: 0; padding: 0; cursor: pointer; background: none;
  transform-origin: center center; opacity: 0; pointer-events: none;
}
.today-ghost-shell {
  position: absolute; inset: 0; display: block;
  background: url('/img/home-letter-tilt.v1.webp') center / contain no-repeat;
  filter: drop-shadow(0 10px 15px rgba(0,0,0,.42));
  transition: filter .34s ease; will-change: filter;
}
.today-ghost-envelope.is-glowing .today-ghost-shell,
.today-ghost-envelope.is-ready .today-ghost-shell {
  filter: drop-shadow(0 0 3px rgba(255,226,164,.9)) drop-shadow(0 0 10px rgba(232,180,80,.72)) drop-shadow(0 0 22px rgba(210,145,48,.38)) drop-shadow(0 22px 30px rgba(0,0,0,.58));
}
.today-ghost-envelope.is-ready { pointer-events: auto; }
.today-ghost-envelope.is-ready:hover, .today-ghost-envelope.is-ready:focus-visible { outline: none; }
.today-ghost-envelope.is-ready:hover .today-ghost-shell,
.today-ghost-envelope.is-ready:focus-visible .today-ghost-shell {
  filter: drop-shadow(0 0 4px rgba(255,237,190,1)) drop-shadow(0 0 15px rgba(239,190,89,.82)) drop-shadow(0 0 30px rgba(216,151,55,.46)) drop-shadow(0 25px 34px rgba(0,0,0,.62));
}
.today-ghost-envelope.is-floating { animation: todayFloat 2.1s ease-in-out infinite; }
@keyframes todayFloat { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,6px,0); } }
.today-open-hint {
  position: fixed; left: 50%; top: 50%; z-index: 2; transform: translate(-50%,-50%) translateY(178px);
  color: rgba(246,222,174,.9); font-size: 12px; letter-spacing: .22em;
  text-shadow: 0 0 12px rgba(218,163,70,.54), 0 2px 5px #000;
  opacity: 0; pointer-events: none; transition: opacity .34s ease, transform .42s var(--sl-ease);
}
.today-open-hint.is-visible { opacity: 1; transform: translate(-50%,-50%) translateY(168px); }
.today-paper-wrap {
  position: fixed; left: 0; top: 0; width: 420px; height: 620px;
  opacity: 0; pointer-events: none; filter: drop-shadow(0 24px 40px rgba(0,0,0,.58));
}
.today-paper-wrap.is-visible { opacity: 1; }
.today-paper-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.today-paper-copy {
  position: absolute; left: 15%; top: 17%; width: 70%; height: 68%; overflow: auto;
  color: rgba(66,47,31,.92); text-shadow: 0 1px rgba(255,255,255,.18);
  opacity: 0; transform: translateY(12px); transition: opacity .34s ease, transform .38s var(--sl-ease);
  scrollbar-width: thin;
}
.today-paper-copy.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.today-paper-title { text-align: center; font-size: 26px; letter-spacing: .12em; margin: 0 0 10px; font-weight: 500; }
.today-paper-date { text-align: center; font-size: 12px; letter-spacing: .16em; margin-bottom: 30px; color: rgba(72,52,35,.56); }
.today-paper-body { white-space: pre-wrap; line-height: 2; font-size: 16px; letter-spacing: .03em; margin: 0; }
.today-close {
  position: fixed; left: 50%; top: 50%; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(202,167,107,.42); background: rgba(20,15,11,.72); color: #eadfca;
  font-size: 26px; line-height: 1; display: grid; place-items: center; cursor: pointer;
  opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(.94);
  transition: opacity .24s ease, transform .28s var(--sl-ease), background .24s ease, border-color .24s ease;
}
.today-close.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1); }
.today-close:hover, .today-close:focus-visible { background: rgba(31,23,17,.88); border-color: rgba(202,167,107,.7); outline: none; }

/* ===== 近期详情卡（克隆 FLIP；z 82） ===== */
.recent-detail-layer {
  position: fixed; z-index: 82; inset: 0;
  visibility: hidden; opacity: 0; pointer-events: none;
  background: rgba(5,4,3,.16); perspective: 1400px;
  transition: opacity .26s ease, visibility 0s linear .72s;
}
.recent-detail-layer.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
.recent-detail-card {
  position: fixed !important; z-index: 2; left: 0; top: 0;
  width: 1px; height: 1px; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important;
  display: block !important; overflow: hidden;
  border: 0 !important; border-radius: 5px !important;
  cursor: default !important; transform: none; transform-origin: 50% 50%;
  filter: drop-shadow(0 28px 42px rgba(0,0,0,.66));
  will-change: transform, filter, opacity;
  backface-visibility: hidden; transform-style: preserve-3d;
}
.recent-detail-card:hover, .recent-detail-card:focus-visible { transform: none; filter: drop-shadow(0 28px 42px rgba(0,0,0,.66)); }
.recent-detail-card::before {
  content: ""; position: absolute; z-index: 3; right: 3.8%; top: 50%; width: 10%; aspect-ratio: 1;
  background: var(--pin-image) center / contain no-repeat; pointer-events: none;
  transform: translateY(-50%);
  filter: drop-shadow(2px 4px 4px rgba(0,0,0,.48));
}
.recent-detail-card::after {
  content: ""; position: absolute; inset: 2% 1.5%; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,238,193,.13), transparent 33%, rgba(72,42,19,.06));
  mix-blend-mode: soft-light; opacity: .62;
}
.recent-detail-mini {
  position: absolute; inset: 0; z-index: 2;
  padding: 4% 21% 3.5% 9%;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  opacity: 1; transform: none;
  transition: opacity .12s ease, transform .22s var(--sl-ease);
}
.recent-detail-card.is-opening .recent-detail-mini,
.recent-detail-card.is-readable .recent-detail-mini,
.recent-detail-card.is-closing .recent-detail-mini { opacity: 0; transform: translateY(-5px); pointer-events: none; }
.recent-detail-copy {
  position: absolute; z-index: 2; inset: 10% 14% 9% 10%;
  color: #4a3421; text-shadow: 0 1px rgba(255,245,220,.24);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .34s ease, transform .42s var(--sl-ease);
  overflow: auto; scrollbar-width: thin;
}
.recent-detail-card.is-readable .recent-detail-copy { opacity: 1; transform: none; pointer-events: auto; }
.recent-detail-title { margin: 0; text-align: center; font-size: clamp(20px,2vw,30px); font-weight: 500; letter-spacing: .12em; }
.recent-detail-date { margin: 7px 0 18px; text-align: center; color: rgba(76,53,33,.62); font-size: clamp(10px,.9vw,13px); letter-spacing: .15em; }
.recent-detail-body { margin: 0; white-space: pre-wrap; font-size: clamp(13px,1.12vw,17px); line-height: 1.9; letter-spacing: .025em; }
.recent-detail-close {
  position: fixed; z-index: 4; width: 42px; height: 42px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(219,183,112,.48);
  background: rgba(20,14,9,.84); color: #e5c78f; cursor: pointer;
  display: grid; place-items: center; font-size: 22px; line-height: 1;
  opacity: 0; transform: translateY(-8px) scale(.9); pointer-events: none;
  box-shadow: 0 9px 22px rgba(0,0,0,.42), inset 0 1px rgba(255,236,191,.08);
  transition: opacity .24s ease, transform .30s var(--sl-ease), border-color .2s ease;
}
.recent-detail-layer.is-settled .recent-detail-close { opacity: 1; transform: none; pointer-events: auto; }
.recent-detail-close:hover, .recent-detail-close:focus-visible { outline: none; border-color: rgba(239,204,135,.86); }

/* ===== 档案板（翻牌入场；z 40） ===== */
.board-layer {
  /* 居中参照 = 导航右侧内容区（#nav 宽 --size-nav-rail；本模块仅桌面挂载，导航常驻）。 */
  position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; left: var(--size-nav-rail, 64px);
  display: grid; place-items: center;
  visibility: hidden; opacity: 0; pointer-events: none;
  background: transparent; perspective: 1600px; perspective-origin: 54% 48%;
  transition: opacity .18s ease, filter .38s ease, transform .55s var(--sl-ease), visibility 0s linear .72s;
}
.board-layer::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: rgba(4,3,2,.37); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .52s ease;
}
.board-layer.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
.board-layer.is-dimmed::before { opacity: 1; }
.board-layer.is-reading { opacity: 0; filter: blur(8px); transform: scale(.97); pointer-events: none; }
.board-shell {
  position: relative; z-index: 1;
  /* 静息尺寸：demo 公式的盒项版（86% 内容宽、1240px 封顶、88dvh×1.41176），grid 居中，JS 不再写几何。 */
  width: min(86%, 1240px, calc(88dvh * 1.41176)); aspect-ratio: 1200 / 850; height: auto;
  filter: drop-shadow(0 28px 46px rgba(0,0,0,.62));
  transform-style: preserve-3d; transform-origin: 82% 52%;
  will-change: transform, opacity, filter;
}
.board-shell::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 8%; right: 7%; top: 10%; bottom: 5%;
  background: rgba(0,0,0,.74); filter: blur(34px); opacity: .72;
  transform: translate3d(28px,24px,-54px) scale(.93);
}
.board-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none; transform: translateZ(0); }
.board-close {
  position: absolute; z-index: 12; right: 1.8%; top: 2.4%;
  width: 42px; height: 42px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(219,183,112,.46);
  background: rgba(20,14,9,.82); color: #e5c78f; cursor: pointer;
  display: grid; place-items: center; font-size: 22px; line-height: 1;
  box-shadow: 0 8px 20px rgba(0,0,0,.38), inset 0 1px rgba(255,236,191,.08);
  opacity: 0; transform: translateY(-7px) scale(.92); pointer-events: none;
  transition: opacity .24s ease, transform .28s var(--sl-ease), border-color .24s ease, background .24s ease;
}
.board-close:hover, .board-close:focus-visible { outline: none; border-color: rgba(239,204,135,.84); background: rgba(35,24,14,.92); }
.board-layer.is-settled .board-close { opacity: 1; transform: none; pointer-events: auto; }
.board-layer:not(.is-settled) .board-content { pointer-events: none; }
.board-layer:not(.is-settled) .board-hint { opacity: 0; transform: translate(-50%,7px); }
.board-layer.is-settled .board-hint { opacity: 1; transform: translateX(-50%); }
.board-content { position: absolute; left: 10.1%; top: 17.5%; width: 79.8%; height: 68.7%; transform: translateZ(16px); }
.letter-cover {
  position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer;
  transition: transform .32s var(--sl-ease), filter .32s ease;
  filter: drop-shadow(0 11px 14px rgba(0,0,0,.38));
  will-change: transform, opacity, filter;
}
.letter-cover img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.letter-cover:hover, .letter-cover:focus-visible {
  z-index: 4; outline: none;
  transform: translate(var(--x),var(--y)) rotate(var(--r)) translateY(-7px) scale(1.035);
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.45)) drop-shadow(0 0 13px rgba(202,167,107,.20));
}
.letter-cover .meta {
  position: absolute; left: 50%; bottom: -9px; transform: translate(-50%,100%);
  white-space: nowrap; color: rgba(229,210,171,.0); font-size: 12px; letter-spacing: .08em;
  transition: color .22s ease, text-shadow .22s ease;
}
.letter-cover:hover .meta, .letter-cover:focus-visible .meta { color: rgba(229,210,171,.88); text-shadow: 0 2px 8px #000; }
.letter-cover.is-extracting { z-index: 8; pointer-events: none; filter: drop-shadow(0 15px 20px rgba(0,0,0,.46)) brightness(.82); }
/* 上三下二，故意不对齐（demo 原槽位） */
.pos1 { left: 2%; top: 1%; width: 29%; height: 38%; --x: 0px; --y: 0px; --r: -5.2deg; transform: translate(var(--x),var(--y)) rotate(var(--r)); }
.pos2 { left: 38%; top: 2%; width: 19%; height: 42%; --x: 0px; --y: 0px; --r: 1.4deg; transform: translate(var(--x),var(--y)) rotate(var(--r)); }
.pos3 { right: 2%; top: 4%; width: 31%; height: 35%; --x: 0px; --y: 0px; --r: 3.2deg; transform: translate(var(--x),var(--y)) rotate(var(--r)); }
.pos4 { left: 18%; bottom: 1%; width: 24%; height: 44%; --x: 0px; --y: 0px; --r: -1.8deg; transform: translate(var(--x),var(--y)) rotate(var(--r)); }
.pos5 { right: 16%; bottom: 1%; width: 24%; height: 44%; --x: 0px; --y: 0px; --r: 1.7deg; transform: translate(var(--x),var(--y)) rotate(var(--r)); }
.board-hint {
  position: absolute; left: 50%; bottom: 3.2%; transform: translateX(-50%);
  color: rgba(213,181,120,.58); font-size: 12px; letter-spacing: .16em;
  text-shadow: 0 2px 10px #000; pointer-events: none;
  transition: opacity .26s ease, transform .34s var(--sl-ease);
}
/* 分页（实机语义保留：>5 封翻页；demo 定长 5 无分页，此处最小补齐） */
.board-pager {
  position: absolute; z-index: 12; left: 50%; bottom: 6.4%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  color: rgba(224,197,143,.78); font-size: 12px; letter-spacing: .14em; text-shadow: 0 2px 8px #000;
}
.board-page-btn {
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(219,183,112,.42); background: rgba(20,14,9,.78); color: #e5c78f;
  cursor: pointer; display: grid; place-items: center; font-size: 18px; line-height: 1;
  transition: border-color .2s ease, background .2s ease, opacity .2s ease;
}
.board-page-btn:hover:not(:disabled), .board-page-btn:focus-visible:not(:disabled) { outline: none; border-color: rgba(239,204,135,.84); }
.board-page-btn:disabled { opacity: .32; cursor: default; }
.board-layer:not(.is-settled) .board-pager { pointer-events: none; opacity: 0; }
.board-empty {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
  color: rgba(229,210,171,.72); font-size: 14px; letter-spacing: .12em; text-shadow: 0 2px 8px #000;
}

/* ===== 阅读器（日期轮 + 纸张；层 z 10，内部 fixed 元素越级） ===== */
.reader-layer {
  position: fixed; z-index: 10; inset: 0;
  opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,4,3,.56), rgba(5,4,3,.30) 34%, rgba(5,4,3,.44));
  backdrop-filter: blur(6px);
  transition: opacity .42s ease;
}
.reader-layer.show { opacity: 1; pointer-events: auto; }
.reader-back {
  position: absolute; z-index: 30;
  border: 1px solid rgba(202,167,107,.38); border-radius: 999px;
  background: rgba(17,13,9,.70); color: #e8d5ae;
  padding: 10px 17px; cursor: pointer;
  backdrop-filter: blur(8px); transition: .25s ease;
}
.reader-back:hover, .reader-back:focus-visible {
  transform: translateY(-1px); border-color: rgba(224,190,126,.8);
  box-shadow: 0 0 22px rgba(202,167,107,.16); outline: none;
}
.date-wheel { position: absolute; perspective: 1000px; overflow: visible; }
.date-item {
  position: absolute; left: 45%; width: min(84%,320px); min-height: 74px;
  padding: 13px 24px 12px 22px;
  border: 1px solid rgba(211,169,94,.52); border-radius: 0;
  clip-path: polygon(4% 0,96% 2%,100% 50%,96% 98%,3% 100%,0 54%,1% 13%);
  background: linear-gradient(110deg, rgba(92,61,25,.14), rgba(10,8,6,.34) 52%, rgba(48,31,13,.16));
  color: rgba(239,213,164,.72); text-align: left; cursor: pointer;
  transform-origin: 10% 50%; backdrop-filter: blur(3px);
  box-shadow: inset 0 0 0 1px rgba(255,223,151,.035), 0 8px 22px rgba(0,0,0,.16);
  transition: top .48s var(--sl-ease), transform .48s var(--sl-ease), opacity .34s ease, color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.date-item::before {
  content: ""; position: absolute; left: 7px; top: 7px; width: 7px; height: 7px;
  border-top: 1px solid rgba(224,185,112,.56); border-left: 1px solid rgba(224,185,112,.56);
  transform: rotate(6deg);
}
.date-item::after {
  content: "✦"; position: absolute; right: -17px; top: 50%;
  transform: translateY(-50%) scale(.62);
  color: rgba(218,175,94,.22); font-size: 20px; line-height: 1;
  text-shadow: 0 0 10px rgba(218,175,94,.18); transition: .25s ease;
}
.date-item .date { display: block; font-size: 16px; letter-spacing: .10em; text-shadow: 0 2px 9px rgba(0,0,0,.92); }
.date-item .summary {
  display: block; margin-top: 7px; color: rgba(234,211,170,.66);
  font-size: 12px; letter-spacing: .035em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: 0; max-height: 0; transition: opacity .24s ease, max-height .24s ease;
}
.date-item.active {
  border-color: rgba(244,198,108,.92);
  background: linear-gradient(108deg, rgba(117,77,29,.52), rgba(19,13,8,.54) 54%, rgba(73,46,18,.32));
  color: #ffe3a4;
  box-shadow: inset 0 0 0 1px rgba(255,229,165,.12), 0 12px 30px rgba(0,0,0,.34), 0 0 26px rgba(218,169,78,.16);
}
.date-item.active::after { right: -22px; color: #efc36f; transform: translateY(-50%) scale(1); text-shadow: 0 0 16px rgba(235,184,86,.74); }
.date-item.active .summary { opacity: 1; max-height: 24px; color: rgba(255,228,174,.88); }
.date-item[data-slot="-4"] { top: -34%; transform: translateX(-94%) rotate(-11deg) rotateY(16deg) scale(.54); opacity: 0; pointer-events: none; }
.date-item[data-slot="-3"] { top: -14%; transform: translateX(-86%) rotate(-9deg) rotateY(13deg) scale(.64); opacity: .08; pointer-events: none; }
.date-item[data-slot="-2"] { top: 4%; transform: translateX(-78%) rotate(-6.5deg) rotateY(9deg) scale(.76); opacity: .52; }
.date-item[data-slot="-1"] { top: 23%; transform: translateX(-61%) rotate(-3deg) rotateY(5deg) scale(.9); opacity: .82; }
.date-item[data-slot="0"] { top: 43%; transform: translateX(-42%) rotate(0deg) rotateY(0deg) scale(1.04); opacity: 1; }
.date-item[data-slot="1"] { top: 64%; transform: translateX(-61%) rotate(3deg) rotateY(-5deg) scale(.9); opacity: .82; }
.date-item[data-slot="2"] { top: 83%; transform: translateX(-78%) rotate(6.5deg) rotateY(-9deg) scale(.76); opacity: .52; }
.date-item[data-slot="3"] { top: 102%; transform: translateX(-86%) rotate(9deg) rotateY(-13deg) scale(.64); opacity: .08; pointer-events: none; }
.date-item[data-slot="4"] { top: 121%; transform: translateX(-94%) rotate(11deg) rotateY(-16deg) scale(.54); opacity: 0; pointer-events: none; }
.paper {
  position: fixed; z-index: 52; left: 0; top: 0; width: 1px; height: 1px;
  object-fit: contain;
  filter: drop-shadow(0 28px 38px rgba(0,0,0,.52));
  opacity: 0; transform: none; transform-origin: 50% 50%;
  clip-path: inset(0 0 0 0 round 3px);
  user-select: none; pointer-events: none; backface-visibility: hidden;
  will-change: transform, opacity, clip-path;
}
.paper.show { opacity: 1; }
.paper.is-switching { transition: opacity .22s ease, transform .34s var(--sl-ease); }
.paper.is-opening { transition: none !important; z-index: 70; }
.letter-copy {
  position: fixed; z-index: 72; left: 0; top: 0; width: 1px; height: 1px;
  color: rgba(66,47,31,.92); text-shadow: 0 1px rgba(255,255,255,.18);
  overflow: auto; scrollbar-width: thin;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .40s ease, transform .46s var(--sl-ease);
}
.letter-copy.is-ready { pointer-events: auto; }
.letter-copy.show { opacity: 1; transform: none; }
.letter-title { text-align: center; font-size: 26px; letter-spacing: .12em; margin: 0 0 10px; font-weight: 500; }
.letter-date { text-align: center; font-size: 12px; letter-spacing: .16em; margin-bottom: 34px; color: rgba(72,52,35,.56); }
.letter-body { white-space: pre-wrap; line-height: 2; font-size: 16px; letter-spacing: .03em; }
.reader-count {
  position: absolute; transform: translateX(-50%);
  font-size: 13px; letter-spacing: .18em; color: rgba(224,197,143,.68); z-index: 30;
  text-shadow: 0 2px 8px #000;
}

/* ===== 椅子 / 窗户占位热区的 hover 微亮（唯一提示，无框；沿用书房热区既有约定） ===== */
#studySceneHotspots .scene-hotspot[data-hotspot-id="chair"],
#studySceneHotspots .scene-hotspot[data-hotspot-id="window"] { transition: filter var(--motion-scene-hotspot, .18s) ease; }
#studySceneHotspots .scene-hotspot[data-hotspot-id="chair"]:hover,
#studySceneHotspots .scene-hotspot[data-hotspot-id="chair"]:focus-visible,
#studySceneHotspots .scene-hotspot[data-hotspot-id="window"]:hover,
#studySceneHotspots .scene-hotspot[data-hotspot-id="window"]:focus-visible {
  filter: brightness(1.18);
  outline: none;
}

/* ===== prefers-reduced-motion（demo 分支保留；模块 JS 侧另有严格降级） ===== */
@media (prefers-reduced-motion: reduce) {
  .today-layer *, .recent-detail-layer *, .board-layer *, .reader-layer *, .sl-overlay,
  .sl-today-envelope, .sl-recent-card, .date-wheel * {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
  }
}