/* Magicians Keep: the open book, shared by the Library (library.html) and the bookshelf in Your Chamber (account.html). */
/* ===== The open book =====
   The book flies off the shelf with its cover facing you, then the cover swings open and its inside
   lands as the left page. Closing runs it all backwards. The motion lives in library.html (the Library) and
   assets/js/bookshelf.js (the bookshelf in Your Chamber); both use these same looks. */
/* the page keeps room for its scrollbar, so nothing behind the book jumps sideways when it opens and closes */
html{scrollbar-gutter:stable}
html.modal-open{overflow:hidden}
dialog.tome{width:min(1060px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);max-height:calc(100svh - 32px);padding:0;border:0;background:transparent;color:var(--ink);overflow:visible}
dialog.tome::backdrop{background:rgba(7,8,12,.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .45s var(--ease-out)}
dialog.tome.open::backdrop{opacity:1}
.tome-in{position:relative;perspective:2400px;transform-origin:0 0}
/* the book's shadow is its own layer, so it can grow with the cover as it opens (shut, only the right half casts one) */
/* opening, the shadow waits until the cover is past upright, then grows under it as it comes down on the left;
   closing, it shrinks back while the cover lifts off the left side. So no shadow ever shows where the book is not */
.tome-in::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:14px;box-shadow:0 40px 100px rgba(0,0,0,.7);pointer-events:none;transform-origin:100% 50%;transition:transform .5s cubic-bezier(.25,.6,.4,1) .48s}
dialog.tome.shut:not(.swing) .tome-in::before{transform:scaleX(.5);transition:transform .36s cubic-bezier(.6,0,.8,.4)}
/* isolated, so the ribbon always sits the same way: over the leather at the bottom, under the pages */
.binding{position:relative;isolation:isolate;padding:14px;border-radius:14px;background:
  radial-gradient(120% 90% at 25% 15%,rgba(255,220,170,.14),rgba(0,0,0,0) 55%),radial-gradient(90% 80% at 80% 100%,rgba(0,0,0,.4),rgba(0,0,0,0) 70%),var(--leather,#5c1a15);
  box-shadow:inset 0 0 0 2px rgba(226,190,120,.35),inset 0 0 0 7px rgba(0,0,0,.25)}
/* a ribbon bookmark hangs out of the bottom */
.binding::after{content:"";position:absolute;left:calc(50% + 24px);bottom:-34px;z-index:-1;width:14px;height:70px;background:linear-gradient(90deg,#8f241d,#c8402f 45%,#8f241d);clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%)}
/* the page edges show along the sides, so it reads as a thick old book */
.pages{display:grid;grid-template-columns:1fr 1fr;max-height:calc(100vh - 60px);max-height:calc(100svh - 60px);border-radius:6px;overflow:hidden;background:#ecdfc2;
  box-shadow:0 0 0 1px rgba(60,40,20,.5),-3px 3px 0 -1px #e4d6b4,3px 3px 0 -1px #e4d6b4,-4px 4px 0 -1px rgba(60,40,20,.3),4px 4px 0 -1px rgba(60,40,20,.3),-6px 6px 0 -2px #d8c69f,6px 6px 0 -2px #d8c69f,-7px 7px 0 -2px rgba(60,40,20,.35),7px 7px 0 -2px rgba(60,40,20,.35)}
.page{--pad-x:clamp(24px,3.4vw,44px);--pad-y:clamp(24px,3.4vw,44px);position:relative;padding:var(--pad-y) var(--pad-x);overflow:auto;
  background:radial-gradient(120% 80% at 20% 10%,rgba(255,255,255,.38),transparent 60%),radial-gradient(90% 70% at 90% 100%,rgba(120,90,50,.18),transparent 70%),#ecdfc2}
.page.left{background:linear-gradient(to left,rgba(90,60,30,.32),rgba(90,60,30,0) 10%),radial-gradient(120% 80% at 20% 10%,rgba(255,255,255,.38),transparent 60%),#e9dbbb}
.page.right{background:linear-gradient(to right,rgba(90,60,30,.32),rgba(90,60,30,0) 10%),radial-gradient(120% 80% at 80% 10%,rgba(255,255,255,.38),transparent 60%),#ecdfc2}
.page .mono{color:#7a5a30}
.plate-fig{position:relative;margin:16px 0 0;aspect-ratio:4/3;min-height:0;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;padding:18px;border-radius:3px;
  background:radial-gradient(ellipse 60% 55% at 50% 60%,rgba(255,240,205,.9),rgba(236,223,194,0) 75%),#e3d2ac;box-shadow:inset 0 0 0 1px rgba(90,60,30,.45),inset 0 0 0 6px #ecdfc2,inset 0 0 0 7px rgba(90,60,30,.35)}
.plate-fig img{max-width:82%;max-height:100%;width:auto;height:auto;filter:drop-shadow(0 10px 10px rgba(60,35,10,.35));transition:opacity .3s var(--ease-out)}
.page .t-desc{margin-top:14px;font-style:italic;color:#5a4a3a}
.page dl{display:grid;grid-template-columns:auto 1fr;column-gap:18px;row-gap:6px;margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(90,60,30,.3);align-items:baseline}
.page dt{font-family:var(--f-mono);font-size:.82rem;letter-spacing:.06em;color:#7a5a30}
.page dd{margin:0}
.page h2{font-size:clamp(2.1rem,3.4vw,2.9rem);color:#2a1a0e;padding-right:40px}
.t-price{margin-top:10px;font-family:var(--f-display);font-weight:700;font-size:1.8rem;color:#7a1f18}
.t-details{margin-top:12px;max-width:46ch}
/* how hard it is to learn: the five candles */
.t-level{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:10px}
.t-level[hidden]{display:none}
.t-level>span:first-child{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.06em;color:#7a5a30}
.page h3{margin-top:22px;font-size:1.45rem;color:#3a2410}
.chapters{margin:10px 0 0;padding:0;list-style:none;counter-reset:ch;display:grid;gap:6px}
.chapters li{counter-increment:ch;display:grid;grid-template-columns:2.2em 1fr;align-items:baseline}
.chapters li::before{content:counter(ch,upper-roman) ".";font-family:var(--f-display);font-weight:700;color:#8a2a1f}
.t-owned{margin-top:18px;padding:10px 14px;border-radius:8px;border:1px solid rgba(143,36,29,.45);background:rgba(208,66,54,.08);font-style:italic}
.t-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.page .btn-ghost{color:#3a2410;border-color:rgba(58,36,16,.45);background:rgba(255,255,255,.25);-webkit-backdrop-filter:none;backdrop-filter:none}
.page .btn-ghost:hover{border-color:#3a2410;background:rgba(255,255,255,.45)}
.turn{display:flex;justify-content:space-between;gap:12px;margin-top:26px;padding-top:14px;border-top:1px solid rgba(90,60,30,.3)}
.turn button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 4px;border:0;background:none;color:#5a3a1a;font:inherit;font-size:1rem;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(90,58,26,.4);text-underline-offset:4px}
.turn button:hover{color:#2a1a0e}
.turn[hidden],.page dl[hidden],#t-ch-wrap[hidden]{display:none}
.turn svg{width:14px;height:14px}
.tome-close{position:absolute;top:22px;right:22px;z-index:5;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(58,36,16,.45);background:rgba(236,223,194,.9);color:#3a2410;cursor:pointer;transition:border-color .3s var(--ease-out),opacity .3s var(--ease-out)}
.tome-close:hover{border-color:#3a2410}
.tome-close svg{width:16px;height:16px}
/* the cover: a leather front with the title, and an inside that becomes the left page */
.cover{position:absolute;top:0;bottom:0;left:50%;right:0;z-index:4;display:none;transform-origin:0 50%;transform-style:preserve-3d;pointer-events:none}
.cover-front,.cover-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cover-front{display:flex;align-items:center;justify-content:center;padding:14% 12%;border-radius:0 14px 14px 0;
  background:radial-gradient(120% 90% at 30% 20%,rgba(255,220,170,.16),rgba(0,0,0,0) 55%),radial-gradient(90% 80% at 80% 100%,rgba(0,0,0,.45),rgba(0,0,0,0) 70%),var(--leather,#5c1a15);
  box-shadow:inset 0 0 0 2px rgba(226,190,120,.4),inset 0 0 0 10px rgba(0,0,0,.18),inset 0 0 0 12px rgba(226,190,120,.35),inset 12px 0 18px rgba(0,0,0,.35)}
/* the inside of the cover is drawn exactly like the left half of the open book (same leather shading, the same gold
   line along the top, side and bottom, none at the spine), so nothing changes when the cover lands and the real page takes over */
.cover-back{transform:rotateY(180deg);border-radius:14px 0 0 14px;
  background:radial-gradient(240% 90% at 50% 15%,rgba(255,220,170,.14),rgba(0,0,0,0) 55%),radial-gradient(180% 80% at 160% 100%,rgba(0,0,0,.4),rgba(0,0,0,0) 70%),var(--leather,#5c1a15);
  box-shadow:inset 0 2px 0 rgba(226,190,120,.35),inset 0 -2px 0 rgba(226,190,120,.35),inset 2px 0 0 rgba(226,190,120,.35),inset 0 7px 0 rgba(0,0,0,.25),inset 0 -7px 0 rgba(0,0,0,.25),inset 7px 0 0 rgba(0,0,0,.25)}
/* the inside of the cover carries a printed copy of the left page, so it swings in already printed */
.cover-page{position:absolute;top:14px;bottom:14px;left:14px;right:0;border-radius:6px 0 0 6px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(60,40,20,.5),-3px 3px 0 -1px #e4d6b4,-4px 4px 0 -1px rgba(60,40,20,.3),-6px 6px 0 -2px #d8c69f,-7px 7px 0 -2px rgba(60,40,20,.35)}
.cover-title{font-family:var(--f-display);font-weight:700;font-size:clamp(2.2rem,4.2vw,3.6rem);line-height:1.05;text-align:center;text-wrap:balance;color:#f2cf82;background:linear-gradient(180deg,#fbe6b0,#e8b85c 55%,#b8822e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.8))}
.cover-seal{position:absolute;bottom:12%;left:50%;width:54px;height:54px;transform:translateX(-50%);filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
/* shut: only the cover shows; the left half waits behind it */
dialog.tome.shut .cover,dialog.tome.landing .cover{display:block}
/* only the left half is hidden: the ribbon hanging out of the bottom still shows. When the cover lands, the real left half
   is already there underneath it, and the cover fades away over it (the motion adds .landing for that moment) */
dialog.tome.shut .binding{clip-path:inset(-120px -120px -120px 50%)}
dialog.tome.shut .pages .page.left>*{opacity:0}
dialog.tome.shut .tome-close{opacity:0;pointer-events:none}
/* turning a page on a computer (the bookshelf in Your Chamber, and Gimbly's journal): a printed copy of it swings over the spine, the next page printed on its back */
/* it passes over the close button too, so the button stays put under the page instead of floating on top of it */
.leaf{position:absolute;z-index:6;transform-style:preserve-3d;pointer-events:none}
.leaf.fwd{transform-origin:0 50%}
.leaf.bwd{transform-origin:100% 50%}
.leaf-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
/* the outer corners of the pages are rounded, the edges at the spine are not */
.leaf-face.l,.sheet.left{border-radius:6px 0 0 6px}
.leaf-face.r,.sheet.right{border-radius:0 6px 6px 0}
.leaf-back{transform:rotateY(180deg)}
.leaf-page{position:absolute;inset:0;margin:0!important;overflow:hidden}
.leaf-shade{position:absolute;inset:0;opacity:0;pointer-events:none;background:linear-gradient(to right,rgba(60,35,10,.5),rgba(60,35,10,.12) 60%,rgba(60,35,10,.3))}
.sheet{position:absolute;z-index:2;margin:0!important;overflow:hidden;pointer-events:none}
/* the copy of the book's close button that stays above a turning page */
.tome-in>.tome-close.sheet{z-index:7}
/* turning a page on a phone (assets/js/pageflip.js): a printed copy of the page turns over at its left edge, the spine,
   seen from in front of the spine. It turns under the close button, which stays put on the binding */
.flip{position:absolute;z-index:3;pointer-events:none;perspective-origin:0 50%}
.flip-under,.flip-face{position:absolute;top:0;width:100%;height:100%;overflow:hidden}
.flip-under{left:0}
.flip-face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-front{left:0;transform-origin:0 50%}
/* the plain back of the leaf, which lies to the left of the spine once it has turned over */
.flip-back{right:100%;transform-origin:100% 50%}
/* the copy is laid out at full length and slid up to the part that was in view; its paper is the window's */
.flip .flip-copy{position:absolute;left:0;width:100%;max-height:none;margin:0;overflow:hidden;border-radius:0;background:none;box-shadow:none}
/* the leaf darkens as it tilts away from the light, most at the spine */
.flip-shade{position:absolute;inset:0;opacity:0;background:linear-gradient(to right,rgba(60,35,10,.5),rgba(60,35,10,.14) 55%,rgba(60,35,10,.3))}
.flip-back .flip-shade{background:linear-gradient(to left,rgba(60,35,10,.5),rgba(60,35,10,.14) 55%,rgba(60,35,10,.3))}
/* the soft shadow it casts on the page under it, which follows its edge across */
.flip-cast{position:absolute;top:0;left:0;width:55%;height:100%;opacity:0;transform-origin:0 50%;background:linear-gradient(to right,rgba(40,22,8,.42),rgba(40,22,8,.16) 30%,rgba(40,22,8,0))}

/* a computer: each page is never taller than the screen allows, so the bottom of the book is never cut off
   (a page that still runs long scrolls on its own, with a thin scrollbar) */
@media (min-width:761px),(min-width:560px) and (max-height:520px){
  .page{max-height:calc(100vh - 60px);max-height:calc(100svh - 60px);scrollbar-width:thin;scrollbar-color:rgba(90,60,30,.35) transparent}
  /* the buttons to turn the page stay in view as a longer page scrolls. Their strip runs edge to edge, painted like the
     page under it (its shade at the spine, and its line), and the space below them is theirs, so nothing shows beneath */
  .shelf-tome .page,.journal-tome .page{padding-bottom:0}
  /* a book of one page has no strip, so its page keeps that space */
  .shelf-tome .page:not(:has(>.turn:not([hidden]))){padding-bottom:var(--pad-y)}
  .page>.turn{--line:linear-gradient(rgba(90,60,30,.3),rgba(90,60,30,.3)) top center/calc(100% - 2*var(--pad-x)) 1px no-repeat;
    position:sticky;bottom:0;z-index:1;margin-inline:calc(var(--pad-x)*-1);padding-inline:var(--pad-x);padding-bottom:var(--pad-y);border-top:0}
  .page.left>.turn{background:var(--line),linear-gradient(to left,rgba(90,60,30,.32),rgba(90,60,30,0) 10%),#e9dbbb}
  .page.right>.turn{background:var(--line),linear-gradient(to right,rgba(90,60,30,.32),rgba(90,60,30,0) 10%),#ecdfc2}
}
/* shorter computer screens (most laptops): a little less room around everything, so the whole book fits */
@media (min-width:761px) and (max-height:900px),(min-width:560px) and (max-height:520px){
  .page{--pad-x:34px;--pad-y:26px}
  .page h2{font-size:clamp(1.9rem,3vw,2.4rem)}
  .plate-fig{aspect-ratio:16/10;margin-top:12px}
  .page h3{margin-top:16px}
  .page dl{margin-top:12px;padding-top:10px}
  .turn{margin-top:18px}
  .t-acts{margin-top:16px}
}
/* a phone on its side is short and wide, so it gets the two pages of a computer, with everything closer together. The
   book takes more of the screen, and the close button stays on the book, so a page that scrolls never takes it away */
@media (min-width:560px) and (max-width:1100px) and (max-height:520px){
  dialog.tome{width:calc(100vw - 16px);max-height:calc(100vh - 16px);max-height:calc(100svh - 16px)}
  .pages,.page{max-height:calc(100vh - 44px);max-height:calc(100svh - 44px)}
  .page{--pad-x:20px;--pad-y:12px}
  .page .mono{font-size:.78rem}
  .page h2{font-size:1.5rem}
  .t-price{margin-top:4px;font-size:1.25rem}
  .t-details{margin-top:6px}
  .page .t-desc{margin-top:6px}
  .plate-fig{aspect-ratio:2/1;margin-top:6px;padding:10px}
  .page h3{margin-top:10px;font-size:1.15rem}
  .chapters{margin-top:4px;gap:2px}
  .page dl{margin-top:8px;padding-top:6px;row-gap:2px}
  .turn{margin-top:8px;padding-top:4px}
  .turn button{min-height:36px}
  .t-acts{margin-top:10px}
  .tome-close{top:18px;right:18px;width:40px;height:40px}
}
@media (max-width:760px) and (min-height:521px),(max-width:559px){
  .pages{grid-template-columns:1fr;overflow:auto;box-shadow:0 0 0 1px rgba(60,40,20,.5),3px 3px 0 -1px #e4d6b4,4px 4px 0 -1px rgba(60,40,20,.3),6px 6px 0 -2px #d8c69f,7px 7px 0 -2px rgba(60,40,20,.35)}
  .page{overflow:visible}
  .pages{background:radial-gradient(120% 50% at 20% 0%,rgba(255,255,255,.38),transparent 60%),radial-gradient(90% 40% at 90% 100%,rgba(120,90,50,.16),transparent 70%),#ecdfc2}
  .page.left{background:transparent;padding-bottom:10px}
  .page.right{background:transparent;padding-top:18px;margin:0 clamp(24px,3.4vw,44px);padding-left:0;padding-right:0;border-top:1px solid rgba(90,60,30,.3)}
  .page h2{padding-right:0}
  .binding{padding:10px}
  .binding::after{left:auto;right:34px;bottom:-30px;height:60px}
  /* one page on a phone: the cover covers it all and swings away to the left */
  .cover{left:0}
  dialog.tome.shut:not(.swing) .tome-in::before{transform:none}
  .cover-front{border-radius:14px}
  .cover-back{display:none}
  dialog.tome.shut .binding{clip-path:none}
  dialog.tome.shut .pages .page.left>*{opacity:1}
  .tome-close{top:16px;right:16px}
  .plate-fig{aspect-ratio:16/9}
  .page.left .mono{padding-right:52px}
}

/* Reduced motion: the book is simply open */
@media (prefers-reduced-motion: reduce){
  .cover{display:none!important}
  dialog.tome.shut .binding{clip-path:none}
  dialog.tome.shut .pages .page.left>*,dialog.tome.shut .tome-close{opacity:1}
}