/* Las Crónicas de Luminara: the corner button, the open book over the paused game, and the "page found" banner */
@font-face { font-family: 'LumCinzel'; src: url(assets/fonts/cinzel.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'LumFell'; src: url(assets/fonts/fell.woff2) format('woff2'); font-style: normal; font-display: swap; }
@font-face { font-family: 'LumFell'; src: url(assets/fonts/fell_i.woff2) format('woff2'); font-style: italic; font-display: swap; }

/* ---------- the closed book in the upper-right corner, just under the menu / pause button ---------- */
#bookbtn { position: fixed; z-index: 3; right: max(8px, env(safe-area-inset-right)); top: calc(max(8px, env(safe-area-inset-top)) + 54px);
  width: 46px; height: 46px; padding: 0; border: 2px solid #e8c37a; border-radius: 10px; background: #2a2418; cursor: pointer;
  box-shadow: 0 0 12px #ffd76a66, 0 3px 8px #0007; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#bookbtn .bb-book { position: absolute; inset: 2px; border-radius: 6px; background: center/cover no-repeat url(assets/book/cover_icon.jpg); }
#bookbtn .bb-mark { display: none; position: absolute; right: -5px; top: -5px; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff8d0, #ffc53a); border: 2px solid #fff; box-shadow: 0 0 8px #ffd76a; }
#bookbtn.new .bb-mark { display: block; animation: bbmark 1.4s ease-in-out infinite; }
#bookbtn:active { transform: scale(.92); }
#bookbtn .bb-lbl { position: absolute; left: 50%; top: 100%; margin-top: 3px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 700 10px/1 'LumCinzel', Georgia, serif; letter-spacing: .03em; color: #ffe9a8; text-shadow: 0 1px 3px #000, 0 0 6px #000a; }
#bookbtn.ping { animation: bbping 1.2s ease-out 2; }
@keyframes bbmark { 50% { transform: scale(1.25); } }
@keyframes bbping { 0% { box-shadow: 0 0 0 0 #ffd76acc, 0 3px 8px #0007; } 100% { box-shadow: 0 0 0 18px #ffd76a00, 0 3px 8px #0007; } }
/* in a level the button sits under the round pause button (44px) */
body[data-world="level1"] #bookbtn { top: calc(max(8px, env(safe-area-inset-top)) + 58px); }
body.explore #bookbtn { display: none; }

/* ---------- "page found" banner ---------- */
#bookban { position: fixed; left: 50%; top: 24%; z-index: 7; transform: translate(-50%, -10px) scale(.96); opacity: 0; pointer-events: none;
  text-align: center; padding: 12px 22px; border-radius: 14px; background: linear-gradient(#3b2a12f2, #22180af2); border: 2px solid #e8c37a;
  color: #fff4dc; box-shadow: 0 0 30px #ffd76a77; transition: opacity .4s, transform .4s; max-width: 86vw; box-sizing: border-box; }
#bookban b { display: block; font: 700 19px 'LumCinzel', Georgia, serif; letter-spacing: .06em; color: #ffe08a; }
#bookban span { display: block; margin-top: 4px; font: italic 16px 'LumFell', Georgia, serif; }
#bookban.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
#bookban.on.two { opacity: 0; transform: translate(-50%, -14px) scale(1); transition-duration: .8s; }

/* ---------- the open book ---------- */
#book { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; touch-action: manipulation; }
#book[hidden] { display: none; }
#book .bk-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at center, #3a2a10cc 0%, #0d0a18ee 70%); }
#book .bk-dust { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#book .bk-dust i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #ffe7a0; box-shadow: 0 0 6px #ffd76a; opacity: 0; animation: bkdust 9s linear infinite; }
#book .bk-dust i:nth-child(odd) { width: 3px; height: 3px; }
#book .bk-dust i:nth-child(1) { left: 6%; animation-delay: 0s; } #book .bk-dust i:nth-child(2) { left: 14%; animation-delay: 2.1s; }
#book .bk-dust i:nth-child(3) { left: 22%; animation-delay: 4.4s; } #book .bk-dust i:nth-child(4) { left: 30%; animation-delay: 1.2s; }
#book .bk-dust i:nth-child(5) { left: 38%; animation-delay: 6.3s; } #book .bk-dust i:nth-child(6) { left: 46%; animation-delay: 3.3s; }
#book .bk-dust i:nth-child(7) { left: 54%; animation-delay: 7.5s; } #book .bk-dust i:nth-child(8) { left: 62%; animation-delay: .6s; }
#book .bk-dust i:nth-child(9) { left: 70%; animation-delay: 5.2s; } #book .bk-dust i:nth-child(10) { left: 78%; animation-delay: 2.8s; }
#book .bk-dust i:nth-child(11) { left: 86%; animation-delay: 8.1s; } #book .bk-dust i:nth-child(12) { left: 93%; animation-delay: 4s; }
#book .bk-dust i:nth-child(13) { left: 50%; animation-delay: 1.7s; } #book .bk-dust i:nth-child(14) { left: 10%; animation-delay: 5.9s; }
@keyframes bkdust { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .8; } 100% { transform: translateY(-105vh) translateX(30px); opacity: 0; } }

#book .bk-book { position: relative; width: var(--bw, 600px); height: var(--bh, 400px); perspective: 2200px; transform-style: preserve-3d; font-size: var(--fs, 16px); }
#book .bk-case { position: absolute; inset: -10px; border-radius: 12px; background: #3a2412 center/cover url(assets/book/cover.jpg); filter: brightness(.55) saturate(.8);
  box-shadow: 0 20px 60px #000c, 0 0 0 2px #b8904a; }
#book .bk-page, #book .bk-leaf, #book .bk-cover { position: absolute; top: 0; height: 100%; width: 50%; box-sizing: border-box; }
#book .bk-page { background: #efe0bb center/cover url(assets/book/parchment.jpg); color: #3a2410; overflow: hidden; }
#book .bk-page.L { left: 0; border-radius: 6px 0 0 6px; box-shadow: inset -24px 0 30px -18px #5a3a1488; }
#book .bk-page.R { left: 50%; border-radius: 0 6px 6px 0; box-shadow: inset 24px 0 30px -18px #5a3a1488; }
#book .bk-edge { position: absolute; top: 3px; bottom: 3px; width: 6px; background: repeating-linear-gradient(90deg, #e9d8ae 0 1px, #c8b080 1px 2px); }
#book .bk-edge.L { left: -6px; border-radius: 3px 0 0 3px; } #book .bk-edge.R { right: -6px; border-radius: 0 3px 3px 0; }
#book .bk-spine { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: linear-gradient(90deg, #6a4a2066, #2a1a0a99, #6a4a2066); pointer-events: none; }
#book .bk-in { position: absolute; inset: 0; padding: 1.4em 1.5em; box-sizing: border-box; overflow-y: auto; opacity: 0; transition: opacity .35s; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
#book.settled .bk-in { opacity: 1; }

/* the cover: over the right page, hinged at the spine; its front is the leather, its back the inside board */
#book .bk-cover { left: 50%; transform-origin: 0 50%; transform-style: preserve-3d; z-index: 4; pointer-events: none; }
#book .bk-cover > div { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 0 8px 8px 0; }
#book .bk-cover .front { background: #3a2412 center/cover url(assets/book/cover.jpg); box-shadow: inset 0 0 0 3px #b8904a, 0 6px 20px #0009; }
#book .bk-cover .back { transform: rotateY(180deg); background: #5a3a1a; box-shadow: inset 0 0 0 3px #b8904a; border-radius: 8px 0 0 8px; }
#book .clasp { position: absolute; right: -8px; top: 50%; width: 26px; height: 40px; margin-top: -20px; border-radius: 6px; background: linear-gradient(#f3d58a, #a67a2a); box-shadow: 0 2px 6px #0008; }
#book.settled .bk-cover { opacity: 0; }

#book .bk-leaf { display: none; left: 50%; transform-origin: 0 50%; z-index: 3; transform-style: preserve-3d; pointer-events: none; }
#book .bk-leaf > div { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #efe0bb center/cover url(assets/book/parchment.jpg); }
#book .bk-leaf .f { box-shadow: inset 24px 0 30px -18px #5a3a1488; }
#book .bk-leaf .b { transform: rotateY(180deg); box-shadow: inset -24px 0 30px -18px #5a3a1488; }

#book .bk-burst { position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(circle, #fff6c8ee 0%, #ffd76a88 25%, #ffd76a00 60%); }
#book .bk-fly { display: none; position: absolute; left: 50%; top: 50%; width: 42%; max-width: 260px; pointer-events: none; z-index: 6; filter: drop-shadow(0 0 16px #ffd76a); }

/* arrows and the two buttons: below and above the book, or beside it on wide screens */
#book .bk-arrow { position: absolute; bottom: -56px; width: 48px; height: 48px; border-radius: 50%; border: 2px solid #e8c37a; background: #2a2418ee; color: #ffe08a; z-index: 7; cursor: pointer; font: 700 22px Georgia, serif; }
#book .bk-arrow.prev { left: calc(50% - 60px); } #book .bk-arrow.next { right: calc(50% - 60px); }
#book .bk-arrow::before { content: '\2039'; } #book .bk-arrow.next::before { content: '\203A'; }
#book .bk-arrow:disabled { opacity: .3; }
#book.side .bk-arrow { bottom: auto; top: 50%; margin-top: -24px; }
#book.side .bk-arrow.prev { left: -64px; } #book.side .bk-arrow.next { right: -64px; }
#book .bk-top { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); display: flex; gap: 8px; z-index: 11; }
#book .bk-btn { font: 700 15px 'LumCinzel', Georgia, serif; letter-spacing: .04em; color: #ffe9a8; background: #2a2418ee; border: 2px solid #e8c37a; border-radius: 12px; padding: 10px 14px; min-height: 44px; cursor: pointer; }
#book.side .bk-top { flex-direction: column; }

/* held upright: the pages one above the other, the cover hinged on the top edge */
#book.portrait .bk-page, #book.portrait .bk-leaf, #book.portrait .bk-cover { width: 100%; height: 50%; left: 0; }
#book.portrait .bk-page.L { top: 0; border-radius: 6px 6px 0 0; box-shadow: inset 0 -24px 30px -18px #5a3a1488; }
#book.portrait .bk-page.R { top: 50%; border-radius: 0 0 6px 6px; box-shadow: inset 0 24px 30px -18px #5a3a1488; }
#book.portrait .bk-cover, #book.portrait .bk-leaf { top: 50%; transform-origin: 50% 0; }
#book.portrait .bk-cover > div { border-radius: 0 0 8px 8px; }
#book.portrait .bk-cover .back, #book.portrait .bk-leaf .b { transform: rotateX(180deg); }
#book.portrait .clasp { right: auto; left: 50%; top: auto; bottom: -8px; margin: 0 0 0 -20px; width: 40px; height: 26px; }
#book.portrait .bk-spine { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 4px; margin: -2px 0 0; }
#book.portrait .bk-edge { display: none; }
#book.portrait .bk-arrow { bottom: -54px; }

/* ---------- what is written on the pages ---------- */
#book .bk-in { font-family: 'LumFell', Georgia, serif; line-height: 1.45; }
#book .bk-titlepage { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#book .bk-h1 { position: relative; z-index: 1; margin: 0; font: 700 1.9em/1.15 'LumCinzel', Georgia, serif; letter-spacing: .06em; color: #5a3410; text-shadow: 0 1px 0 #fff6d899; }
#book .bk-h1 small { font-size: .55em; }
#book .bk-tree { position: absolute; inset: 8%; background: center/contain no-repeat url(assets/book/tree_ink.jpg); mix-blend-mode: multiply; opacity: .28; }
#book .bk-prose p { margin: 0 0 .8em; }
#book .bk-orn { display: block; text-align: center; color: #8a5a1a; font-size: 1.4em; margin: .3em 0 .6em; }
#book .bk-count { text-align: center; font-family: 'LumCinzel', Georgia, serif; font-size: .9em; }
#book .bk-count b { color: #7a3a0a; }
#book .bk-hint { text-align: center; font-style: italic; color: #6a4a2a; }
#book .bk-link { display: block; margin: .6em auto 0; font: 700 .9em 'LumCinzel', Georgia, serif; color: #fff4dc; background: #6a3e14; border: 1px solid #b8904a; border-radius: 10px; padding: .6em 1em; min-height: 44px; cursor: pointer; }
#book .bk-link.quiet { background: transparent; color: #6a3e14; }
#book .bk-h2 { margin: 0 0 .5em; text-align: center; font: 700 1.3em 'LumCinzel', Georgia, serif; color: #5a3410; }
#book .bk-index ol { list-style: none; margin: 0; padding: 0; }
#book .bk-row { display: flex; width: 100%; gap: .6em; align-items: baseline; padding: .35em .2em; border: 0; border-bottom: 1px dotted #8a6a3a88; background: none; font: inherit; color: inherit; text-align: left; min-height: 36px; }
#book .bk-row .n { font-family: 'LumCinzel', Georgia, serif; font-size: .8em; white-space: nowrap; color: #7a4a1a; }
#book .bk-row .t { flex: 1; }
#book .bk-row.open { cursor: pointer; }
#book .bk-row.locked { color: #6a4a2a; align-items: center; }
#book .bk-row.locked .n { color: #6e4a22; }
#book .bk-row.locked .t { flex: 0 0 auto; margin-left: auto; font-style: italic; font-size: .82em; opacity: .7; }
#book .bk-seal { flex: 1; height: 1px; align-self: center; border-bottom: 1px dotted #8a6a3a66; position: relative; margin: 0 .2em; }
#book .bk-seal::after { content: ''; position: absolute; right: 0; top: 50%; width: .8em; height: .8em; margin-top: -.4em; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #c46a4a, #7a2a1a 70%); box-shadow: 0 0 0 1px #5a1a0a55; opacity: .75; }
#book .bk-key { margin: .4em 0 0; text-align: center; font-style: italic; font-size: .78em; color: #6a4a2a; }
/* the index and the opening pages always fit their page whole (book.js shrinks their lettering until they do),
   so no chapter and no button is ever cut by the fold or the page's foot */
#book[data-view="index"] .bk-in { padding: .9em 1.7em; }
#book .bk-index { min-height: 100%; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
#book .bk-index .bk-h2 { margin-bottom: .25em; font-size: 1.2em; }
#book .bk-index .bk-row { min-height: 0; padding: .16em .1em; border-bottom-color: #8a6a3a44; }
#book .bk-index .bk-row.open { min-height: 32px; }
#book .bk-index .bk-count { margin: .5em 0 0; }
#book .bk-new { font-style: normal; font-size: .7em; color: #fff; background: #b8452f; border-radius: 8px; padding: 1px 6px; }
#book .bk-illus { display: flex; flex-direction: column; gap: .6em; }
#book .bk-cap { margin: 0; text-align: center; font: 700 1em 'LumCinzel', Georgia, serif; color: #6a3e14; letter-spacing: .1em; }
#book .bk-frame { position: relative; width: 100%; border: 3px solid #8a5a1a; border-radius: 4px; overflow: hidden; background: #1a120a; }
#book .bk-video, #book .bk-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#book .bk-video { opacity: 0; } #book .bk-video.on { opacity: 1; } #book .bk-still.off { opacity: 0; }
#book .bk-bigplay { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 2px solid #ffe08a; background: #2a1a0acc; color: #ffe08a; padding: 14px; cursor: pointer; }
#book .bk-bigplay[hidden], #book .bk-verr[hidden] { display: none; }
#book svg { width: 100%; height: 100%; fill: currentColor; display: block; }
#book .bk-verr { position: absolute; inset: auto 0 0; margin: 0; padding: .5em; background: #000a; color: #fff; font-size: .8em; text-align: center; }
#book .bk-vctl { display: flex; justify-content: center; gap: .6em; }
#book .bk-vctl button { width: 44px; height: 44px; padding: 10px; border-radius: 50%; border: 1px solid #8a5a1a; background: #6a3e14; color: #fff4dc; cursor: pointer; }
#book .bk-story { height: 100%; overflow-y: auto; touch-action: pan-y; }
#book .bk-in:has(.bk-story) { overflow: hidden; }
#book .bk-label { margin: 0; text-align: center; font: .7em 'LumCinzel', Georgia, serif; letter-spacing: .2em; color: #8a5a1a; }
#book .bk-ch { margin: .3em 0; text-align: center; font-family: 'LumCinzel', Georgia, serif; color: #5a3410; }
#book .bk-ch .num { display: block; font-size: .75em; letter-spacing: .15em; }
#book .bk-ch .ttl { display: block; font-size: 1.15em; }
#book .bk-epi { text-align: center; font-style: italic; color: #6a4a2a; margin: 0 0 .8em; }
#book .bk-text p { margin: 0 0 .8em; }
#book .bk-text p.em { font-family: 'LumCinzel', Georgia, serif; text-align: center; color: #7a2a0a; }

/* first discovery: the ink comes up, title first, then picture, then story */
#book.discover .bk-ch, #book.discover .bk-illus, #book.discover .bk-text, #book.discover .bk-epi { opacity: 0; }
#book.ink .bk-ch { animation: bkink .8s ease-out forwards; }
#book.ink .bk-epi { animation: bkink .8s ease-out .4s forwards; }
#book.ink .bk-illus { animation: bkink .9s ease-out .7s forwards; }
#book.ink .bk-text { animation: bkink 1s ease-out 1.2s forwards; }
@keyframes bkink { from { opacity: 0; filter: blur(3px) sepia(1) saturate(3); } to { opacity: 1; filter: none; } }

/* small readability touches: darker ink, a little more leading, a modest illuminated first letter */
#book .bk-in { line-height: 1.5; color: #33200c; }
#book .bk-text p.first::first-letter { float: left; font: 700 2.6em/.9 'LumCinzel', Georgia, serif; color: #8a3a0a; margin: .06em .12em 0 0; text-shadow: 0 1px 0 #fff6d899; }
#book .bk-tree-in { position: relative; inset: auto; width: 100%; aspect-ratio: 1; }
#book .bk-leaf > div { box-sizing: border-box; overflow: hidden; }
#book .bk-arrow, #book .bk-btn { transition: transform .12s, opacity .2s; touch-action: manipulation; }
#book .bk-arrow:active:not(:disabled), #book .bk-btn:active { transform: scale(.93); }

/* the plaza and sanctuary hint stays clear of the book button in the corner */
body.nilo:not([data-world="level1"]) #nilohint { max-width: min(calc(100vw - 124px), 560px); }

/* the Chronicles live on the main plaza: no book button in a level or in the sanctuary */
body:not([data-world="plaza"]) #bookbtn { display: none !important; }

/* the cinematic as a painting: two canvases over the still, never a media player. Nothing on the picture takes a touch */
#book .bk-cine, #book .bk-living { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; pointer-events: none; }
#book .bk-cine.on, #book .bk-living.on { opacity: 1; }
#book .bk-frame, #book .bk-frame img { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#book .bk-frame img { pointer-events: none; }

/* a chapter whose page is found but whose story is still to come */
#book .bk-pending { display: flex; flex-direction: column; align-items: center; text-align: center; }
#book .bk-pending .bk-wait { margin: 1.2em 0 .2em; font-family: LumCinzel, serif; font-weight: 700; letter-spacing: .12em; color: #7a4a12; font-size: 1.05em; }
#book .bk-pending .bk-waittext { font-style: italic; color: #5a3a1a; max-width: 22em; line-height: 1.55; margin: .8em auto; }
#book .bk-inkwell { display: flex; gap: .55em; margin: 1em 0 .4em; }
#book .bk-inkwell i { width: .55em; height: .55em; border-radius: 50%; background: #b07a2a; opacity: .35; animation: bkinkdot 2.4s ease-in-out infinite; }
#book .bk-inkwell i:nth-child(2) { animation-delay: .4s; } #book .bk-inkwell i:nth-child(3) { animation-delay: .8s; }
@keyframes bkinkdot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: .85; transform: translateY(-.25em); } }

/* a long chapter over several parchment pages: continued pages, their folio, the chapter's closing line */
#book .bk-meas { left: 50%; }
#book.portrait .bk-meas { left: 0; top: 50%; }
#book .bk-story.bk-cont { padding-top: .4em; box-sizing: border-box; }
#book .bk-folio { margin: .2em 0 0; text-align: center; font: .72em 'LumCinzel', Georgia, serif; letter-spacing: .18em; color: #8a5a1a; }
#book .bk-text p.end { margin-top: 1em; text-align: center; font-family: 'LumCinzel', Georgia, serif; font-size: .9em; letter-spacing: .12em; color: #6a3e14; }
#book .bk-blank { display: flex; align-items: center; justify-content: center; }
#book .bk-blank .bk-tree-in { width: 70%; opacity: .18; }
#book .bk-text p.split { margin-bottom: 0; }
#book .bk-text p.cont { text-indent: 0; }