/* ==================== 基础 ==================== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Noto Serif SC','Songti SC','SimSun',serif;
  color:#e8dcc0;background:#14100b;overflow-x:hidden;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.stage{
  position:fixed;inset:0;z-index:0;
  background:url("assets/wood.jpg") center/cover no-repeat;
}
.stage::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 40%,rgba(0,0,0,.12),rgba(0,0,0,.6) 82%);
}
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
:focus-visible{outline:2px solid #e8cf8f;outline-offset:2px}

/* ==================== 视图切换 ==================== */
.view{
  position:fixed;inset:0;z-index:1;padding:18px;overflow:auto;
  display:flex;align-items:center;justify-content:center;
  visibility:hidden;opacity:0;transition:opacity .5s ease,visibility 0s linear .5s;
}
.view.active{visibility:visible;opacity:1;transition:opacity .5s ease;z-index:2}

/* ==================== 封面 ==================== */
.cover-wrap{display:flex;align-items:center;gap:clamp(10px,4vw,46px);margin:auto}
.cover-card{
  position:relative;width:min(600px,88vw);cursor:pointer;text-align:center;color:#2b1e10;
  background:url("assets/parchment.jpg") center/cover;
  border:1px solid rgba(84,55,18,.6);border-radius:4px;
  box-shadow:0 26px 70px rgba(0,0,0,.65),inset 0 0 90px rgba(96,64,22,.25);
  padding:clamp(30px,6vw,56px) clamp(26px,5vw,52px) clamp(24px,4vw,38px);
  display:flex;flex-direction:column;align-items:center;gap:13px;
  font-family:'Noto Serif SC','Songti SC',serif;
}
.cover-card::before{
  content:"";position:absolute;inset:11px;pointer-events:none;
  border:1px solid rgba(90,60,20,.42);border-radius:2px;
}
.cc-motto{font-family:'IM Fell English',Georgia,serif;font-style:italic;letter-spacing:.16em;font-size:.92rem;color:#6b4a1f}
.cc-title{font-family:'Ma Shan Zheng','Noto Serif SC',serif;font-size:clamp(2.3rem,7vw,4rem);line-height:1.32;letter-spacing:.08em;color:#241708;text-shadow:0 1px 0 rgba(255,255,255,.28)}
.cc-sub{font-size:.94rem;color:#5c4422;letter-spacing:.46em;padding-left:.46em}
.cc-seal{
  width:60px;height:60px;margin-top:6px;color:#ecd296;
  background:url("assets/seal.png") center/cover no-repeat;
  display:grid;place-items:center;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));
  animation:sealPulse 2.8s ease-in-out infinite;
}
.cc-seal svg{width:26px;height:26px}
.cc-hint{font-family:'IM Fell English',Georgia,serif;font-style:italic;font-size:.8rem;color:#6b4a1f;letter-spacing:.1em}
@keyframes sealPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.cover-card:hover .cc-seal,.cover-card:focus-visible .cc-seal{transform:scale(1.08)}

/* 蜡烛 */
.candle{position:relative;width:26px;height:150px;flex:none}
.c-glow{
  position:absolute;left:50%;bottom:86px;width:130px;height:130px;
  transform:translate(-50%,50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,170,80,.38),rgba(255,170,80,0) 65%);
  animation:glowPulse 3.2s ease-in-out infinite;
}
.c-wax{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:15px;height:104px;border-radius:2px 2px 4px 4px;
  background:linear-gradient(90deg,#d9c297,#f4e8c8 45%,#cbb487);
  box-shadow:inset -2px 0 4px rgba(0,0,0,.18);
}
.c-wax::before{
  content:"";position:absolute;top:-7px;left:-4px;width:23px;height:10px;
  background:radial-gradient(ellipse at 50% 30%,#f7eed2,#dcc79c);border-radius:50%;
}
.c-flame{
  position:absolute;left:50%;bottom:112px;width:13px;height:20px;
  transform:translateX(-50%);transform-origin:50% 100%;
  background:radial-gradient(circle at 50% 72%,#fff6cf 0%,#ffd98a 40%,#f9a03f 70%,rgba(249,160,63,0) 78%);
  border-radius:50% 50% 46% 46%/58% 58% 42% 42%;
  filter:drop-shadow(0 0 10px rgba(255,170,70,.55));
  animation:flicker 2.6s ease-in-out infinite;
}
.c-flame::after{
  content:"";position:absolute;left:50%;top:24%;width:5px;height:8px;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(180,220,255,.35) 70%);
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}
@keyframes flicker{
  0%,100%{transform:translateX(-50%) scale(1) rotate(-2deg)}
  25%{transform:translateX(-54%) scale(1.07,.93) rotate(2deg)}
  50%{transform:translateX(-46%) scale(.93,1.06)}
  75%{transform:translateX(-50%) scale(1.04,.96) rotate(-1deg)}
}
@keyframes glowPulse{0%,100%{opacity:.42}50%{opacity:.8}}

/* ==================== 书柜 ==================== */
.bookcase{
  position:relative;width:min(960px,96vw);margin:auto;
  background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.32)),url("assets/wood.jpg") center/cover;
  border:10px solid #150c06;border-radius:8px;
  box-shadow:0 40px 90px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.05),inset 0 0 70px rgba(0,0,0,.5);
  padding:14px 30px 12px;display:flex;flex-direction:column;gap:10px;
}
.pediment{display:flex;align-items:center;justify-content:center;gap:18px;flex:none}
.ped-flourish{width:110px;height:20px;color:#8a6d2f}
.ped-flourish.mirror{transform:scaleX(-1)}
.plaque{
  background:linear-gradient(180deg,#8f7130,#6b5222 60%,#57411a);
  border:2px solid #3e2f14;border-radius:9px;padding:5px 26px 7px;text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 8px rgba(0,0,0,.5);
}
.plaque .la{font-family:'Cinzel Decorative',serif;font-size:.6rem;letter-spacing:.44em;color:#e8cf8f;padding-left:.44em;margin-bottom:2px}
.plaque .zh{font-family:'Ma Shan Zheng','Noto Serif SC',serif;font-size:1.4rem;letter-spacing:.3em;padding-left:.3em;color:#f6e7bd;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.row{display:flex;align-items:flex-end;justify-content:center;gap:clamp(8px,1.8vw,20px);min-height:140px;flex:none;padding:0 8px}
.plank{
  height:16px;flex:none;position:relative;border-radius:3px;
  background:linear-gradient(180deg,#4e3521,#2c1c10 55%,#170d05);
  box-shadow:0 5px 8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14);
}
.plank::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0))}
.base{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);
  z-index:5;display:flex;justify-content:center;align-items:center;gap:12px;
  padding:8px 16px;background:rgba(18,10,4,.74);border:1px solid rgba(201,162,75,.45);
  border-radius:26px;box-shadow:0 8px 22px rgba(0,0,0,.55);
}
#view-library.revealed .base{display:none}
.backlink{
  font-family:'IM Fell English',Georgia,serif;font-style:italic;font-size:.86rem;color:#e8cf8f;
  background:rgba(20,12,5,.6);border:1px solid rgba(201,162,75,.4);border-radius:20px;
  padding:6px 16px;transition:background .2s,border-color .2s;
}
.backlink:hover,.backlink:focus-visible{background:rgba(60,40,16,.7);border-color:#e8cf8f}
.base-note{font-size:.72rem;color:rgba(232,220,190,.55);letter-spacing:.05em}

/* 书 */
.book{
  position:relative;flex:none;width:var(--w);height:var(--h);
  transform:scale(var(--s,1));transform-origin:50% 100%;z-index:1;
  filter:drop-shadow(4px 6px 6px rgba(0,0,0,.5));
  transition:transform .22s cubic-bezier(.22,1,.36,1),filter .22s;
}
.book:hover,.book:focus-visible{transform:scale(var(--s,1)) translateY(-10px);z-index:4;filter:drop-shadow(4px 8px 8px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(233,199,106,.4))}
.book.lean{transform:scale(var(--s,1)) rotate(13deg) translateX(-6px)}
.book.lean:hover,.book.lean:focus-visible{transform:scale(var(--s,1)) rotate(7deg) translateY(-6px) translateX(-4px)}
.book .spine{
  position:absolute;inset:0;border-radius:3px 8px 8px 3px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,0) 16%,rgba(0,0,0,0) 84%,rgba(0,0,0,.32)),
    linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 34%),
    var(--c);
  box-shadow:inset -2px 0 4px rgba(0,0,0,.3),inset 2px 0 1px rgba(255,255,255,.1);
}
.book .spine::before{
  content:"";position:absolute;left:2px;top:6%;bottom:6%;width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.04));
}
.book .title{
  position:absolute;left:2px;right:2px;top:30px;bottom:30px;
  display:flex;align-items:center;justify-content:center;
  writing-mode:vertical-rl;text-align:center;
  font-family:'Noto Serif SC','Songti SC',serif;font-weight:900;font-size:15px;
  letter-spacing:.3em;padding-left:.3em;color:#f2dd9e;text-shadow:0 1px 2px rgba(0,0,0,.65);
}
.book .band{
  position:absolute;left:4px;right:4px;height:8px;border-radius:2px;
  background:linear-gradient(180deg,#e7c96f,#8a6d2f 48%,#c9a24b 52%,#6b5222);
  box-shadow:0 1px 2px rgba(0,0,0,.5);
}
.book .band.b1{top:13px}
.book .band.b2{bottom:13px}

/* 陈列小物 */
.candle.small{height:118px;transform:scale(.72);transform-origin:50% 100%}
.candle.small .c-wax{height:82px}
.candle.small .c-flame{bottom:90px}
.candle.small .c-glow{bottom:70px}
.hourglass{flex:none;width:44px;height:66px;filter:drop-shadow(0 4px 5px rgba(0,0,0,.45))}
.hourglass svg{width:100%;height:100%;display:block}
.potion{position:relative;flex:none;width:38px;height:72px;filter:drop-shadow(0 4px 5px rgba(0,0,0,.45))}
.pot-cork{position:absolute;top:0;left:50%;transform:translateX(-50%);width:14px;height:10px;border-radius:3px;background:linear-gradient(90deg,#8a6a44,#b08d5f 45%,#7a5c38)}
.pot-neck{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:12px;height:14px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,rgba(140,110,70,.75),rgba(190,170,130,.5) 50%,rgba(120,95,60,.75))}
.pot-body{position:absolute;top:22px;left:0;width:38px;height:46px;border-radius:46% 46% 42% 42%/30% 30% 46% 46%;overflow:hidden;background:linear-gradient(90deg,rgba(110,85,55,.55),rgba(190,165,120,.35) 40%,rgba(130,105,70,.6))}
.pot-liquid{position:absolute;left:0;right:0;bottom:0;height:58%;background:linear-gradient(180deg,rgba(120,160,90,.9),rgba(60,110,60,.95));border-top:2px solid rgba(255,255,255,.18)}
.pot-liquid::after{content:"";position:absolute;left:6px;top:4px;width:7px;height:40%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0))}
.cobweb{position:absolute;top:0;right:0;width:150px;height:150px;opacity:.5;pointer-events:none}

