/* Library / reading room for personal.html#book -- active only while
   body.theme-library is set by assets/personal-library.js.
   v3 (2026-10-18, Audi: "เหมือนงานสมัยก่อน … ทำให้หนังสือและขอบหนังสือสวย fontและหน้าปรับด้วย" → picked "มุมอ่านหนังสือ"):
   modern reading room on the shared sky. Real 3D books (cover + page block fore-edge, gilt edges on 5-star books)
   on an oak plinth, a reading desk, light-oak shelves; Fraunces display + Plus Jakarta Sans labels (sentence case,
   no small caps). Night and day are a designed pair; #libraryView carries data-ak-lf-skip so the shell light
   adapter never whitens it. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&family=Noto+Serif+Thai:wght@500;600;700&display=swap');

body.theme-library .gallery-wrap { max-width: 1180px; padding: 0 20px 5rem; }
body.theme-library .back-bar,
body.theme-library .hero-title,
body.theme-library .hero-sub,
body.theme-library .category-view-header,
body.theme-library .pcms-admin-only[onclick="openDraftModal()"],
body.theme-library[data-lb-cat="book"] .gallery-section[data-category="book"] { display: none !important; }

/* ---------- tokens: night (default) / day ---------- */
#libraryView, .lb-pull {
    --lb-serif: 'Fraunces', 'Noto Serif Thai', Georgia, serif;
    --lb-sans: 'Plus Jakarta Sans', 'Sarabun', system-ui, sans-serif;
    --lb-ink: #f7efe0; --lb-sub: #ddd1ba; --lb-gold: #f6dba3; --lb-gold-ink: #2a1c0c;
    --lb-chip: rgba(255,244,222,0.07); --lb-chip-line: rgba(232,196,124,0.32);
    --oak-1: #b98a57; --oak-2: #9a6c3e; --oak-3: #6e4824; --oak-lip: #d7ae7a;
    --case-back: linear-gradient(180deg, #1d2232 0%, #161a26 100%);
    --case-light: rgba(255,214,150,0.22);
    --desk-glow: rgba(255,205,130,0.18);
    --spot: rgba(255,232,188,0.34);
}
html[data-theme=light] #libraryView, html[data-theme=light] .lb-pull {
    --lb-ink: #2a2118; --lb-sub: #4a3d2e; --lb-gold: #6f4a0e; --lb-gold-ink: #2a1c0c;
    --lb-chip: rgba(255,255,255,0.72); --lb-chip-line: rgba(154,106,28,0.32);
    --oak-1: #e2c49a; --oak-2: #cfa673; --oak-3: #a87b49; --oak-lip: #f2dcb9;
    --case-back: linear-gradient(180deg, #f6efe3 0%, #ece2d1 100%);
    --case-light: rgba(255,236,190,0.55);
    --desk-glow: rgba(255,214,140,0.35);
    --spot: rgba(255,240,200,0.6);
}

#libraryView { display: none; font-family: var(--lb-sans); color: var(--lb-ink); overflow-x: clip; /* 3D page blocks must never widen the page */ }
body.theme-library #libraryView { display: block; }

