/* ═══════════════════════════════════════════════════════════
   Codex Astra · Allen 的宇宙圖書館 — 點擊冒險版
   範式：手遊單場景 hub-and-rooms，零捲軸
   場景底圖：library-assets/hall.jpg · shelf.jpg · treasures.jpg · spells.jpg · vault.jpg
   （hall 2026-07-01 定調；其餘 2026-07-06 GPT Image 重生，1536×1024）
   ═══════════════════════════════════════════════════════════ */
:root {
  --void: #03050b;
  --void-blue: #081322;
  --brass: #d8b36d;
  --brass-deep: #a98749;
  --moon: #c8d4df;
  --copper: #b86f4c;
  --gold: var(--brass);
  --gold-deep: var(--brass-deep);
  --gold-glow: rgba(216, 179, 109, .34);
  --gold-faint: rgba(216, 179, 109, .12);
  --parchment: #eee5d0;
  --ink-warm: #2a2216;
  --text-dim: #bdc1c9;
  --text-faint: #7d8491;
  --spine-lapis-a: #2c4a7c;   --spine-lapis-b: #16294e;
  --spine-jade-a: #1f5c4a;    --spine-jade-b: #0e3328;
  --spine-wine-a: #6e2b35;    --spine-wine-b: #3a141c;
  --spine-amethyst-a: #4a3573;--spine-amethyst-b: #251a42;
  --spine-amber-a: #8a5a2a;   --spine-amber-b: #4a2d12;
  --spine-teal-a: #1f4c5c;    --spine-teal-b: #0e2832;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --serif: 'Noto Serif TC', 'Iowan Old Style', 'Palatino Linotype', serif;
  --latin: 'Cormorant Garamond', 'Noto Serif TC', serif;
  --sans: 'Noto Sans TC', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background:
    radial-gradient(70vw 60vh at 50% 28%, rgba(31, 58, 84, .38), transparent 62%),
    linear-gradient(180deg, #03050b, #060710 58%, #03050b);
  color: var(--parchment);
  font-family: var(--sans);
  overflow: hidden;               /* 遊戲：無捲軸 */
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ── 星塵 canvas（最上飄） ── */
#cosmos { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
/* 噪點 */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══ 場景系統 ═══════════════════════════════ */
.scene {
  position: fixed; inset: 0; z-index: 1;
  opacity: 0; pointer-events: none;
  transition: opacity .6s var(--ease);
  display: grid; place-items: center;
}
.scene.on { opacity: 1; pointer-events: auto; z-index: 2; }
/* 鏡頭推進進場 */
.scene .cam {
  position: absolute; inset: 0;
  transform: scale(1.08);
  transition: transform 1.1s var(--ease);
  will-change: transform;
}
.scene.on .cam { transform: scale(1); }

/* 場景底圖層 */
.bg {
  position: absolute; inset: -3.5%;
  background-size: cover; background-position: center;
  will-change: transform;
}
.bg.hall { background-image: url('library-assets/hall.jpg'); }
.bg.shelfscape { background-image: url('library-assets/shelf.jpg'); }
.bg.treasurescape { background-image: url('library-assets/treasures.jpg'); }
.bg.spellscape { background-image: url('library-assets/spells.jpg'); }
.bg.vaultscape { background-image: url('library-assets/vault.jpg'); }
/* 暗角+調色（手遊景深感） */
.grade { position: absolute; inset: 0; pointer-events: none; }
.grade.vignette {
  background:
    radial-gradient(80% 68% at 50% 42%, transparent 34%, rgba(3,4,10,.42) 69%, rgba(2,3,8,.88) 100%),
    linear-gradient(90deg, rgba(3,5,10,.72), transparent 24%, transparent 76%, rgba(3,5,10,.72));
}
.grade.dim { background: linear-gradient(180deg, rgba(4, 8, 16, .44), rgba(3, 4, 10, .64)); }
.grade.deep { background: linear-gradient(180deg, rgba(4, 8, 16, .7), rgba(3, 4, 10, .82)); }
.grade.violet { background: linear-gradient(180deg, rgba(24,22,42,.62), rgba(5,6,14,.84)); }
.bg.blur { filter: blur(9px) saturate(1.06); inset: -6%; }
/* 房間專屬場景圖（2026-07-06 GPT Image 重生）：輕糊即可，保留場景細節 */
.bg.soft { filter: blur(5px) saturate(1.06); inset: -6%; }

/* 建築縱深：用細線和光束補足背景圖的真實空間感 */
.archive-depth {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  perspective: 900px; overflow: hidden;
}
.archive-depth::before {
  content: ''; position: absolute; left: 50%; top: 10%; width: min(760px, 64vw); height: 76vh;
  transform: translateX(-50%) rotateX(62deg);
  background:
    repeating-linear-gradient(90deg, rgba(200,212,223,.12) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg, rgba(216,179,109,.1) 0 1px, transparent 1px 72px);
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 0 62%, transparent 82%);
          mask-image: radial-gradient(closest-side at 50% 50%, #000 0 62%, transparent 82%);
  opacity: .48;
}
.archive-depth::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(102deg, transparent 16%, rgba(200,212,223,.11) 24%, transparent 34%),
    linear-gradient(258deg, transparent 18%, rgba(216,179,109,.1) 29%, transparent 43%),
    radial-gradient(34vw 46vh at 50% 18%, rgba(216,179,109,.16), transparent 68%);
  mix-blend-mode: screen;
  opacity: .8;
}
.archive-depth i {
  position: absolute; top: 18%; bottom: 9%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(200,212,223,.22), rgba(216,179,109,.18), transparent);
  box-shadow: 0 0 22px rgba(200,212,223,.12);
}
.archive-depth i:nth-child(1) { left: 13%; transform: rotate(5deg); }
.archive-depth i:nth-child(2) { left: 24%; transform: rotate(3deg); opacity: .58; }
.archive-depth i:nth-child(3) { left: 38%; transform: rotate(1deg); opacity: .42; }
.archive-depth i:nth-child(4) { right: 38%; transform: rotate(-1deg); opacity: .42; }
.archive-depth i:nth-child(5) { right: 24%; transform: rotate(-3deg); opacity: .58; }
.archive-depth i:nth-child(6) { right: 13%; transform: rotate(-5deg); }

