/* A chapter opens through the book, and returns along the same path. */
#gravityBook { --chapter-glow: 213,161,82; }
.grimoire-chapter-bottom { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.grimoire-chapter-bottom p { flex: 1; margin-top: 2px; margin-bottom: 0; }
#gravityBook .grimoire-chapter-enter { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 78px; min-height: 44px; padding: 0 14px; border: 0; background: transparent; color: #fff7e8; font: italic 15px/1 Georgia,serif; letter-spacing: .06em; text-shadow: 0 1px 2px #483018c9,0 0 5px #58412880; transition: color .25s,text-shadow .25s; }
#gravityBook .grimoire-enter-frame { position: absolute; inset: 5px 0; width: 100%; height: calc(100% - 10px); stroke: #fff9ef; stroke-width: .7; opacity: .45; transition: opacity .25s; pointer-events: none; }
#gravityBook .grimoire-chapter-enter:hover { color: #fffdf5; text-shadow: 0 1px 3px #38220d,0 0 9px #fff1c870; }
#gravityBook .grimoire-chapter-enter:hover .grimoire-enter-frame { opacity: .8; }
#gravityBook .grimoire-chapter-enter:focus-visible { outline: 1px solid #755934; outline-offset: 0; border-radius: 2px; }
.grimoire-stage { transform-origin: 75% 50%; transition: transform 1.8s cubic-bezier(.22,.6,.35,1),opacity 1.4s ease; }
.grimoire-chapter-page { display: none; position: absolute; inset: 0; z-index: 1; border-radius: 2px 6px 6px 2px; box-shadow: inset 18px 0 25px -12px #30200f9c; text-align: center; }
.grimoire-chapter-number { position: absolute; top: 13%; left: 0; width: 100%; font: 9px Georgia,serif; letter-spacing: .28em; color: #75573b; }
.grimoire-chapter-page-title { position: absolute; top: 69%; left: 7%; width: 86%; margin: 0; font: clamp(25px,2.8vw,39px)/1.3 var(--book-serif); font-weight: 400; }
.grimoire-chapter-page-english { position: absolute; top: 79%; left: 8%; width: 84%; font: italic 11px/1.7 Georgia,serif; color: #765740; }
.grimoire-threshold { position: absolute; width: 64%; aspect-ratio: 1; left: 18%; top: 26%; border-radius: 50%; background: radial-gradient(ellipse,#090d19 0%,#161e2ce8 36%,rgba(var(--chapter-glow),.55) 58%,transparent 72%); box-shadow: 0 0 35px rgba(var(--chapter-glow),.23); }
.grimoire-threshold i { position: absolute; inset: 8%; border: 1px solid rgba(var(--chapter-glow),.8); border-radius: 50%; box-shadow: 0 0 12px rgba(var(--chapter-glow),.34); }
.grimoire-threshold i:nth-child(2) { inset: 13%; border-style: dashed; opacity: .5; animation: chapterOrbit 22s linear infinite; }
.grimoire-threshold i:nth-child(3) { inset: 1%; border-color: rgba(var(--chapter-glow),.22); }
#gravityBook .grimoire-threshold-rune .grimoire-rune { position: absolute; inset: 36%; width: 28%; height: 28%; color: rgb(var(--chapter-glow)); stroke-width: .8; filter: drop-shadow(0 0 9px rgba(var(--chapter-glow),.6)); }
.grimoire-leaf { display: none; position: absolute; inset: 0; z-index: 4; transform-style: preserve-3d; transform-origin: left center; pointer-events: none; }
.grimoire-leaf-front,.grimoire-leaf-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 2px 5px 6px 2px; }
.grimoire-leaf-front { display: flex; flex-direction: column; padding: 11% 12% 9%; transform: translateZ(1px); box-shadow: inset 20px 0 22px -12px #30200f8a,9px 0 16px #2b1c1433; }
.grimoire-leaf-back { transform: rotateY(180deg); box-shadow: inset -18px 0 23px -12px #30200f80; }
#gravityBook .grimoire-leaf-back .grimoire-seal { top: 28%; width: 63%; color: #70635d; opacity: .5; }
#gravityBook:is(.is-chapter-turning,.is-chapter-returning,.is-chapter-restoring) .grimoire-leaf,
#gravityBook:is(.is-chapter-turning,.is-chapter-returning,.is-chapter-restoring) .grimoire-chapter-page { display: block; }
#gravityBook.is-chapter-turning .grimoire-leaf { animation: none; }
#gravityBook.is-chapter-restoring .grimoire-leaf { animation: chapterLeafReturn 1s cubic-bezier(.4,.04,.2,1) both; }
#gravityBook.is-chapter-returning:not(.is-chapter-restoring) .grimoire-leaf { animation: none; transform: rotateY(-179deg); }
#gravityBook.is-chapter-diving .grimoire-stage { transform: none; opacity: 0; }
#gravityBook.is-in-chapter .grimoire-desk { visibility: hidden; }
#gravityBook:is(.is-chapter-diving,.is-in-chapter) .grimoire-header,
#gravityBook:is(.is-chapter-diving,.is-in-chapter) .grimoire-footer,
#gravityBook:is(.is-chapter-turning,.is-chapter-returning,.is-chapter-restoring) .grimoire-actions { opacity: 0; pointer-events: none; }
#gravityBook.is-in-chapter .grimoire-header, #gravityBook.is-in-chapter .grimoire-footer { visibility: hidden; }
.grimoire-space { position: fixed; inset: 0; z-index: 4; overflow: hidden; background: radial-gradient(ellipse at 50% 38%,rgba(var(--chapter-glow),.075),transparent 53%),#05070c; visibility: hidden; opacity: 0; transform: scale(1.035); transition: opacity 1.6s ease,transform 1.9s ease,visibility 0s 1.9s; }
#gravityBook:is(.is-chapter-diving,.is-in-chapter) .grimoire-space { visibility: visible; opacity: 1; transform: scale(1); transition-delay: 0s; }
.grimoire-space::before { content: ""; position: absolute; inset: -10%; background: radial-gradient(ellipse at 35% 40%,rgba(var(--chapter-glow),.07),transparent 52%),radial-gradient(ellipse at 78% 66%,rgba(var(--chapter-glow),.045),transparent 50%); animation: chapterMist 26s ease-in-out infinite alternate; }
.grimoire-space-horizon { position: absolute; width: 140%; height: 72%; left: -20%; top: 63%; border-top: 1px solid rgba(var(--chapter-glow),.18); border-radius: 50%; background: radial-gradient(ellipse at 50% 0%,rgba(var(--chapter-glow),.07),transparent 62%); box-shadow: 0 -20px 80px -40px rgba(var(--chapter-glow),.22); }
#gravityBook .grimoire-space-return { position: absolute; top: 28px; left: 42px; z-index: 2; padding: 12px 0; border: 0; background: none; color: #ded3bd; font: 14px var(--book-serif); letter-spacing: .12em; }
.grimoire-space-return span { margin-right: 9px; }
.grimoire-space-titlegroup { position: absolute; top: 47%; left: 50%; width: min(90%,900px); transform: translate(-50%,-50%); text-align: center; color: #e7dfcf; }
.grimoire-space-number { font: 10px Georgia,serif; letter-spacing: .35em; color: rgba(var(--chapter-glow),.65); }
#gravityBook .grimoire-space-rune .grimoire-rune { margin: 38px auto 28px; width: 58px; height: 58px; stroke-width: .8; color: rgba(var(--chapter-glow),.8); filter: drop-shadow(0 0 17px rgba(var(--chapter-glow),.3)); }
.grimoire-space-titlegroup h2 { font: clamp(34px,4.3vw,68px)/1.3 var(--book-serif); font-weight: 400; letter-spacing: .13em; margin: 0 0 18px; outline: none; text-shadow: 0 0 35px rgba(var(--chapter-glow),.12); }
.grimoire-space-english { font: italic clamp(11px,1.05vw,15px)/1.6 Georgia,serif; letter-spacing: .07em; color: #aaa597; margin: 0; }
.grimoire-space-signature { position: absolute; bottom: 34px; left: 0; width: 100%; text-align: center; font: 13px var(--book-serif); letter-spacing: .3em; color: #948a78; }
.grimoire-space-atmosphere { position: absolute; inset: 0; }
.grimoire-space-atmosphere i { position: absolute; left: 18%; top: 65%; width: 2px; height: 2px; border-radius: 50%; background: rgb(var(--chapter-glow)); box-shadow: 0 0 12px rgba(var(--chapter-glow),.6); animation: chapterDust 12s ease-in-out infinite; }
.grimoire-space-atmosphere i:nth-child(2) { left: 31%; top: 43%; animation-delay: -3s; }
.grimoire-space-atmosphere i:nth-child(3) { left: 76%; top: 62%; animation-delay: -8s; }
.grimoire-space-atmosphere i:nth-child(4) { left: 65%; top: 27%; animation-delay: -5s; }
.grimoire-space-atmosphere i:nth-child(5) { left: 83%; top: 41%; animation-delay: -10s; }
.grimoire-space-atmosphere i:nth-child(6) { left: 41%; top: 78%; animation-delay: -1s; }
.grimoire-passage { position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; visibility: hidden; }
.grimoire-passage i { position: absolute; display: block; pointer-events: none; opacity: 0; }
.grimoire-passage-veil { inset: -5%; background: radial-gradient(ellipse at 55% 48%,rgba(var(--chapter-glow),.12) 0%,rgba(var(--chapter-glow),.30) 33%,#66577755 57%,#101320bb 85%); }
.grimoire-passage-wisp { inset: -15%; mask-image: radial-gradient(ellipse,#000 24%,transparent 68%); background: radial-gradient(ellipse at 31% 48%,transparent 20%,rgba(var(--chapter-glow),.29) 39%,transparent 61%),radial-gradient(ellipse at 78% 65%,#808cc72e,transparent 46%); }
.grimoire-passage-wisp.wisp-two { background: radial-gradient(ellipse at 76% 52%,transparent 21%,#9184b455 43%,transparent 65%); }
.grimoire-passage-ring { width: 72vmax; height: 72vmax; left: calc(50% - 36vmax); top: calc(48% - 36vmax); border-radius: 50%; background: radial-gradient(circle,transparent 48%,rgba(var(--chapter-glow),.10) 55%,rgba(var(--chapter-glow),.28) 59%,transparent 68%); }
#gravityBook.is-chapter-enveloping:not(.is-chapter-returning):not(.is-in-chapter) .grimoire-passage { visibility: visible; }
#gravityBook.is-chapter-enveloping:not(.is-chapter-returning) .grimoire-passage-veil { animation: chapterVeil 2.8s ease-in-out both; }
#gravityBook.is-chapter-enveloping:not(.is-chapter-returning) .wisp-one { animation: chapterEnvelop 2.8s cubic-bezier(.25,.1,.25,1) both; }
#gravityBook.is-chapter-enveloping:not(.is-chapter-returning) .wisp-two { animation: chapterEnvelop 2.8s cubic-bezier(.25,.1,.25,1) reverse both; }
#gravityBook.is-chapter-enveloping:not(.is-chapter-returning) .grimoire-passage-ring { animation: chapterHalo 2.8s cubic-bezier(.3,.1,.3,1) both; }
/* Freeze inherited lighting and parchment filters while the book travels. */
#gravityBook[open].is-open { animation: none; --grimoire-light: .65; }
#gravityBook:is(.is-chapter-turning,.is-chapter-returning,.is-chapter-restoring) .grimoire-page-magic *,
#gravityBook:is(.is-chapter-turning,.is-chapter-returning,.is-chapter-restoring) .grimoire-page-magic::before { animation-play-state: paused; }
#gravityBook:is(.is-chapter-turning,.is-chapter-returning,.is-chapter-restoring) .grimoire-stage { will-change: transform,opacity; }
#gravityBook.is-chapter-turning .grimoire-leaf { will-change: transform; }
.grimoire-leaf .grimoire-paper::after,.grimoire-leaf .grimoire-page-magic { display:none; }
.grimoire-leaf-front.is-chapter-front { text-align:center; }
#gravityBook.is-lion-passage .grimoire-space > * { visibility:hidden; }
.grimoire-title-bridge { position:fixed;inset:0;z-index:6;pointer-events:none; }
.grimoire-title-bridge .grimoire-space-titlegroup { will-change:transform,opacity; }
#gravityBook.has-title-bridge .grimoire-chapter-page-title { opacity:0; }
#gravityBook .grimoire-title-bridge .grimoire-space-titlegroup { visibility:visible; }
#gravityBook.is-chapter-enveloping .grimoire-passage i { will-change:transform,opacity; }
@keyframes chapterLeafTurn { from { transform: rotateY(0deg); } to { transform: rotateY(-179deg); } }
@keyframes chapterLeafReturn { from { transform: rotateY(-179deg); } to { transform: rotateY(0deg); } }
@keyframes chapterVeil { 0%,100% { opacity: 0; } 30% { opacity: .65; } 52% { opacity: .95; } 75% { opacity: .55; } }
@keyframes chapterEnvelop { 0% { opacity: 0; transform: translate(-14%,10%) rotate(-22deg) scale(.75); } 35%,60% { opacity: .85; } 100% { opacity: 0; transform: translate(10%,-8%) rotate(24deg) scale(1.25); } }
@keyframes chapterHalo { 0% { opacity: 0; transform: scale(.35); } 32% { opacity: .55; } 65% { opacity: .65; } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes chapterOrbit { to { transform: rotate(360deg); } }
@keyframes chapterMist { to { transform: rotate(16deg) scale(1.1); } }
@keyframes chapterDust { 0%,100% { opacity: 0; transform: translateY(20px); } 40% { opacity: .5; } 90% { opacity: 0; transform: translateY(-70px); } }
@media (max-width: 1050px), (max-height: 740px) { .grimoire-leaf-front { padding: 10% 10% 8%; } }
@media (min-width: 701px) {
  #gravityBook .grimoire-desk { min-height: calc(min(1407.433px, 100vw - 46px, (100svh - 128px) * 1.892691) / 1.66 + 84px); }
}
@media (min-width: 701px) and (max-height: 630px) {
  #gravityBook .grimoire-desk { min-height: calc(min(1123.073px, 100vw - 46px) / 1.66 + 84px); }
}
/* Keep the enlarged book fully visible on wide, short desktop windows. */
@media (min-width: 1200px) and (min-height: 631px) and (max-height: 840px) {
  #gravityBook .grimoire-room { grid-template-rows: 0 1fr 0; }
  #gravityBook .grimoire-desk { min-height: 100svh; padding: 20px 0; }
  .grimoire-header { position: absolute; inset: 0 0 auto; height: 36px; padding: 0 16px; }
  .grimoire-label { display: none; }
  .grimoire-actions { position: absolute; left: 9px; bottom: 24px; width: 56px; height: 44px; }
  #gravityBook .grimoire-turn { padding: 8px 5px; font-size: 11px; line-height: 1.5; letter-spacing: 0; }
  .grimoire-turn-arrow,.grimoire-instruction { display: none; }
  #gravityBook .grimoire-footer { position: absolute; bottom: 4px; left: 0; width: 100%; padding: 0 16px; }
}
@media (max-width:700px), (orientation:portrait) {
  .grimoire-chapter-bottom { gap: 4px; min-height: 40px; }
  #gravityBook .grimoire-chapter-enter { font-size: 13px; min-width: 65px; padding: 0 11px; }
  .grimoire-leaf-front { padding: 12% 9% 8%; }
  .grimoire-stage { transform-origin: 50% 50%; }
  #gravityBook.is-chapter-diving .grimoire-stage { transform: none; }
  .grimoire-chapter-page-title { font-size: 27px; }
  #gravityBook .grimoire-space-return { top: 18px; left: 20px; }
  .grimoire-space-titlegroup h2 { font-size: clamp(28px,8vw,40px); letter-spacing: .06em; }
}
#gravityBook.instant-turn .grimoire-stage, #gravityBook.instant-turn .grimoire-space { transition: none; }
#gravityBook.instant-turn .grimoire-passage { display: none; }
@media (prefers-reduced-motion: reduce) {
  #gravityBook .grimoire-stage, #gravityBook .grimoire-space { transition: none; }
  #gravityBook .grimoire-leaf, #gravityBook .grimoire-passage *, #gravityBook .grimoire-space *, #gravityBook .grimoire-space::before { animation: none; }
}