.lb-btn {
    background: var(--lb-chip); color: var(--lb-ink); border: 1px solid var(--lb-chip-line); border-radius: 999px;
    padding: 10px 18px; min-height: 44px; font-family: var(--lb-sans); font-size: .95rem; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.lb-btn:hover { transform: translateY(-1px); border-color: var(--lb-gold); }
.lb-btn.is-solid { background: linear-gradient(180deg, #f3d897, #d4a653); color: #2a1c0c; border-color: #e7c27a; }
.lb-btn:focus-visible, .lb-chip:focus-visible, .lb-spine:focus-visible, .lb-face:focus-visible, .lb-add:focus-visible, .lb-back:focus-visible { outline: 2px solid var(--lb-gold); outline-offset: 3px; }

/* ---------- header ---------- */
.lb-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 34px 0 10px; }
.lb-top > .lb-back { justify-self: start; }
.lb-back {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--lb-sub);
    font-family: var(--lb-sans); font-size: .95rem; font-weight: 600; transition: color .25s ease;
}
.lb-back span { display: inline-block; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.lb-back:hover { color: var(--lb-ink); }
.lb-back:hover span { transform: translateX(-4px); }
.lb-add {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border: 1px solid #e7c27a; cursor: pointer;
    background: linear-gradient(180deg, #f6dc9f 0%, #d5a954 100%); color: #2a1c0c;
    font-family: var(--lb-sans); font-size: .95rem; font-weight: 700; border-radius: 999px; padding: 6px 18px 6px 7px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 16px rgba(0,0,0,0.3);
    transition: transform .25s ease, filter .25s ease;
}
.lb-add span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #2a1c0c; color: #f6dc9f; font-size: 1.2rem; line-height: 1; transition: transform .3s ease; }
.lb-add:hover { transform: translateY(-2px); filter: brightness(1.05); }
.lb-add:hover span { transform: rotate(90deg); }
.lb-top-r { justify-self: end; }
.lb-title { position: relative; text-align: center; isolation: isolate; }
.lb-title .lb-lamp { z-index: -1; }
.lb-kicker { position: relative; display: block; font-family: var(--lb-sans); font-size: .9rem; font-weight: 600; letter-spacing: .04em; color: var(--lb-gold); margin-bottom: 6px; }
.lb-title h2 { position: relative; display: inline-flex; align-items: center; gap: 14px; margin: 0; font-family: var(--lb-serif); font-weight: 600; font-variation-settings: 'opsz' 144;
    font-size: clamp(2.6rem, 5.6vw, 4.2rem); line-height: 1.05; letter-spacing: -.02em; color: var(--lb-ink); }
.lb-px { width: 48px; height: 42px; flex: none; image-rendering: pixelated; animation: lbPxBob 2.4s steps(2) infinite; }
.lb-px .lb-px-flip { animation: lbPxFlip 2.4s steps(1) infinite; }
@keyframes lbPxBob { 50% { translate: 0 -3px; } }
@keyframes lbPxFlip { 50% { opacity: .35; } }
.lb-stats { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 0; }
.lb-stats span { padding: 5px 12px; border-radius: 999px; background: var(--lb-chip); box-shadow: inset 0 0 0 1px var(--lb-chip-line); font-size: .9rem; color: var(--lb-ink); }
.lb-stats b { color: var(--lb-ink); font-weight: 700; }
.lb-lamp { position: absolute; left: 50%; top: -60px; width: 420px; height: 220px; transform: translateX(-50%); pointer-events: none;
    background: radial-gradient(ellipse at 50% 18%, var(--case-light), rgba(255,214,150,0) 70%); }
.lb-lamp i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,228,180,0.75); box-shadow: 0 0 6px rgba(255,220,160,0.9); animation: lbDust 9s ease-in-out infinite; opacity: 0; }
.lb-lamp i:nth-child(1) { left: 30%; top: 40%; }
.lb-lamp i:nth-child(2) { left: 62%; top: 55%; animation-delay: 1.6s; animation-duration: 11s; }
.lb-lamp i:nth-child(3) { left: 45%; top: 30%; animation-delay: 3.1s; }
.lb-lamp i:nth-child(4) { left: 72%; top: 35%; animation-delay: 4.4s; animation-duration: 12s; }
.lb-lamp i:nth-child(5) { left: 38%; top: 62%; animation-delay: 5.9s; }
.lb-lamp i:nth-child(6) { left: 55%; top: 22%; animation-delay: 7.2s; animation-duration: 10s; }
html[data-theme=light] .lb-lamp i { display: none; }
@keyframes lbDust { 0% { opacity: 0; translate: 0 0; } 20% { opacity: .9; } 80% { opacity: .6; } 100% { opacity: 0; translate: 18px 46px; } }

/* ---------- category chips ---------- */
.lb-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px auto 46px; max-width: 1000px; padding: 0 6px; }
.lb-chip {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 8px 6px 14px; cursor: pointer; white-space: nowrap;
    border: 0; border-radius: 999px; color: var(--lb-ink); background: var(--lb-chip); box-shadow: inset 0 0 0 1px var(--lb-chip-line);
    font-family: var(--lb-sans); font-size: .95rem; font-weight: 600;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.lb-chip em { font-style: normal; font-size: 1rem; line-height: 1; }
/* Count = plain number after the name, no tinted pill (Audi 2026-10-18: "พวกตรงตัวเลข 14 4 2 … มีพื้นหลังสีนี้มันไม่สวย คุณชอบทำสีนี้มาแต่ฉันไม่ชอบ"). */
.lb-chip span { min-width: 0; padding: 0 4px 0 2px; text-align: left; font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--lb-sub); background: none; }
.lb-chip:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--lb-gold); }
.lb-chip.is-on { color: #2a1c0c; background: linear-gradient(180deg, #f6dc9f, #d5a954); box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
.lb-chip.is-on span { color: #5a3a12; background: none; }

/* ---------- section heading: 🏆 The Masterpieces ———— 3 books ---------- */
.lb-head { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-weight: 400; }
.lb-head-num { font-size: 1.5rem; line-height: 1; }
.lb-head-title { font-family: var(--lb-serif); font-weight: 600; font-variation-settings: 'opsz' 72; font-size: clamp(1.6rem, 2.8vw, 2.1rem); line-height: 1.15; letter-spacing: -.01em; color: var(--lb-ink); }
.lb-head-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--lb-chip-line), transparent); }
.lb-head-sub { font-size: .9rem; color: var(--lb-sub); white-space: nowrap; }
.lb-stars { color: #e3b13f; letter-spacing: .04em; }
.lb-stars i { font-style: normal; opacity: .3; }

/* ---------- the 3D book (cover + page block + back board) ---------- */
.lb-b3 { --w: 150px; --h: calc(var(--w) * 1.5); --d: 30px; --ry: -26deg;
    position: relative; display: block; width: var(--w); height: var(--h); transform-style: preserve-3d;
    transform: perspective(1100px) rotateY(var(--ry)); transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.lb-b-front, .lb-b-back { position: absolute; inset: 0; border-radius: 2px 6px 6px 2px; }
.lb-b-front { transform: translateZ(calc(var(--d) / 2)); overflow: hidden; background: #2a1d12;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2); }
.lb-b-front::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: linear-gradient(90deg, rgba(0,0,0,0.38) 0%, rgba(255,255,255,0.2) 2.5%, rgba(255,255,255,0) 7%), linear-gradient(118deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 40%); }
.lb-b-back { transform: translateZ(calc(var(--d) / -2)); background: #20160d; box-shadow: 18px 22px 30px rgba(0,0,0,0.5); }
/* Fore-edge: the stack of pages on the right, fine lines + a soft curve of light. */
.lb-b-pages { position: absolute; top: 4px; bottom: 4px; left: calc(var(--w) - var(--d) / 2 - 3px); width: var(--d);
    transform: rotateY(90deg); transform-origin: 50% 50%;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.28), rgba(0,0,0,0) 30%, rgba(255,255,255,0.25) 55%, rgba(0,0,0,0.18)),
        repeating-linear-gradient(90deg, #f7efdc 0 1px, #e3d5b8 1px 2px);
    border-radius: 1px; }
.lb-b3.is-gilt .lb-b-pages { background:
        linear-gradient(90deg, rgba(0,0,0,0.3), rgba(0,0,0,0) 30%, rgba(255,250,220,0.55) 55%, rgba(0,0,0,0.2)),
        repeating-linear-gradient(90deg, #f3d58c 0 1px, #c99a3d 1px 2px); }
/* Cover art: never cropped. The full cover sits on a soft blurred copy of itself. */
.lb-b-art { position: absolute; inset: 0; display: block; background: var(--b-img) center / cover no-repeat; }
.lb-b-art::before { content: ''; position: absolute; inset: 0; background: inherit; filter: blur(10px) brightness(.8); transform: scale(1.15); }
.lb-b-art img { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; }
.lb-noart { display: grid; place-items: center; width: 100%; height: 100%; font-size: 2.4rem; }

/* ---------- 🏆 masterpieces on an oak plinth ---------- */
.lb-hall { margin: 0 0 56px; }
.lb-hall-case { position: relative; display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; gap: 26px 70px; padding: 64px 36px 0; }
.lb-hall-glow { position: absolute; inset: 0 8% 40px; pointer-events: none; border-radius: 50%;
    background: radial-gradient(ellipse 60% 70% at 50% 60%, var(--case-light), rgba(0,0,0,0) 70%); }
.lb-exhibit { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 210px; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit; transition: opacity .35s ease, filter .35s ease; }
.lb-exhibit .lb-b3 { --w: 168px; --d: 34px; margin-bottom: -6px; }
.lb-exhibit:nth-child(3n+3) .lb-b3 { --ry: -18deg; }
.lb-exhibit:hover .lb-b3, .lb-exhibit:focus-visible .lb-b3 { transform: perspective(1100px) rotateY(-8deg) translateY(-12px); }
.lb-spot { position: absolute; left: 50%; top: -64px; width: 300px; height: 380px; transform: translateX(-50%); pointer-events: none;
    clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); filter: blur(8px);
    background: linear-gradient(180deg, var(--spot) 0%, rgba(255,226,170,0.1) 50%, rgba(255,226,170,0) 90%); }
.lb-plinth { order: 99; flex-basis: 100%; height: 34px; margin: 0 -10px; border-radius: 6px 6px 10px 10px; position: relative; z-index: 0;
    background: linear-gradient(180deg, var(--oak-lip) 0 3px, var(--oak-1) 3px, var(--oak-2) 55%, var(--oak-3) 100%);
    box-shadow: 0 22px 34px -14px rgba(0,0,0,0.6), inset 0 -2px 0 rgba(0,0,0,0.18); }
.lb-hall-case > .lb-exhibit { margin-bottom: -2px; }
.lb-nameplate { order: 100; display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 200px; margin-top: 46px; text-align: center; }
.lb-hall-case { row-gap: 0; }
.lb-exhibit .lb-nameplate { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 200px; margin-top: 46px; }
.lb-hall-case { padding-bottom: 104px; }
.lb-hall-case .lb-plinth { position: absolute; left: 0; right: 0; bottom: 70px; margin: 0; }
.lb-nameplate b { font-family: var(--lb-serif); font-weight: 600; font-size: 1.05rem; line-height: 1.25; color: var(--lb-ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lb-nameplate i { font-style: normal; font-size: .8rem; letter-spacing: .2em; color: #e3b13f; }
html[data-theme=light] .lb-nameplate i { color: #8a5a00; }
.lb-np-note { margin-top: 2px; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; color: #0c4a33; background: #c9f0dc; }
.lb-swipe { display: none; margin: 8px 0 0; text-align: right; font-size: .82rem; font-weight: 600; color: var(--lb-sub); }
.lb-exhibit.is-out .lb-b3 { opacity: 0; }
.lb-exhibit.is-dim { opacity: .25; filter: grayscale(.7); }
.lb-exhibit:focus-visible { outline: 2px solid var(--lb-gold); outline-offset: 6px; }

/* ---------- 📖 reading desk ---------- */
.lb-desk { position: relative; margin: 0 0 56px; }
.lb-desk::before { content: ''; position: absolute; left: 4%; right: 30%; bottom: 74px; height: 200px; pointer-events: none;
    background: radial-gradient(ellipse at 30% 100%, var(--desk-glow), rgba(0,0,0,0) 70%); }
.lb-desk-books { display: flex; gap: 40px; align-items: flex-end; padding: 18px 34px 0; position: relative; z-index: 1; flex-wrap: wrap; }
.lb-face { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit;
    transition: opacity .3s ease, filter .3s ease; }
.lb-face .lb-b3 { --w: 128px; --d: 26px; --ry: -22deg; }
.lb-face:nth-child(2n) .lb-b3 { --ry: -14deg; }
.lb-face:hover .lb-b3, .lb-face:focus-visible .lb-b3 { transform: perspective(1100px) rotateY(-6deg) translateY(-14px); }
.lb-bookmark { position: absolute; top: -10px; right: 22px; width: 13px; height: 54px; transform: translateZ(calc(var(--d) / 2 + 1px));
    background: linear-gradient(90deg, #8f1c15, #d33a2e 50%, #8f1c15); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.lb-face-tag { position: absolute; bottom: -36px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap;
    color: #0c4a33; background: #c9f0dc; }
.lb-face-tag.is-paused { color: #5b3b00; background: #fbe3a6; }
.lb-face.is-out .lb-b3 { opacity: 0; }
.lb-desk-top { display: block; height: 30px; margin-top: -2px; border-radius: 6px 6px 10px 10px;
    background: linear-gradient(180deg, var(--oak-lip) 0 3px, var(--oak-1) 3px, var(--oak-2) 60%, var(--oak-3));
    box-shadow: 0 22px 30px -12px rgba(0,0,0,0.55); }
.lb-desk { padding-bottom: 44px; }

/* ---------- shelves: slim floating wall shelves (v3.1, Audi 2026-10-18: "ชั้นหนังสือยังไม่สวย เหมือนงาน paint สมัยก่อน
   ที่ขึ้น 5ดาว 4ดาว") — no cabinet box, no rating bookends, no emoji props. Books stand on a thin plank that casts a
   soft shadow on the wall; genre = a coloured library sticker on each spine, matching the dot on its chip. ---------- */
.lb-shelf-sec { margin: 0 0 50px; }
.lb-case { --row: 250px; --plank: 12px; position: relative; padding: 0 6px; }
/* Every row sits on its own plank: planks are a repeating background and every spine is exactly one row tall. */
.lb-books {
    display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 2px; padding: 0 18px;
    /* the plank is as long as its books (a short shelf for 2 books, never an empty 1200px board) */
    width: fit-content; min-width: min(100%, 360px); max-width: 100%; box-sizing: border-box;
    background:
        repeating-linear-gradient(180deg,
            transparent 0 calc(var(--row) - var(--plank)),
            var(--plank-top) calc(var(--row) - var(--plank)) calc(var(--row) - var(--plank) + 2px),
            var(--plank-1) calc(var(--row) - var(--plank) + 2px),
            var(--plank-2) var(--row));
    border-radius: 2px;
}
/* the shadow each plank casts on the wall below it */
.lb-books::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
    background: repeating-linear-gradient(180deg, transparent 0 var(--row), var(--plank-shadow) var(--row), transparent calc(var(--row) + 18px), transparent calc(var(--row) * 2)); }
.lb-case { isolation: isolate; }
.lb-books > * { margin-bottom: var(--plank); }
#libraryView { --plank-top: #b48a5c; --plank-1: #7a5232; --plank-2: #5a3b22; --plank-shadow: rgba(0,0,0,0.45); }
html[data-theme=light] #libraryView { --plank-top: #fbf1df; --plank-1: #e7cfa8; --plank-2: #cda774; --plank-shadow: rgba(80,60,30,0.22); }

.lb-spine {
    --sp-bg: #6b4a30; --sp-tint: rgba(70,46,28,0.55); --sp-fg: #fbf3e4;
    position: relative; display: flex; align-items: flex-end; width: var(--sp-w); height: calc(var(--row) - var(--plank));
    padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--sp-fg);
}
.lb-sp {
    position: relative; display: flex; flex-direction: column; align-items: center;
    width: 100%; height: var(--sp-h); overflow: hidden; border-radius: 3px 3px 1px 1px;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.42) 0%, rgba(255,255,255,0.22) 10%, rgba(255,255,255,0.04) 26%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.32) 100%),
        linear-gradient(var(--sp-tint), var(--sp-tint)),
        var(--sp-img, none) 14% 50% / cover no-repeat,
        var(--sp-bg);
    box-shadow: 1px 0 0 rgba(0,0,0,0.35), 3px 2px 6px rgba(0,0,0,0.28);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, filter .3s ease;
    will-change: transform;
}
/* Head of the book: the page block peeking over the top board. Gilt on 5-star books. */
.lb-sp::before { content: ''; position: absolute; top: 0; left: 3px; right: 3px; height: 4px; border-radius: 0 0 2px 2px;
    background: repeating-linear-gradient(90deg, #f7efdc 0 1px, #dccdae 1px 2px); box-shadow: 0 1px 0 rgba(0,0,0,0.25); }
.lb-spine.is-gold .lb-sp::before { background: repeating-linear-gradient(90deg, #f6dc94 0 1px, #c99a3d 1px 2px); }
.lb-spine-title {
    writing-mode: vertical-rl; text-orientation: mixed; margin: 18px 0 8px; padding: 8px 3px; max-height: calc(100% - 70px); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; font-family: var(--lb-serif); font-weight: 600; font-size: .92rem; letter-spacing: .01em;
    border-radius: 3px; color: #fff; text-shadow: none;
    /* the strip behind the title wears the genre colour, so a shelf reads by genre at a glance */
    background: var(--g, #4b5563); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 1px 2px rgba(0,0,0,0.3);
}
/* Hover / focus card above the book: rating, title, genre. */
.lb-tip { position: absolute; left: -4px; bottom: calc(var(--sp-h) + 26px); z-index: 5; width: max-content; max-width: 220px;
    display: flex; flex-direction: column; gap: 3px; padding: 9px 12px 10px; border-radius: 12px; text-align: left;
    background: #fffaf0; color: #2a2118; box-shadow: 0 12px 28px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(154,106,28,0.25);
    opacity: 0; translate: 0 6px; pointer-events: none; transition: opacity .18s ease, translate .18s ease; }
.lb-tip::after { content: ''; position: absolute; left: 18px; top: 100%; border: 7px solid transparent; border-top-color: #fffaf0; }
.lb-spine:hover .lb-tip, .lb-spine:focus-visible .lb-tip { opacity: 1; translate: 0 0; }
.lb-tip-stars { font-size: 1rem; letter-spacing: .06em; color: #b7791f; }
.lb-tip-stars.is-none { font-size: .8rem; letter-spacing: 0; color: #5b4d3c; }
.lb-tip-title { font-family: var(--lb-serif); font-weight: 600; font-size: .98rem; line-height: 1.3; white-space: normal; }
.lb-tip-genre { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: #5b4d3c; }
.lb-tip-genre i { width: 9px; height: 9px; border-radius: 3px; background: var(--g); }
.lb-spine:last-child .lb-tip, .lb-spine:nth-last-child(2) .lb-tip { left: auto; right: -4px; }
.lb-spine:last-child .lb-tip::after, .lb-spine:nth-last-child(2) .lb-tip::after { left: auto; right: 18px; }
/* Library classification sticker: genre colour + its emoji, near the foot of the spine. */
.lb-label { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; display: grid; place-items: center;
    width: min(28px, calc(100% - 8px)); aspect-ratio: 1; border-radius: 6px; font-size: .78rem; line-height: 1;
    background: var(--g); box-shadow: 0 0 0 1.5px rgba(255,255,255,0.85), 0 1px 3px rgba(0,0,0,0.4); }
.lb-spine:hover .lb-sp, .lb-spine:focus-visible .lb-sp { transform: translateY(-16px); box-shadow: 1px 0 0 rgba(0,0,0,0.35), 6px 12px 18px rgba(0,0,0,0.35); filter: brightness(1.08); }
.lb-spine.is-out .lb-sp { opacity: 0; transform: translateY(-30px); }

/* ---------- rating: number + one star, louder the higher it is (Audi 2026-10-18) ---------- */
.lb-rate { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 1px;
    min-width: 26px; height: 20px; margin-top: 8px; padding: 0 5px; border-radius: 6px; box-sizing: border-box;
    font-family: var(--lb-sans); font-size: .76rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.lb-rate i { font-style: normal; font-size: .7rem; }
.lb-rate.r5 { min-width: 30px; height: 22px; font-size: .84rem; color: #3b2508;
    background: linear-gradient(180deg, #fff1bf, #f2cd6a 45%, #c9962f); box-shadow: 0 0 0 1px #8a6418, 0 0 12px rgba(255,205,90,0.75); }
.lb-rate.r4 { color: #1f2a37; background: linear-gradient(180deg, #ffffff, #d7dee8 55%, #a9b4c2); box-shadow: 0 0 0 1px #6b7787; }
.lb-rate.r3 { color: #fff; background: rgba(20,20,24,0.78); box-shadow: 0 0 0 1px rgba(255,255,255,0.35); }
.lb-rate.r2, .lb-rate.r1, .lb-rate.r0 { color: #e5e7eb; background: rgba(20,20,24,0.55); font-weight: 700; }
.lb-spine-title { margin-top: 10px; }
/* top-rated books stand out on the shelf; low-rated ones step back */
.lb-spine.tier-5 .lb-sp { box-shadow: 1px 0 0 rgba(0,0,0,0.35), 0 0 0 1px rgba(242,205,106,0.7), 0 0 16px rgba(242,205,106,0.45); }
.lb-spine.tier-2 .lb-sp, .lb-spine.tier-1 .lb-sp, .lb-spine.tier-0 .lb-sp { filter: saturate(.55) brightness(.85); }
/* on a face-out cover the badge is a corner ribbon */
.lb-rate.on-cover { position: absolute; top: 8px; right: 8px; margin: 0; z-index: 2; }
.lb-face-book .lb-rate.on-cover, .lb-ex-book .lb-rate.on-cover { right: auto; left: 8px; }
.lb-fo.tier-5 .lb-b-front { box-shadow: 0 0 0 1.5px #f2cd6a, 0 0 22px rgba(242,205,106,0.55); }
/* hover card: tier word next to the stars, coloured by tier */
.lb-tip-stars em { font-style: normal; font-family: var(--lb-sans); font-size: .76rem; font-weight: 800; letter-spacing: .02em; margin-left: 6px; padding: 2px 8px; border-radius: 999px; vertical-align: 2px; }
.lb-tip-stars.t5 { font-size: 1.15rem; color: #c58a12; }
.lb-tip-stars.t5 em { color: #3b2508; background: #f2cd6a; }
.lb-tip-stars.t4 em { color: #1f2a37; background: #d7dee8; }
.lb-tip-stars.t3 em, .lb-tip-stars.t2 em, .lb-tip-stars.t1 em, .lb-tip-stars.is-none em { color: #fff; background: #4b5563; }

/* ---------- shelf gimmicks (Audi 2026-10-18: "มีกิมมิกที่ชั้นหนังสืออะไรแบบนี้ด้วยไหม") ---------- */
/* 1) a picture light above each shelf, centred on its books: brass bar + warm cone at night, a soft sun streak by day */
.lb-books::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 170px; pointer-events: none; z-index: -1;
    background: linear-gradient(180deg, #e9c98a, #a8803f) 50% 0 / 110px 7px no-repeat, radial-gradient(ellipse 50% 100% at 50% 0%, rgba(255,214,150,0.24), rgba(255,214,150,0) 72%); }
html[data-theme=light] .lb-books::before { background: linear-gradient(180deg, #e9c98a, #a8803f) 50% 0 / 110px 7px no-repeat, linear-gradient(115deg, rgba(255,240,200,0) 30%, rgba(255,240,200,0.7) 45%, rgba(255,240,200,0) 60%); }
.lb-books { position: relative; }
/* 2) the last book on a shelf leans on its neighbour, like a real half-full shelf */
.lb-books > .lb-spine:not(.lb-fo):last-child { margin-left: 8px; margin-right: 26px; }
.lb-books > .lb-spine:not(.lb-fo):last-child .lb-sp { rotate: 7deg; transform-origin: 0 100%; }
/* 3) 🎲 pick one for me: the chosen book wiggles before it slides out */
.lb-pick { min-height: 40px; padding: 6px 14px; border: 0; border-radius: 999px; cursor: pointer; font-family: var(--lb-sans); font-size: .88rem; font-weight: 700;
    color: #2a1c0c; background: linear-gradient(180deg, #f6dc9f, #d5a954); box-shadow: 0 4px 12px rgba(0,0,0,0.25); transition: transform .2s ease; }
.lb-pick:hover { transform: translateY(-1px) rotate(-2deg); }
.lb-pick:focus-visible { outline: 2px solid var(--lb-gold); outline-offset: 3px; }
.lb-spine.is-picked .lb-sp, .lb-face.is-picked .lb-b3, .lb-fo.is-picked .lb-b3 { animation: lbWiggle .9s ease-in-out both; }
@keyframes lbWiggle { 0% { translate: 0 0; } 20% { translate: 0 -14px; rotate: -4deg; } 40% { rotate: 4deg; } 60% { rotate: -3deg; } 80% { rotate: 2deg; } 100% { translate: 0 -20px; rotate: 0deg; } }

/* Genre view: covers face-out on the same floating shelves. */
.lb-case.is-faceout { --row: 236px; }
.lb-fo { width: auto; padding: 0 12px; }
.lb-fo .lb-b3 { --w: 120px; --d: 22px; --ry: -18deg; }
.lb-fo:nth-child(2n) .lb-b3 { --ry: -12deg; }
.lb-fo:hover .lb-b3, .lb-fo:focus-visible .lb-b3 { transform: perspective(1100px) rotateY(-4deg) translateY(-10px); }
.lb-fo.is-out .lb-b3 { opacity: 0; }
.lb-fo .lb-tip { bottom: calc(100% + 4px); }
.lb-fo:focus-visible { outline: 2px solid var(--lb-gold); outline-offset: 4px; }

/* Genre dot on each chip = the sticker colour on the spines (the legend). */
.lb-chip-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--g); box-shadow: 0 0 0 1.5px rgba(255,255,255,0.8); flex: none; }
.lb-chip.is-on .lb-chip-dot { box-shadow: 0 0 0 1.5px #2a1c0c; }

/* Shelf order: a quiet segmented control under the chips. */
.lb-sortbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; margin: -26px auto 44px; }
.lb-sort-label { font-size: .85rem; font-weight: 600; color: var(--lb-sub); margin-right: 4px; }
.lb-sort { min-height: 40px; padding: 6px 14px; border: 0; border-radius: 999px; cursor: pointer; font-family: var(--lb-sans); font-size: .88rem; font-weight: 600;
    color: var(--lb-ink); background: transparent; box-shadow: inset 0 0 0 1px var(--lb-chip-line); transition: background .2s ease, box-shadow .2s ease; }
.lb-sort:hover { box-shadow: inset 0 0 0 1px var(--lb-gold); }
.lb-sort.is-on { background: var(--lb-chip); box-shadow: inset 0 0 0 1.5px var(--lb-gold); }
.lb-sort:focus-visible, .lb-clear:focus-visible { outline: 2px solid var(--lb-gold); outline-offset: 2px; }
.lb-showing { flex-basis: 100%; text-align: center; font-size: .9rem; color: var(--lb-sub); }
.lb-clear { min-height: 32px; padding: 0 4px; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700; color: var(--lb-ink); text-decoration: underline; text-underline-offset: 3px; }
.lb-empty { text-align: center; color: var(--lb-sub); margin: 30px 0; }

/* First view: books rise into place one after another. */
#libraryView.is-enter .lb-sp, #libraryView.is-enter .lb-face, #libraryView.is-enter .lb-exhibit { animation: lbRise .75s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 32ms); }
@keyframes lbRise { from { translate: 0 60px; opacity: 0; } to { translate: 0 0; opacity: 1; } }

/* ---------- pulled-out book ---------- */
.lb-pull { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 20px; background: rgba(12,10,8,0.84); font-family: var(--lb-sans); color: #f7efe0; }
.lb-pull { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html[data-theme=light] .lb-pull { background: rgba(24,18,12,0.86); color: #f7efe0; }
.lb-pull-card { display: grid; grid-template-columns: auto minmax(0, 380px); gap: 52px; align-items: center; max-width: 860px; }
.lb-3d { perspective: 1300px; }
.lb-3d-book { position: relative; width: 240px; aspect-ratio: 2 / 3; transform-style: preserve-3d; transform: rotateY(-28deg) rotateX(4deg); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.lb-3d-book:hover { transform: rotateY(-10deg) rotateX(2deg); }
.lb-3d-front { position: absolute; inset: 0; transform: translateZ(19px); border-radius: 2px 7px 7px 2px; overflow: hidden; background: #3a2a1a;
    box-shadow: 0 30px 50px rgba(0,0,0,0.6), 0 0 60px rgba(255,200,120,0.12); }
.lb-3d-front::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(255,255,255,0.18) 3%, rgba(255,255,255,0) 8%), linear-gradient(115deg, rgba(255,255,255,0.2), rgba(255,255,255,0) 45%); }
.lb-3d-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-3d-spine { position: absolute; top: 0; bottom: 0; left: 0; width: 38px; transform-origin: left; transform: rotateY(-90deg) translateX(-19px);
    background: linear-gradient(90deg, rgba(0,0,0,0.5), rgba(255,255,255,0.2) 14%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4)), linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), var(--sp-img, none) 14% 50% / cover no-repeat, var(--sp-bg);
    color: var(--sp-fg); display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 3px 0 0 3px; }
.lb-3d-spine span { writing-mode: vertical-rl; font-family: var(--lb-serif); font-size: .8rem; font-weight: 600; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.lb-3d-pages { position: absolute; top: 4px; bottom: 4px; right: 0; width: 36px; transform-origin: right; transform: rotateY(90deg) translateX(18px);
    background: linear-gradient(90deg, rgba(0,0,0,0.25), rgba(0,0,0,0) 30%, rgba(255,255,255,0.25) 55%, rgba(0,0,0,0.15)), repeating-linear-gradient(90deg, #f7efdc 0 1px, #e3d5b8 1px 2px); }
.lb-pull-genre { margin: 0 0 8px; font-size: .9rem; font-weight: 700; letter-spacing: .04em; color: #e8c47c; }
.lb-pull-info h3 { margin: 0 0 12px; font-family: var(--lb-serif); font-weight: 600; font-variation-settings: 'opsz' 120; font-size: 2.5rem; line-height: 1.1; letter-spacing: -.01em; color: #fff6e4; }
.lb-pull-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 4px 0 18px; }
.lb-pull-rating { display: inline-flex; align-items: center; gap: 10px; }
.lb-pull-stars { font-size: 1.7rem; line-height: 1; letter-spacing: .04em; color: #f2c14e; text-shadow: 0 0 14px rgba(242,193,78,0.55); }
.lb-pull-stars i { font-style: normal; color: rgba(255,255,255,0.22); text-shadow: none; }
.lb-pull-rating em { font-style: normal; padding: 4px 11px; border-radius: 999px; font-size: .82rem; font-weight: 800; color: #fff; background: #4b5563; }
.lb-pull-rating.t5 em { color: #3b2508; background: linear-gradient(180deg, #fff1bf, #f2cd6a 50%, #c9962f); box-shadow: 0 0 14px rgba(242,205,106,0.5); }
.lb-pull-rating.t4 em { color: #1f2a37; background: linear-gradient(180deg, #ffffff, #d7dee8 55%, #a9b4c2); }
.lb-pull-rating.t4 .lb-pull-stars, .lb-pull-rating.t3 .lb-pull-stars { text-shadow: none; }
.lb-pull-rating.is-none em { color: #ece0c8; background: rgba(255,255,255,0.1); font-weight: 700; }
.lb-pull-status { padding: 4px 11px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: #ece0c8; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.lb-pull-status.is-done { color: #b9f0d4; box-shadow: inset 0 0 0 1px rgba(110,220,170,0.5); }
.lb-pull-status.is-reading { color: #bfe0ff; box-shadow: inset 0 0 0 1px rgba(120,180,255,0.5); }
.lb-pull-status.is-paused { color: #fbe3a6; box-shadow: inset 0 0 0 1px rgba(251,227,166,0.5); }
.lb-pull-text { margin: 0 0 24px; font-family: var(--lb-serif); font-size: 1.12rem; line-height: 1.65; color: #ece0c8; }
.lb-pull-info { border-left: 1px solid rgba(232,196,124,0.35); padding-left: 28px; }
.lb-pull-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lb-pull .lb-btn { color: #f7efe0; background: rgba(255,244,222,0.08); border-color: rgba(232,196,124,0.4); }
.lb-pull .lb-btn.is-solid { color: #2a1c0c; background: linear-gradient(180deg, #f3d897, #d4a653); }

body.theme-library .modal-content { background: #20150d; border-color: #4a3220; }
body.theme-library .modal-tag { color: #2a1a0e; background: #e8c47c; }

/* The shared rating rings (personal-tier.css) are drawn for flat cards; on a book they show as a box floating
   around it. Here the rating lives on the book itself: gilt page edges + gold bands for 5 stars, stars on the spine. */
#libraryView [data-tier]:not(.ptier-sm) { box-shadow: none !important; animation: none !important; }
#libraryView .ptier-shine { display: none; }

html[data-motion=paused] #libraryView *, body.paused #libraryView * { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    .lb-sp, .lb-b3, .lb-3d-book, .lb-btn, .lb-chip { transition: none; }
    #libraryView *, .lb-lamp i { animation: none !important; }
}
@media (max-width: 760px) {
    .lb-top { grid-template-columns: 1fr auto; padding-top: 24px; }
    .lb-title { grid-column: 1 / -1; grid-row: 1; }
    .lb-top > .lb-back, .lb-top-r { grid-row: 2; }
    .lb-px { width: 34px; height: 30px; }
    .lb-title h2 { gap: 10px; }
    .lb-stats span { font-size: .82rem; padding: 4px 10px; }
    .lb-chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; margin-bottom: 30px; padding: 4px 2px 10px; }
    .lb-chips::-webkit-scrollbar { display: none; }
    .lb-chip { flex: 0 0 auto; font-size: .9rem; }
    .lb-case { --row: 200px; padding: 0; }
    .lb-books { padding: 0 8px; }
    .lb-spine-title { font-size: .74rem; }
    .lb-label { width: min(22px, calc(100% - 6px)); font-size: .64rem; bottom: 8px; }
    .lb-sortbar { margin: -18px 0 34px; justify-content: flex-start; }
    .lb-sort-label { flex-basis: 100%; }
    .lb-sort { padding: 6px 11px; font-size: .84rem; }
    .lb-face .lb-b3 { --w: 104px; --d: 20px; }
    /* Phones: every book being read stays on the one desk, swipe sideways for more. */
    .lb-desk-books { flex-wrap: nowrap; overflow-x: auto; gap: 30px; padding: 22px 18px 0; scrollbar-width: none; }
    .lb-desk-books::-webkit-scrollbar { display: none; }
    .lb-desk-books { background: linear-gradient(180deg, var(--oak-lip) 0 3px, var(--oak-1) 3px, var(--oak-2) 60%, var(--oak-3)) left bottom / 100% 32px no-repeat local; border-radius: 0 0 10px 10px; }
    .lb-face { flex: 0 0 auto; padding-bottom: 32px; }
    .lb-face-tag { bottom: 4px; }
    .lb-desk { padding-bottom: 0; }
    .lb-desk-top { display: none; }
    .lb-pull-card { grid-template-columns: 1fr; gap: 24px; justify-items: center; text-align: center; }
    .lb-3d-book { width: 170px; }
    .lb-pull-actions { justify-content: center; }
    .lb-pull-info { border-left: 0; padding-left: 0; }
    .lb-pull-info h3 { font-size: 1.9rem; }
    .lb-head { flex-wrap: wrap; gap: 4px 10px; }
    .lb-head-rule { display: none; }
    .lb-head-sub { flex-basis: 100%; padding-left: 2.1rem; }
    /* Phones: all masterpieces fit on one plinth (up to 3 side by side, more wrap to a second row). */
    .lb-hall-case { gap: 64px 12px; padding: 50px 6px 96px; }
    .lb-hall-case .lb-plinth { bottom: 62px; }
    .lb-exhibit { flex: 0 0 104px; width: 104px; }
    .lb-exhibit .lb-b3 { --w: 84px; --d: 18px; }
    .lb-spot { width: 170px; height: 240px; top: -50px; }
    .lb-exhibit .lb-nameplate { width: 108px; margin-top: 40px; }
    .lb-nameplate b { font-size: .84rem; }
    .lb-nameplate i { font-size: .62rem; letter-spacing: .1em; }
    .lb-swipe { display: block; }
    .lb-case.is-faceout { --row: 180px; }
    .lb-fo { padding: 0 7px; }
    .lb-fo .lb-b3 { --w: 88px; --d: 16px; }
    /* 4+ masterpieces: one row on the plinth that swipes, never a 4th book dropped onto the nameplates */
    .lb-hall-case.is-many { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
    .lb-hall-case.is-many::-webkit-scrollbar { display: none; }
    /* genre chips scroll sideways: fade the right edge so it reads as "more this way" */
    .lb-chips { -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); padding-right: 40px; }
    .lb-desk-books { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
}