/* ═══ Title 畫面 ═══════════════════════════ */
#scene-title .bg { filter: blur(4px) brightness(.62) saturate(.9); transform: scale(1.03); }
.title-core {
  position: relative; z-index: 3; text-align: center;
  width: min(960px, 94vw);
  min-height: min(760px, 94dvh);
  display: grid; place-items: center;
  padding: clamp(24px, 5vw, 56px) 20px;
}
.title-eyebrow {
  position: relative; z-index: 2;
  font-family: var(--latin); font-size: clamp(10px, 1.15vw, 13px);
  letter-spacing: .62em; text-indent: .62em; text-transform: uppercase; color: var(--moon);
  text-shadow: 0 0 18px rgba(200,212,223,.25);
}
.title-core h1 {
  position: relative; z-index: 2;
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(42px, 6.6vw, 86px); line-height: 1.14; letter-spacing: .08em;
  margin: 20px 0 12px;
  /* 金色流光 */
  background: linear-gradient(105deg,
    #b98d43 0%, #e8c07a 24%, #fff3d6 38%, #e8c07a 52%, #b98d43 72%, #e8c07a 88%, #b98d43 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: goldFlow 7.5s linear infinite;
  filter: drop-shadow(0 0 30px rgba(216,179,109,.3)) drop-shadow(0 8px 30px rgba(0,0,0,.85));
}
@keyframes goldFlow { 0% { background-position: 0% 0; } 100% { background-position: -240% 0; } }
.title-core .sub {
  position: relative; z-index: 2; color: var(--text-dim);
  font-size: clamp(13px, 1.3vw, 15px); letter-spacing: .12em;
}
.tap-enter {
  position: relative; z-index: 2;
  margin-top: 46px; display: inline-block;
  font-family: var(--serif); font-size: 14px; letter-spacing: .28em; text-indent: .28em;
  color: var(--gold); padding: 15px 38px;
  border: 1px solid rgba(216,179,109,.42);
  background:
    linear-gradient(180deg, rgba(200,212,223,.06), rgba(216,179,109,.05)),
    rgba(5,9,16,.36);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 18px 48px rgba(0,0,0,.35);
  animation: tapPulse 2.4s var(--ease) infinite;
  transition: all .4s var(--ease); min-height: 44px;
}
.tap-enter::before, .tap-enter::after {
  content: ''; position: absolute; top: 50%; width: 54px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216,179,109,.5));
}
.tap-enter::before { right: calc(100% + 14px); }
.tap-enter::after { left: calc(100% + 14px); transform: rotate(180deg); }
.tap-enter:hover { background: rgba(216,179,109,.11); box-shadow: 0 0 34px rgba(216,179,109,.22), inset 0 0 0 1px rgba(200,212,223,.09); }
@keyframes tapPulse { 0%,100% { opacity: .65; } 50% { opacity: 1; } }
.title-stats {
  position: relative; z-index: 2;
  margin-top: 38px; display: flex; justify-content: center; gap: clamp(26px, 5vw, 56px);
  font-family: var(--serif);
}
.title-stats b { display: block; font-size: clamp(20px, 2.4vw, 27px); font-weight: 900; color: var(--gold); }
.title-stats span { font-size: 10px; letter-spacing: .28em; text-indent: .28em; color: var(--moon); opacity: .72; }

/* 首屏記憶點：星盤藏書機關 */
.orrery {
  position: absolute; left: 50%; top: 50%;
  width: min(690px, 88vw); aspect-ratio: 1;
  transform: translate(-50%, -52%);
  border-radius: 50%; pointer-events: none;
  filter: drop-shadow(0 30px 70px rgba(0,0,0,.55));
}
.orrery::before {
  content: ''; position: absolute; inset: 13%; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(216,179,109,.2) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 50%, rgba(200,212,223,.13), transparent 34%),
    conic-gradient(from 14deg, transparent 0 8deg, rgba(216,179,109,.16) 8deg 9deg, transparent 9deg 18deg);
  box-shadow: inset 0 0 70px rgba(3,5,11,.68), 0 0 68px rgba(31,58,84,.28);
}
.orrery::after {
  content: ''; position: absolute; inset: 2%; border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(200,212,223,.44) 0 .28deg, transparent .28deg 5deg),
    radial-gradient(circle, transparent 69%, rgba(216,179,109,.24) 69.4%, transparent 70%),
    radial-gradient(circle, transparent 82%, rgba(200,212,223,.18) 82.3%, transparent 83%);
  -webkit-mask-image: radial-gradient(circle, transparent 39%, #000 40% 84%, transparent 86%);
          mask-image: radial-gradient(circle, transparent 39%, #000 40% 84%, transparent 86%);
  opacity: .78;
}
.orrery .ring, .orrery .orbit, .orrery .axis, .orrery .index-mark, .orrery .core-star { position: absolute; }
.orrery .ring {
  inset: var(--inset); border-radius: 50%;
  border: 1px solid rgba(216,179,109,.34);
  box-shadow: inset 0 0 20px rgba(216,179,109,.04), 0 0 18px rgba(200,212,223,.06);
}
.orrery .r1 { --inset: 6%; border-color: rgba(200,212,223,.24); }
.orrery .r2 { --inset: 18%; transform: rotateX(60deg) rotateZ(-18deg); border-color: rgba(216,179,109,.42); }
.orrery .r3 { --inset: 27%; transform: rotateX(68deg) rotateZ(36deg); border-color: rgba(184,111,76,.28); }
.orrery .r4 { --inset: 38%; border-color: rgba(200,212,223,.2); }
.orrery .axis {
  left: 11%; right: 11%; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,212,223,.32), rgba(216,179,109,.46), rgba(200,212,223,.32), transparent);
}
.orrery .axis.vertical { transform: rotate(90deg); }
.orrery .orbit {
  inset: var(--orbit-inset); border-radius: 50%;
  border: 1px solid rgba(200,212,223,.18);
  animation: orbitTurn var(--orbit-speed) linear infinite;
}
.orrery .o1 { --orbit-inset: 23%; --orbit-speed: 28s; }
.orrery .o2 { --orbit-inset: 34%; --orbit-speed: 22s; animation-direction: reverse; }
.orrery .o3 { --orbit-inset: 45%; --orbit-speed: 18s; transform: rotate(30deg); }
.orrery .orbit i {
  position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--moon); box-shadow: 0 0 16px rgba(200,212,223,.75), 0 0 26px rgba(216,179,109,.24);
}
@keyframes orbitTurn { to { transform: rotate(360deg); } }
.orrery .index-mark {
  left: 50%; top: 50%; width: 78%; height: 1px; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(216,179,109,.72), transparent 52%);
}
.orrery .m1 { transform: rotate(18deg); }
.orrery .m2 { transform: rotate(104deg); opacity: .64; }
.orrery .m3 { transform: rotate(211deg); opacity: .5; }
.orrery .m4 { transform: rotate(292deg); opacity: .58; }
.orrery .core-star {
  left: 50%; top: 50%; width: 15px; height: 15px; transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid var(--brass);
  background: rgba(216,179,109,.18);
  box-shadow: 0 0 22px rgba(216,179,109,.55), 0 0 80px rgba(200,212,223,.18);
}