/* ===== 机关：长按左右拖动书柜 · 暗门 ===== */
#view-library{overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.bookcase{transition:transform 1s cubic-bezier(.65,0,.35,1)}
#view-library .bookcase.dragging{transition:none}
#view-library.revealed.rv-right .bookcase{transform:translateX(calc(100% + 80px));pointer-events:none}
#view-library.revealed.rv-left .bookcase{transform:translateX(calc(-100% - 80px));pointer-events:none}
.gesture-hint{font-size:.78rem;color:rgba(240,220,174,.82);letter-spacing:.08em;white-space:nowrap}
/* ===== 暗门：墙上的拱形洞口 ===== */
.portal{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(480px,88vw);height:min(600px,72vh);z-index:1;
  pointer-events:none;visibility:hidden;
}
#view-library.active ~ .portal{visibility:visible}
.portal::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:135%;height:125%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 45%,rgba(140,150,235,.14),rgba(140,150,235,0) 62%);
}
.portal-frame{
  position:absolute;inset:0;padding:20px;
  border-radius:50% 50% 14px 14px/44% 44% 14px 14px;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 2px,rgba(0,0,0,0) 2px 58px),
    linear-gradient(180deg,#5d4a31,#3b2d1c 60%,#2a1f12);
  box-shadow:0 34px 70px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.12),inset 0 -4px 10px rgba(0,0,0,.55);
}
.portal-frame::before{
  content:"";position:absolute;inset:11px;pointer-events:none;
  border-radius:50% 50% 10px 10px/42% 42% 10px 10px;
  border:2px solid rgba(201,162,75,.6);
}
.portal-open{
  position:absolute;inset:19px;overflow:hidden;
  border-radius:50% 50% 8px 8px/41% 41% 8px 8px;
  background:#07040f;box-shadow:inset 0 0 70px rgba(0,0,0,.9);
}
.portal-open::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgba(0,0,0,.5),transparent 14%,transparent 86%,rgba(0,0,0,.5));
}
.portal-open::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:radial-gradient(ellipse at 50% 38%,rgba(0,0,0,0) 45%,rgba(5,3,14,.5) 100%);
}
.portal-sky{position:absolute;inset:0;background:url("assets/secret.jpg") center/cover no-repeat}

