/* The travel log book. Warm paper on a dark backdrop. */
#book { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgb(6 8 12 / 0.82); backdrop-filter: blur(3px); user-select: none; touch-action: manipulation; }
#book .x { position: absolute; top: 14px; right: 14px; z-index: 3; }
#book .stage { position: relative; width: min(980px, 96vw); height: min(640px, 88vh); perspective: 2200px; display: grid; place-items: center; }
#book .nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 64px; border-radius: 10px; border: 1px solid var(--line); background: var(--glass); color: var(--text); font-size: 30px; cursor: pointer; }
#book .nav[hidden] { display: none; }
#book .nav.prev { left: max(4px, calc(50% - 520px)); }
#book .nav.next { right: max(4px, calc(50% - 520px)); }
#book .cover { width: min(420px, 90vw); height: min(560px, 82vh); border-radius: 6px 18px 18px 6px; background: linear-gradient(135deg, #7a4a2a, #4b2c18); border: 3px solid #2f1a0e; box-shadow: inset 8px 0 0 #3b2113, 0 24px 60px #000c; color: #f2d9a6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; cursor: pointer; text-align: center; padding: 20px; box-sizing: border-box; }
#book .ct { font: 700 34px Georgia, serif; letter-spacing: 0.18em; border-top: 2px solid #f2d9a6aa; border-bottom: 2px solid #f2d9a6aa; padding: 12px 18px; }
#book .cn { font: italic 20px Georgia, serif; }
#book .cs { font: 14px var(--mono); opacity: 0.85; }
#book .ch { margin-top: 20px; font: 12px var(--mono); opacity: 0.6; letter-spacing: 0.12em; text-transform: uppercase; }
#book .spread { position: relative; width: 100%; height: 100%; display: flex; border-radius: 8px; box-shadow: 0 24px 60px #000c; background: #d8c9a6; }
#book .pg { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding: 18px 14px; box-sizing: border-box; overflow: hidden; }
#book .pg.left { border-radius: 8px 0 0 8px; background: linear-gradient(90deg, #ebdfbf, #f1e6c9 92%, #cdbf9c); }
#book .pg.right { border-radius: 0 8px 8px 0; background: linear-gradient(90deg, #cdbf9c, #f1e6c9 8%, #ebdfbf); }
#book .pno { position: absolute; bottom: 6px; font: 11px var(--mono); color: #9a8a68; }
#book .pg.left .pno { left: 14px; }
#book .pg.right .pno { right: 14px; }
#book .pol { width: min(215px, 85%); background: #fbf8f0; padding: 8px 8px 6px; box-shadow: 0 3px 8px #0006; transform: rotate(var(--tilt)); color: #3a3446; font-family: "Ink Free", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; }
#book .pol .pic { aspect-ratio: 1; background: #1a1612; display: grid; place-items: center; overflow: hidden; }
#book .pol .pic img { width: 100%; height: 100%; object-fit: cover; }
#book .pol.empty { background: #f4efe3; box-shadow: none; outline: 2px dashed #b9a97f; }
#book .pol.empty .pic { background: #e7dec6; }
#book .ghost { padding: 12px; font: 12px var(--sans); color: #9a8a68; text-align: center; }
#book .ttl { font-size: 15px; margin-top: 4px; }
#book .story { font-size: 11px; line-height: 1.25; margin-top: 2px; }
#book .when { font-size: 10px; color: #8a8076; margin-top: 2px; }
#book .leaf { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; transition: transform 0.7s ease-in-out; z-index: 2; }
#book .leaf.fwd { left: 50%; transform-origin: left center; }
#book .leaf.fwd.turn { transform: rotateY(-180deg); }
#book .leaf.back { left: 0; transform-origin: right center; }
#book .leaf.back.turn { transform: rotateY(180deg); }
#book .face { position: absolute; inset: 0; backface-visibility: hidden; display: flex; }
#book .face > * { flex: 1; }
#book .face.backf { transform: rotateY(180deg); }
#book .slot { --polw: 215px; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) var(--polw) minmax(0, 1fr); align-items: center; }
#book .slot .pol { width: 100%; }
#book .sk { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
#book .stk { max-width: 100%; height: auto; transform: rotate(var(--rot)); filter: drop-shadow(0 2px 2px #0005); image-rendering: pixelated; }
#book .pg.badges { justify-content: flex-start; gap: 10px; }
#book .bt { font: 700 16px Georgia, serif; letter-spacing: 0.2em; text-transform: uppercase; color: #8a7448; margin-top: 4px; }
#book .bgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; width: 100%; }
#book .bw { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#book .badge { width: 62px; height: 62px; border-radius: 50%; display: grid; place-content: center; text-align: center; border: 3px dashed #bda97a; color: #b3a47c; background: #efe6cb; font-family: var(--sans); }
#book .badge .bs { font: 700 8px var(--sans); letter-spacing: 0.12em; } #book .badge .bn { font: 700 19px Georgia, serif; line-height: 1; }
#book .badge.got { border: 3px solid #fff8; color: #fff; box-shadow: 0 2px 4px #0006, inset 0 0 0 2px #ffffff55; transform: rotate(-4deg); }
#book .badge.t0 { background: radial-gradient(circle at 35% 30%, #f6b13c, #d4761a); } #book .badge.t1 { background: radial-gradient(circle at 35% 30%, #58b6e8, #2a6fb0); }
#book .badge.t2 { background: radial-gradient(circle at 35% 30%, #6bcf8a, #2d8c55); } #book .badge.t3 { background: radial-gradient(circle at 35% 30%, #e46d6d, #b03a3a); } #book .badge.t4 { background: radial-gradient(circle at 35% 30%, #b58be0, #7440b0); }
#book .bl { font: 9px var(--sans); color: #7a6a48; text-align: center; line-height: 1.15; max-width: 88px; }
@media (max-width: 759px) { #book .slot { --polw: 62%; } #book .bgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 759px) { #book .spread { width: min(430px, 96vw); margin: auto; } #book .pol { width: min(250px, 70%); } #book .nav { width: 36px; } #book .nav.prev { left: 2px; } #book .nav.next { right: 2px; } }
#book .pol[data-zone] { cursor: zoom-in; }
#book .lb { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgb(6 8 12 / 0.92); cursor: zoom-out; }
#book .lb .pol { width: min(94vw, 74vh); padding: 3.2% 3.2% 2.4%; --tilt: -1deg; cursor: zoom-out; box-shadow: 0 10px 40px #000a; }
#book .lb .ttl { font-size: clamp(20px, 3.4vh, 34px); margin-top: 8px; }
#book .lb .story { font-size: clamp(14px, 2.3vh, 22px); margin-top: 4px; }
#book .lb .when { font-size: clamp(12px, 1.9vh, 18px); margin-top: 4px; }