/* ═══ HUD ═══════════════════════════════════ */
.hud { position: fixed; z-index: 30; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); }
body.in-game .hud { opacity: 1; }
.hud-top {
  top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px clamp(16px, 3vw, 36px);
  background: linear-gradient(180deg, rgba(3,5,11,.82), rgba(3,5,11,.34), transparent);
}
.hud a, .hud button { pointer-events: auto; }
.hud-brand { font-family: var(--latin); font-size: 13px; letter-spacing: .34em; color: var(--moon); text-transform: uppercase; }
.hud-right { display: flex; gap: 18px; align-items: center; }
.hud-btn {
  font-family: var(--serif); font-size: 12px; letter-spacing: .18em; color: var(--text-dim);
  padding: 9px 16px; border: 1px solid rgba(200,212,223,.18);
  transition: all .35s var(--ease); min-height: 40px;
  background: linear-gradient(180deg, rgba(200,212,223,.06), rgba(216,179,109,.035)), rgba(5,7,15,.5);
}
.hud-btn:hover { color: var(--gold); border-color: rgba(216,179,109,.48); box-shadow: 0 0 24px rgba(216,179,109,.12); }
.hud-loc {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  font-family: var(--serif); font-size: 12px; letter-spacing: .4em; text-indent: .4em;
  color: var(--moon);
  padding: 8px 22px; background: rgba(5,7,15,.62);
  border: 1px solid rgba(200,212,223,.16); border-radius: 99px;
  box-shadow: inset 0 0 18px rgba(216,179,109,.04);
}

/* ═══ Hub：大廳與熱點 ═══════════════════════ */
.hub-depth { opacity: .72; }
.hub-orrery {
  position: absolute; left: 50%; top: 52%; z-index: 2;
  width: min(780px, 90vw); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle, transparent 26%, rgba(216,179,109,.13) 26.2% 26.6%, transparent 27%),
    radial-gradient(circle, transparent 43%, rgba(200,212,223,.11) 43.3% 43.7%, transparent 44%),
    radial-gradient(circle, transparent 60%, rgba(216,179,109,.12) 60.2% 60.5%, transparent 61%);
  opacity: .86;
}
.hub-orrery span {
  position: absolute; left: 50%; top: 50%; width: 72%; height: 1px; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(200,212,223,.3), rgba(216,179,109,.16), transparent 62%);
}
.hub-orrery span:nth-child(1) { transform: rotate(26deg); }
.hub-orrery span:nth-child(2) { transform: rotate(112deg); opacity: .65; }
.hub-orrery span:nth-child(3) { transform: rotate(205deg); opacity: .55; }
.hub-orrery span:nth-child(4) { transform: rotate(306deg); opacity: .72; }
.hotspot {
  position: absolute; z-index: 4;
  display: grid; place-items: center; gap: 6px;
  transform: translate(-50%, -50%);
  pointer-events: auto; text-align: center;
}
.hotspot .pulse {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, #eff6ff 18%, rgba(216,179,109,.88) 48%, transparent 72%);
  box-shadow: 0 0 16px 4px rgba(216,179,109,.32), 0 0 30px rgba(200,212,223,.2);
  animation: hsPulse 3s var(--ease) infinite;
}
.hotspot::before { /* 外圈 */
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(200,212,223,.3);
  box-shadow: inset 0 0 0 8px rgba(216,179,109,.035);
  animation: hsRing 3s var(--ease) infinite;
}
@keyframes hsPulse { 0%,100% { transform: scale(.9); } 50% { transform: scale(1.15); } }
@keyframes hsRing { 0% { opacity: .8; width: 30px; height: 30px; } 100% { opacity: 0; width: 66px; height: 66px; } }
.hotspot .tag {
  margin-top: 30px;
  font-family: var(--serif); font-size: clamp(11px, 1.15vw, 13px); letter-spacing: .22em; text-indent: .22em;
  color: var(--parchment); white-space: nowrap;
  padding: 8px 16px;
  background: linear-gradient(180deg, rgba(200,212,223,.08), rgba(216,179,109,.04)), rgba(5,7,15,.72);
  border: 1px solid rgba(200,212,223,.18);
  text-shadow: 0 1px 6px rgba(0,0,0,.9);
  transition: all .35s var(--ease);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 16px 34px rgba(0,0,0,.28);
}
.hotspot .n { font-family: var(--latin); font-size: 10px; letter-spacing: .2em; color: var(--gold-deep); }
.hotspot:hover .tag {
  background: linear-gradient(180deg, rgba(216,179,109,.12), rgba(200,212,223,.06)), rgba(8,12,20,.86);
  border-color: rgba(216,179,109,.55); color: var(--gold);
  box-shadow: 0 0 26px rgba(216,179,109,.2), inset 0 0 0 1px rgba(255,255,255,.05);
}