/* 关上暗门按钮 */
.secret-close{
  position:fixed;left:50%;bottom:36px;transform:translateX(-50%);z-index:6;display:none;
  font-family:'IM Fell English',Georgia,serif;font-style:italic;font-size:.9rem;color:#f2e6c8;
  background:rgba(24,14,34,.66);border:1px solid rgba(240,215,160,.5);border-radius:22px;
  padding:9px 24px;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.5);
  transition:background .2s;
}
#view-library.revealed .secret-close{display:block}
.secret-close:hover,.secret-close:focus-visible{background:rgba(60,40,80,.7)}

/* ===== 星海旅程：点击暗门后的全屏星空 ===== */
.journey{
  position:fixed;inset:0;z-index:70;pointer-events:none;
  background:url("assets/journey.webp") center/cover no-repeat;
  opacity:0;visibility:hidden;transition:opacity .8s ease;
}
.journey.on{opacity:1;visibility:visible;pointer-events:auto}
.journey-text{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:'IM Fell English',Georgia,serif;font-style:italic;
  letter-spacing:.3em;text-indent:.3em;font-size:clamp(1.15rem,3.2vw,1.75rem);
  color:#fff;white-space:nowrap;text-shadow:0 2px 20px rgba(0,0,0,.6);
  opacity:0;transition:opacity 1.4s ease .9s;
}
.journey.on .journey-text{opacity:1}
.journey-back{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  font-family:'IM Fell English',Georgia,serif;font-style:italic;font-size:.8rem;
  letter-spacing:.18em;color:rgba(255,255,255,.72);text-shadow:0 1px 8px rgba(0,0,0,.5);
  opacity:0;transition:opacity 1.2s ease 1.6s;white-space:nowrap;
}
.journey.on .journey-back{opacity:1}