/* ═══ 房間通用 ═══════════════════════════════ */
.room-inner {
  position: relative; z-index: 3;
  width: min(1150px, 94vw); max-height: calc(100dvh - 150px);
  margin-top: 26px;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(232,192,122,.3) transparent;
  padding: 6px 14px 30px;
}
.room-inner::before {
  content: ''; position: sticky; top: 0; display: block; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,212,223,.26), rgba(216,179,109,.18), transparent);
  margin-bottom: 20px; opacity: .75;
}
.room-head { text-align: center; margin-bottom: clamp(22px, 4vh, 40px); }
.room-head .no { font-family: var(--latin); font-size: 11px; letter-spacing: .5em; text-indent: .5em; color: var(--moon); opacity: .78; text-transform: uppercase; }
.room-head h2 {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(24px, 3.4vw, 40px); letter-spacing: .14em; margin: 10px 0 8px;
  text-shadow: 0 2px 20px rgba(0,0,0,.8), 0 0 24px rgba(216,179,109,.16);
}
.room-head .note { color: var(--text-dim); font-size: 12.5px; max-width: 48ch; margin: 0 auto; line-height: 1.9; }

/* ═══ 鎮館之寶（展台輪換） ═══════════════════ */
.treasure-stage { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(6px, 2vw, 26px); }
.t-arrow {
  font-family: var(--serif); font-size: 30px; color: var(--text-dim);
  padding: 20px 12px; transition: all .3s var(--ease); min-width: 44px;
}
.t-arrow:hover { color: var(--gold); transform: scale(1.15); }
.treasure {
  display: grid; grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.05fr);
  gap: clamp(24px, 4vw, 60px); align-items: center;
}
.t-visual { position: relative; display: grid; place-items: center; padding: 26px 0; }
.crystal {
  position: relative; width: min(300px, 62vw); aspect-ratio: 1; border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(216,179,109,.46), 0 0 0 12px rgba(200,212,223,.045),
    0 0 58px rgba(216,179,109,.22), 0 30px 70px rgba(0,0,0,.75),
    inset 0 0 50px rgba(10,8,20,.55);
  animation: crystalFloat 5.5s ease-in-out infinite;
}
@keyframes crystalFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.crystal img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.crystal::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(38% 24% at 30% 16%, rgba(255,255,255,.3), transparent 70%),
    radial-gradient(120% 70% at 50% 118%, rgba(10,8,20,.5), transparent 60%);
}
.crystal.empty {
  display: grid; place-items: center; text-align: center;
  background: radial-gradient(closest-side, rgba(74,53,115,.5), rgba(10,10,24,.92));
}
.crystal.empty .seal-note { font-family: var(--serif); color: var(--gold); font-size: 13px; letter-spacing: .2em; line-height: 2.2; padding: 0 30px; }
.t-visual::before {
  content: ''; position: absolute; border-radius: 50%;
  width: 124%; aspect-ratio: 1; border: 1px solid rgba(200,212,223,.14); pointer-events: none;
  background:
    radial-gradient(circle, transparent 58%, rgba(216,179,109,.08) 58.3% 58.8%, transparent 59%),
    conic-gradient(from 20deg, transparent 0 11deg, rgba(216,179,109,.12) 11deg 11.5deg, transparent 11.5deg 24deg);
}
/* 展台座 */
.t-visual::after {
  content: ''; position: absolute; bottom: -2px; width: 58%; height: 20px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232,192,122,.22), transparent 75%);
}
.t-body .t-kind { font-family: var(--latin); font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--moon); opacity: .8; }
.t-body h3 {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(21px, 2.6vw, 32px); letter-spacing: .04em; line-height: 1.4; margin: 10px 0 12px;
  text-shadow: 0 2px 16px rgba(0,0,0,.8);
}
.t-body p { color: var(--text-dim); font-size: 13.5px; line-height: 2; max-width: 46ch; }
.t-meta { display: flex; gap: 24px; margin: 18px 0 4px; }
.t-meta div { border-top: 1px solid rgba(232,192,122,.24); padding-top: 10px; }
.t-meta b { display: block; font-family: var(--serif); font-weight: 700; font-size: 16px; }
.t-meta span { font-size: 10.5px; color: var(--text-faint); letter-spacing: .08em; }
.t-dots { display: flex; gap: 9px; justify-content: center; margin-top: 22px; grid-column: 1 / -1; }
.t-dots i { width: 8px; height: 8px; transform: rotate(45deg); border: 1px solid rgba(232,192,122,.4); transition: all .3s var(--ease); cursor: pointer; }
.t-dots i.on { background: var(--gold); box-shadow: 0 0 10px var(--gold-glow); }

.portal {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
  font-family: var(--serif); font-size: 13px; letter-spacing: .16em; color: var(--gold);
  border: 1px solid rgba(216,179,109,.38); padding: 11px 22px;
  transition: all .4s var(--ease); min-height: 44px;
  background: linear-gradient(180deg, rgba(200,212,223,.055), rgba(216,179,109,.045)), rgba(5,7,15,.35);
}
.portal:hover { background: var(--gold-faint); box-shadow: 0 0 24px rgba(216,179,109,.18); letter-spacing: .2em; }
.portal.sealed { color: var(--text-faint); border-color: rgba(167,159,196,.25); pointer-events: none; }

/* ═══ 書庫翼廊（挑書房間） ═══════════════════ */
.wing-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: clamp(20px, 3.5vh, 34px); }
.wing-tab {
  font-family: var(--serif); font-size: 12.5px; letter-spacing: .16em;
  color: var(--text-dim); padding: 9px 18px;
  border: 1px solid rgba(200,212,223,.16);
  background: linear-gradient(180deg, rgba(200,212,223,.06), rgba(216,179,109,.025)), rgba(5,7,15,.5);
  transition: all .35s var(--ease); min-height: 40px;
}
.wing-tab:hover { color: var(--gold); border-color: rgba(216,179,109,.45); }
.wing-tab.on {
  color: var(--gold); border-color: rgba(216,179,109,.64);
  background: linear-gradient(180deg, rgba(216,179,109,.13), rgba(200,212,223,.05)), rgba(5,7,15,.64);
  box-shadow: 0 0 18px rgba(216,179,109,.14), inset 0 0 0 1px rgba(255,255,255,.035);
}
.wing-sub { text-align: center; color: var(--text-faint); font-size: 12px; letter-spacing: .1em; margin-bottom: 24px; }