/* 入场动效 */
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.book.stagger .spine{animation:riseIn .5s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--d,0ms)}
.deco.stagger{animation:fadeIn .5s ease both;animation-delay:var(--d,0ms)}

/* ==================== 书卷弹层 ==================== */
.modal{
  position:fixed;inset:0;z-index:40;display:none;align-items:center;justify-content:center;
  background:rgba(12,7,3,.72);padding:20px;
}
.modal.open{display:flex}
.openbook{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  width:min(760px,94vw);min-height:min(430px,72vh);
  background:url("assets/parchment.jpg") center/cover;
  border-radius:6px;color:#2b1e10;
  box-shadow:0 30px 90px rgba(0,0,0,.75),0 0 0 1px rgba(90,60,20,.4);
  animation:bookIn .34s cubic-bezier(.22,1,.36,1);
}
@keyframes bookIn{from{opacity:0;transform:perspective(900px) rotateX(8deg) scale(.94)}to{opacity:1;transform:none}}
.page{position:relative;padding:clamp(22px,4vw,40px) clamp(20px,3vw,34px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}
.page-l{border-right:2px solid rgba(80,52,20,.3)}
.page-l::after{content:"";position:absolute;right:0;top:0;bottom:0;width:26px;pointer-events:none;background:linear-gradient(90deg,rgba(60,35,10,.26),transparent 70%)}
.page-r::before{content:"";position:absolute;left:0;top:0;bottom:0;width:20px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(60,35,10,.18))}
.p-numeral{font-family:'Cinzel Decorative',serif;font-size:2.6rem;line-height:1;color:#8a6d2f;text-shadow:0 1px 0 rgba(255,255,255,.3)}
.p-kicker{font-family:'IM Fell English',Georgia,serif;font-style:italic;font-size:.78rem;letter-spacing:.3em;color:#7a5c2e;padding-left:.3em}
.p-name{font-family:'Ma Shan Zheng','Noto Serif SC',serif;font-size:clamp(1.7rem,4.4vw,2.5rem);font-weight:400;line-height:1.3;color:#241708;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.p-rule{width:150px;color:#8a6d2f}
.p-label{font-family:'Cinzel Decorative',serif;font-size:.66rem;letter-spacing:.42em;color:#7a5c2e;padding-left:.42em}
.p-intro{font-family:'Noto Serif SC','Songti SC',serif;font-size:1.04rem;line-height:2;color:#33240f;max-width:30ch}

/* ==================== 响应式 ==================== */
@media (max-width:640px){
  .bookcase{padding:14px 14px 12px;gap:8px}
  .plaque{padding:5px 14px 7px}
  .plaque .zh{font-size:1.2rem;letter-spacing:.22em;padding-left:.22em}
  .ped-flourish{width:54px}
  .row{min-height:120px}
  .book{height:calc(var(--h)*.82)}
  .book .title{font-size:12px}
  .base-note{display:none}
  .gesture-hint{display:none}
  .base{bottom:12px;padding:7px 12px;gap:10px}
  .backlink{font-size:.78rem;padding:5px 12px}
  .secret-close{bottom:14px;font-size:.8rem;padding:8px 18px}
  .portal{width:min(440px,88vw);height:min(540px,72vh)}
  .journey-text{letter-spacing:.12em;text-indent:.12em;font-size:1.05rem}
  .journey-back{font-size:.66rem;bottom:22px}
}
@media (max-width:560px){
  .openbook{grid-template-columns:1fr;min-height:auto}
  .page{padding:22px 18px}
  .page-l{border-right:0;border-bottom:1px solid rgba(80,52,20,.3)}
  .page-l::after{display:none}
  .p-intro{max-width:36ch}
}

/* ==================== 减弱动效 ==================== */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}