.shelf {
  position: relative;
  display: flex; align-items: flex-end; justify-content: safe center; gap: 9px;
  padding: 38px 26px 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.shelf::before {
  content: ''; position: absolute; left: 3%; right: 3%; bottom: 7px; height: 105px; pointer-events: none;
  background:
    radial-gradient(60% 90% at 50% 100%, rgba(216,179,109,.13), transparent 70%),
    linear-gradient(90deg, transparent, rgba(200,212,223,.08), transparent);
  filter: blur(10px);
}
.shelf::-webkit-scrollbar { display: none; }
.shelf-board { position: relative; height: 18px; }
.shelf-board::before {
  content: ''; position: absolute; inset: 0 6px;
  background:
    linear-gradient(180deg, rgba(200,212,223,.12), transparent 45%),
    linear-gradient(180deg, #2b2630, #0e1018);
  border-top: 1px solid rgba(216,179,109,.42);
  box-shadow: 0 10px 26px rgba(0,0,0,.6), 0 0 22px rgba(216,179,109,.08), inset 0 1px 0 rgba(255,222,160,.18);
  border-radius: 2px;
}
.shelf-board::after {
  content: 'ASTRA INDEX  ·  LIVE SERVICES  ·  TOOLS  ·  DESIGN  ·  RESEARCH';
  position: absolute; inset: 2px 20px 0; text-align: center;
  font-family: var(--latin); font-size: 9px; letter-spacing: .72em; color: rgba(200,212,223,.34);
  overflow: hidden; white-space: nowrap;
}

/* 書脊（含 idle 呼吸） */
.tome {
  position: relative; flex: 0 0 auto;
  width: var(--tw, 50px); height: var(--th, 190px);
  scroll-snap-align: center;
  border-radius: 3px 5px 2px 2px;
  cursor: pointer;
  background:
    linear-gradient(90deg, rgba(216,179,109,.22) 0 1px, transparent 1px calc(100% - 1px), rgba(0,0,0,.38) calc(100% - 1px)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 1px, transparent 1px 6px),
    linear-gradient(90deg, rgba(0,0,0,.54), rgba(255,255,255,.1) 24%, rgba(255,255,255,.18) 48%, rgba(255,255,255,.05) 76%, rgba(0,0,0,.58)),
    linear-gradient(175deg, var(--sa), var(--sb));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 -8px 14px rgba(0,0,0,.4),
    2px 10px 22px rgba(0,0,0,.55), 0 0 0 1px rgba(200,212,223,.035);
  transition: transform .38s var(--ease), box-shadow .38s var(--ease);
  display: flex; align-items: center; justify-content: center;
}
.tome[data-status="live"] { animation: tomeBreath 4.6s ease-in-out infinite; animation-delay: var(--bd, 0s); }
@keyframes tomeBreath {
  0%,100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -8px 14px rgba(0,0,0,.4), 2px 10px 22px rgba(0,0,0,.55); }
  50% { box-shadow: inset 0 0 0 1px rgba(255,224,160,.18), inset 0 -8px 14px rgba(0,0,0,.4), 2px 10px 22px rgba(0,0,0,.55), 0 0 18px rgba(232,192,122,.22); }
}
.tome::before {
  content: ''; position: absolute; left: 7px; right: 7px; top: 10px; height: 8px;
  border-top: 1.5px solid rgba(216,179,109,.68); border-bottom: 1px solid rgba(200,212,223,.22);
}
.tome::after {
  content: ''; position: absolute; left: 7px; right: 7px; bottom: 12px; height: 8px;
  border-top: 1px solid rgba(200,212,223,.18); border-bottom: 1.5px solid rgba(216,179,109,.6);
}
.tome .sigil-mark {
  position: absolute; top: 26px; left: 0; right: 0; text-align: center;
  color: var(--moon); font-size: 11px; opacity: .72; text-shadow: 0 0 8px rgba(200,212,223,.35);
}
.tome .title {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--serif); font-weight: 700; font-size: 12.5px; letter-spacing: .14em;
  line-height: 17px;
  color: #f2e7cc; text-shadow: 0 1px 3px rgba(0,0,0,.7);
  max-height: calc(100% - 78px); margin-top: 26px;  /* 超長自動折第二直行，書寬由 JS 依行數計算 */
}
.tome .status-gem { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; }
.tome[data-status="live"] .status-gem { background: #ffd98f; box-shadow: 0 0 9px 2px rgba(255,214,140,.55); }
.tome[data-status="local"] .status-gem { background: #8f9ec2; box-shadow: 0 0 6px rgba(143,158,194,.5); }
.tome[data-status="delivered"] .status-gem { background: #c98f5a; box-shadow: 0 0 6px rgba(201,143,90,.5); }
.tome:hover, .tome:focus-visible {
  transform: translateY(-26px) rotate(-1.6deg);
  box-shadow: inset 0 0 0 1px rgba(255,224,160,.28), 0 0 30px var(--gold-glow), 6px 22px 34px rgba(0,0,0,.65);
  outline: none; z-index: 3;
  animation: none;
}
.tome:hover .sparkle { opacity: 1; }
.sparkle {
  position: absolute; inset: -14px; pointer-events: none; opacity: 0;
  transition: opacity .4s var(--ease);
  background-image:
    radial-gradient(2px 2px at 18% 22%, #ffe9bd, transparent),
    radial-gradient(1.5px 1.5px at 78% 12%, #ffd98f, transparent),
    radial-gradient(1.5px 1.5px at 88% 62%, #fff3d6, transparent),
    radial-gradient(2px 2px at 8% 72%, #ffd98f, transparent),
    radial-gradient(1.5px 1.5px at 55% -4%, #ffe9bd, transparent);
}

/* ═══ 開書 overlay（沿用圖3） ═══════════════ */
.codex-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 20px;
  background:
    radial-gradient(70vw 70vh at 50% 40%, rgba(31,58,84,.28), transparent 68%),
    rgba(4, 5, 12, .9);
  backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease);
}
.codex-overlay.open { opacity: 1; pointer-events: auto; }
.codex-halo {
  position: absolute; width: min(920px, 96vw); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(216,179,109,.11), transparent 66%),
    conic-gradient(from 24deg, transparent 0 9deg, rgba(200,212,223,.07) 9deg 9.5deg, transparent 9.5deg 18deg);
  pointer-events: none;
}
.codex-halo::before, .codex-halo::after {
  content: ''; position: absolute; inset: 9%; border-radius: 50%;
  border: 1px solid rgba(200,212,223,.16);
}
.codex-halo::after { inset: 17%; border-color: rgba(216,179,109,.12); }
.codex-dust { position: absolute; width: min(700px, 90vw); height: 70vh; pointer-events: none; overflow: hidden; }
.codex-dust i { position: absolute; bottom: 8%; width: 3px; height: 3px; border-radius: 50%; background: #ffe0a0; opacity: 0; }
.codex-overlay.open .codex-dust i { animation: dustRise 3.6s var(--ease) infinite; }
.codex-dust i:nth-child(1) { left: 30%; }
.codex-dust i:nth-child(2) { left: 44%; animation-delay: .7s; width: 2px; height: 2px; }
.codex-dust i:nth-child(3) { left: 56%; animation-delay: 1.3s; }
.codex-dust i:nth-child(4) { left: 66%; animation-delay: .4s; width: 2px; height: 2px; }
.codex-dust i:nth-child(5) { left: 50%; animation-delay: 1.9s; }
.codex-dust i:nth-child(6) { left: 38%; animation-delay: 2.4s; width: 2px; height: 2px; }
@keyframes dustRise {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: .9; }
  100% { transform: translateY(-52vh) translateX(14px); opacity: 0; }
}
.codex {
  position: relative; z-index: 2;
  width: min(880px, 94vw);
  padding: clamp(10px, 1.6vw, 16px);
  border-radius: 14px 18px 18px 14px;
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(160deg, #3a2418, #1c0f0a 70%);
  box-shadow:
    inset 0 0 0 1px rgba(232,192,122,.35), inset 0 0 34px rgba(0,0,0,.7),
    0 40px 90px rgba(0,0,0,.8), 0 0 70px rgba(232,192,122,.16);
  transform: translateY(34px) scale(.92);
  transition: transform .5s var(--ease);
}
.codex-overlay.open .codex { transform: none; }
.codex::before, .codex::after {
  content: ''; position: absolute; width: 30px; height: 30px; pointer-events: none;
  border: 1.5px solid rgba(232,192,122,.6);
}
.codex::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.codex::after { bottom: 6px; right: 6px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.codex-pages { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); border-radius: 6px; overflow: hidden; max-height: min(72vh, 600px); }
.page {
  padding: clamp(22px, 3.2vw, 42px);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(120,90,40,.12), transparent 55%),
    linear-gradient(180deg, #f4ecd8, #e6d9bb);
  color: var(--ink-warm); overflow-y: auto;
}
.page.left {
  border-right: 1px solid #c8ba97;
  background:
    linear-gradient(90deg, transparent 92%, rgba(90,70,40,.18)),
    radial-gradient(120% 90% at 50% -20%, rgba(120,90,40,.12), transparent 55%),
    linear-gradient(180deg, #f1e8d2, #e2d4b4);
}
.page.right {
  background:
    linear-gradient(90deg, rgba(90,70,40,.14), transparent 8%),
    radial-gradient(120% 90% at 50% -20%, rgba(120,90,40,.1), transparent 55%),
    linear-gradient(180deg, #f4ecd8, #e7dabd);
}
.page .kind { font-family: var(--latin); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #96742f; }
.page h3 { font-family: var(--serif); font-weight: 900; font-size: clamp(20px, 2.5vw, 28px); line-height: 1.4; margin: 12px 0 12px; }
.page .desc { font-size: 13.5px; line-height: 2; color: #4a4030; }
.page .seal-row { margin-top: 20px; padding-top: 14px; border-top: 1px solid #cbbd99; font-family: var(--serif); font-size: 12px; letter-spacing: .12em; color: #7a5a1a; }
.page .meta { font-family: var(--serif); font-size: 13px; color: #8a7a52; line-height: 2.2; }
.page .meta b { color: #52431f; font-weight: 700; word-break: break-all; }
.page .tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.page .tags span { font-size: 10.5px; letter-spacing: .06em; color: #7a6a42; border: 1px solid #c6b78e; padding: 3px 9px; border-radius: 2px; }
/* 右頁整頁實景（有預覽圖時） */
.page.visual {
  padding: 0; position: relative; overflow: hidden;
  display: flex; min-height: min(52vh, 460px);
  background: #0e0c14;
}
.page.visual img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
.page.visual .visual-bar {
  position: relative; z-index: 2; align-self: flex-end; width: 100%;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 40px 18px 16px;
  background: linear-gradient(180deg, transparent, rgba(8,7,4,.85) 55%);
}
.page.visual .portal {
  color: var(--gold); border-color: rgba(232,192,122,.55);
  background: rgba(5,7,15,.55); margin: 0;
}
.page.visual .portal:hover { background: rgba(232,192,122,.16); }
.page.visual .seal-row { color: var(--gold-deep); border: 0; padding: 0; margin: 0; }
.page .portal { color: #7a5a1a; border-color: rgba(150,116,47,.55); background: none; margin-top: 16px; }
.page .portal:hover { background: rgba(150,116,47,.1); box-shadow: none; }
.codex-close {
  position: absolute; top: -46px; right: 0; z-index: 3;
  font-family: var(--serif); color: var(--text-dim); font-size: 12px; letter-spacing: .26em;
  transition: color .3s var(--ease); min-height: 44px; padding: 8px;
}
.codex-close:hover { color: var(--gold); }

/* ═══ 咒語索引室 ═══════════════════════════ */
.spell-drawer { margin-bottom: 34px; }
.spell-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.spell-head h3 { font-family: var(--serif); font-weight: 700; font-size: 16px; letter-spacing: .16em; }
.spell-head .n { font-family: var(--latin); color: var(--gold-deep); font-size: 12px; }
.spell-head .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-faint), transparent); }
.spells { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 9px; }
.spell {
  position: relative; padding: 13px 15px 13px 19px;
  background: linear-gradient(175deg, rgba(13,18,28,.76), rgba(8,9,18,.74));
  border: 1px solid rgba(200,212,223,.13);
  border-left: 2px solid rgba(216,179,109,.36);
  transition: all .35s var(--ease);
}
.spell:hover { background: rgba(16,20,28,.86); border-color: rgba(216,179,109,.34); transform: translateX(4px); }
.spell .s-name { font-family: var(--serif); font-weight: 700; font-size: 13.5px; display: flex; align-items: baseline; gap: 8px; }
.spell .s-name .rune-sm { color: var(--gold-deep); font-size: 11px; }
.spell .s-desc { margin-top: 4px; font-size: 12px; color: var(--text-dim); line-height: 1.75; }
.spell .s-date { position: absolute; top: 13px; right: 13px; font-family: var(--latin); font-size: 11px; color: var(--text-faint); }

/* ═══ 封存地窖 ═══════════════════════════════ */
.vault-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.sealed-tome {
  position: relative; padding: 22px 24px;
  background: linear-gradient(170deg, rgba(22,24,34,.92), rgba(8,9,18,.92));
  border: 1px solid rgba(200,212,223,.13); overflow: hidden;
}
.sealed-tome::after {
  content: '已 封 印'; position: absolute; top: 16px; right: -34px; transform: rotate(38deg);
  font-family: var(--serif); font-size: 10px; letter-spacing: .5em; text-indent: .5em;
  color: rgba(220,205,230,.55); background: rgba(90,80,120,.3);
  padding: 4px 40px; border-top: 1px solid rgba(200,190,220,.2); border-bottom: 1px solid rgba(200,190,220,.2);
}
.sealed-tome::before {
  content: ''; position: absolute; left: 0; right: 0; top: 52%; height: 7px;
  background: repeating-linear-gradient(90deg, rgba(170,162,190,.3) 0 12px, transparent 12px 19px);
  opacity: .5; pointer-events: none;
}
.sealed-tome h4 { font-family: var(--serif); font-weight: 700; font-size: 16px; color: #cdc7dd; }
.sealed-tome p { margin-top: 8px; font-size: 12px; color: #8d87a3; line-height: 1.85; }
.sealed-tome .s-date { display: block; margin-top: 10px; font-family: var(--latin); font-size: 11px; color: #6d6785; }
.vault-colophon {
  margin-top: 34px; text-align: center;
  font-family: var(--serif); color: var(--text-dim); font-size: 12.5px; letter-spacing: .2em; line-height: 2.3;
}
.vault-colophon .mark { color: var(--gold); font-size: 15px; display: block; margin-bottom: 8px; }
.vault-colophon a { color: var(--gold-deep); border-bottom: 1px solid rgba(232,192,122,.3); padding-bottom: 2px; }

/* ═══ 動態層：漂浮書・金光掃過・紙頁飛散 ═══════ */
/* 房間進場金光 sweep（scene 加 .on 時播一次） */
.scene .cam::after {
  content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(232,192,122,.10) 45%, rgba(255,240,205,.16) 50%, rgba(232,192,122,.10) 55%, transparent);
  transform: translateX(-140%) skewX(-12deg);
  pointer-events: none; mix-blend-mode: screen;
}
.scene.on .cam::after { animation: goldSweep 1.5s var(--ease) .15s 1 both; }
@keyframes goldSweep {
  0% { transform: translateX(-140%) skewX(-12deg); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translateX(420%) skewX(-12deg); opacity: 0; }
}
/* Hub 漂浮的書（緩慢橫越場景） */
.floatbooks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.floatbook {
  position: absolute; width: 26px; height: 34px; border-radius: 2px 3px 3px 2px;
  background: linear-gradient(160deg, var(--fb-a, #4a3573), var(--fb-b, #251a42));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 3px 0 0 rgba(232,192,122,.5),
    0 0 16px rgba(232,192,122,.35), 0 6px 14px rgba(0,0,0,.5);
  opacity: 0;
  animation: bookDrift var(--fb-dur, 26s) linear var(--fb-delay, 0s) infinite;
}
.floatbook::after { /* 金塵拖尾 */
  content: ''; position: absolute; top: 50%; right: 100%; width: 60px; height: 2px;
  background: linear-gradient(270deg, rgba(232,192,122,.5), transparent);
  filter: blur(1px);
}
@keyframes bookDrift {
  0%   { transform: translate(-60px, 78vh) rotate(-8deg); opacity: 0; }
  6%   { opacity: .9; }
  50%  { transform: translate(52vw, 34vh) rotate(6deg); }
  94%  { opacity: .8; }
  100% { transform: translate(104vw, 12vh) rotate(-4deg); opacity: 0; }
}
.floatbook.f2 { width: 20px; height: 27px; animation-name: bookDrift2; }
@keyframes bookDrift2 {
  0%   { transform: translate(104vw, 66vh) rotate(10deg); opacity: 0; }
  7%   { opacity: .75; }
  55%  { transform: translate(46vw, 26vh) rotate(-6deg); }
  93%  { opacity: .7; }
  100% { transform: translate(-70px, 44vh) rotate(8deg); opacity: 0; }
}
/* 開書瞬間紙頁飛散 */
.paper-burst { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; }
.paper-burst i {
  position: absolute; width: 14px; height: 18px; border-radius: 2px;
  background: linear-gradient(170deg, #f4ecd8, #dccfae);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  opacity: 0;
}
.codex-overlay.open .paper-burst i { animation: paperFly 1.15s var(--ease) 1 both; }
.paper-burst i:nth-child(1) { animation-delay: .05s; --fx: -220px; --fy: -160px; --fr: -160deg; }
.paper-burst i:nth-child(2) { animation-delay: .12s; --fx: 240px;  --fy: -120px; --fr: 200deg; }
.paper-burst i:nth-child(3) { animation-delay: .02s; --fx: -170px; --fy: 150px;  --fr: 140deg; }
.paper-burst i:nth-child(4) { animation-delay: .16s; --fx: 200px;  --fy: 170px;  --fr: -220deg; }
.paper-burst i:nth-child(5) { animation-delay: .09s; --fx: -60px;  --fy: -230px; --fr: 120deg; }
.paper-burst i:nth-child(6) { animation-delay: .2s;  --fx: 90px;   --fy: 220px;  --fr: -140deg; }
.paper-burst i:nth-child(7) { animation-delay: .07s; --fx: 300px;  --fy: 30px;   --fr: 260deg; }
.paper-burst i:nth-child(8) { animation-delay: .14s; --fx: -300px; --fy: -20px;  --fr: -240deg; }
@keyframes paperFly {
  0%   { transform: translate(0, 0) rotate(0) scale(.4); opacity: 0; }
  12%  { opacity: .95; }
  100% { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(1); opacity: 0; }
}

/* ═══ 閒置圖活用（2026-07-06：門框/命運之書/overlay 底層/孤本特展）═══ */
/* 開場門框：拱門圖只當前景框，中央鏤空露出 hall（掩人物剪影、避免低解析全屏） */
.doorframe {
  position: absolute; inset: -2%;
  pointer-events: none;
  background: url('library-assets/doorway.jpg') center 38% / cover;
  -webkit-mask-image: radial-gradient(108% 124% at 50% 56%, transparent 40%, #000 70%);
          mask-image: radial-gradient(108% 124% at 50% 56%, transparent 40%, #000 70%);
  filter: brightness(.52) saturate(1.05);
  transition: transform .95s var(--ease), opacity .95s var(--ease);
  will-change: transform, opacity;
}
#scene-title .title-core { transition: opacity .6s var(--ease), transform .6s var(--ease); }
/* 穿門而入（首訪限定，JS 加 .passing） */
#scene-title.passing .cam { transform: scale(1.16); }
#scene-title.passing .doorframe { transform: scale(1.34); opacity: 0; }
#scene-title.passing .title-core { opacity: 0; transform: translateY(-14px); }

/* 命運之書：hub 隱藏星點熱點 */
.fate-spot {
  position: absolute; left: 36%; top: 20%;
  width: 40px; height: 40px; transform: translate(-50%, -50%);
  background: none; border: 0; cursor: pointer;
}
.fate-spot::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: #ffe4ae;
  box-shadow: 0 0 9px 2px rgba(255,214,140,.7);
  animation: fateTwinkle 3.4s ease-in-out infinite;
}
.fate-spot:hover::before, .fate-spot:focus-visible::before { box-shadow: 0 0 18px 6px rgba(255,222,150,.95); }
.fate-spot::after {
  content: '命 運 之 書'; position: absolute; left: 50%; top: -22px; transform: translateX(-50%);
  font-size: 11px; letter-spacing: .3em; text-indent: .3em; color: var(--gold);
  white-space: nowrap; text-shadow: 0 0 12px rgba(0,0,0,.85);
  opacity: 0; transition: opacity .3s var(--ease);
}
.fate-spot:hover::after, .fate-spot:focus-visible::after { opacity: 1; }
@keyframes fateTwinkle { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* 命運之書顯影（開書前 0.95s 過場） */
.fate-reveal {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  background: rgba(4,5,12,.78);
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease);
}
.fate-reveal::before {
  content: ''; width: min(720px, 86vw); aspect-ratio: 1024 / 572;
  background: url('library-assets/fate-book.jpg') center / cover;
  -webkit-mask-image: radial-gradient(72% 88% at 50% 50%, #000 52%, transparent 78%);
          mask-image: radial-gradient(72% 88% at 50% 50%, #000 52%, transparent 78%);
  transform: scale(.82);
  transition: transform .8s var(--ease);
}
.fate-reveal.show { opacity: 1; }
.fate-reveal.show::before { transform: scale(1); }

/* 開書 overlay：書架特寫氣氛底層（強糊強暗，不搶右頁截圖焦點） */
.codex-overlay::before {
  content: ''; position: absolute; inset: -4%;
  background: url('library-assets/shelf-closeup.jpg') center / cover;
  filter: blur(16px) brightness(.42) saturate(1.05);
  opacity: .45; pointer-events: none;
}

/* 孤本特展：翼廊僅一冊時置中＋特寫圖展台 */
.shelf.solo { justify-content: center; }
.shelf.solo::after {
  content: ''; position: absolute; left: 50%; bottom: 0; z-index: -1;
  width: min(520px, 82%); height: 100%;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(5,7,15,.5), rgba(5,7,15,.28)),
    url('library-assets/shelf-closeup.jpg') center 42% / cover;
  border-radius: 12px; opacity: .5; pointer-events: none;
  -webkit-mask-image: radial-gradient(85% 100% at 50% 62%, #000 46%, transparent 84%);
          mask-image: radial-gradient(85% 100% at 50% 62%, #000 46%, transparent 84%);
}

/* ═══ RWD ═══════════════════════════════════ */
@media (max-width: 820px) {
  .title-core { min-height: min(700px, 94dvh); padding-inline: 16px; }
  .orrery { width: min(560px, 116vw); transform: translate(-50%, -54%); opacity: .86; }
  .title-eyebrow { letter-spacing: .34em; text-indent: .34em; }
  .title-core h1 { font-size: clamp(36px, 12vw, 58px); letter-spacing: .05em; }
  .title-core .sub { max-width: 28ch; margin-inline: auto; line-height: 1.8; letter-spacing: .06em; }
  .tap-enter { letter-spacing: .16em; text-indent: .16em; padding-inline: 28px; }
  .tap-enter::before, .tap-enter::after { width: 28px; }
  .title-stats { gap: 22px; }
  .hub-orrery { width: 118vw; opacity: .62; }
  .treasure { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .t-body p { margin: 0 auto; }
  .t-meta { justify-content: center; }
  .crystal { width: min(210px, 56vw); }
  .treasure-stage { grid-template-columns: auto 1fr auto; gap: 2px; }
  .codex-pages { grid-template-columns: 1fr; max-height: 76vh; }
  .page.left { border-right: 0; border-bottom: 1px solid #c8ba97; }
  .spells { grid-template-columns: 1fr; }
  .hotspot .tag { letter-spacing: .14em; padding: 6px 12px; }
  .hud-loc { display: none; }
  /* 窄屏書庫改用書架特寫（全景書牆裁切後細節太碎） */
  #scene-stacks .bg.shelfscape { background-image: url('library-assets/shelf-closeup.jpg'); background-position: 58% center; }
  .fate-spot { left: 28%; top: 15%; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; }
}