.bookshelf-block{margin:2rem auto;max-width:940px;padding:1.5rem;border-radius:12px;background:linear-gradient(145deg,#2d1d0f 0%,#1b120a 60%,#120c07 100%);border:1px solid #462d1499;box-shadow:0 0 35px #0009 inset 0 2px 4px #ffffff0d inset 0 -4px 8px #000c;position:relative;color:#f9f5ef;transition:background .4s ease,box-shadow .4s ease,filter .4s ease} .bookshelf-block::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:3px;background:linear-gradient(145deg,#ffffff0d,#000000b3 90%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .bookshelf-block::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12px 12px,#d4af37 0%,#a37e2c 40%,#5c4820 80%,transparent 100%) top left,radial-gradient(circle at calc(100% - 12px) 12px,#d4af37 0%,#a37e2c 40%,#5c4820 80%,transparent 100%) top right,radial-gradient(circle at 12px calc(100% - 12px),#d4af37 0%,#a37e2c 40%,#5c4820 80%,transparent 100%) bottom left,radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),#d4af37 0%,#a37e2c 40%,#5c4820 80%,transparent 100%) bottom right;background-repeat:no-repeat;background-size:16px 16px;filter:drop-shadow(0 1px 1px #0009);z-index:3} .bookshelf{display:flex;align-items:flex-end;gap:.5rem;padding:1.5rem;overflow-x:auto;position:relative;border-radius:8px;background:linear-gradient(to bottom,#5c3e23 0%,#3c2817 50%,#2b1c10 100%);scrollbar-width:thin;transition:background .4s ease,box-shadow .4s ease} .bookshelf::-webkit-scrollbar{height:6px} .bookshelf::-webkit-scrollbar-thumb{background:#9a7a52;border-radius:3px} .bookshelf::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:8px 8px 0 0;background:linear-gradient(to bottom,#ffffff26,transparent)} .bookshelf::after{content:"";position:absolute;bottom:0;left:0;right:0;height:10px;background:linear-gradient(to bottom,#0000004d,transparent);border-radius:0 0 8px 8px} .book-spine{position:relative;display:flex;flex-direction:column;justify-content:space-between;writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);background:linear-gradient(to bottom,color-mix(in srgb,var(--band-color),#fff 10%) 0%,var(--band-color) 100%);border-radius:4px;padding:.4rem;font-weight:600;color:#f8f3e8;text-shadow:0 1px 1px #0006;cursor:pointer;box-shadow:inset 0 0 3px #ffffff40 1px 1px 2px #0006;transition:transform .25s ease,filter .25s ease,background .4s ease} .book-spine::before,.book-spine::after{content:"";position:absolute;left:0;right:0;height:6px;border-radius:3px;opacity:.85;background:linear-gradient(to right,#fff3 0%,#fff9 30%,#fff3 100%)} .book-spine::before{top:6px} .book-spine::after{bottom:6px} .book-spine:hover{transform:rotate(180deg) translateY(-6px);filter:brightness(1.25)} .book-label{font-size:.8rem;font-weight:600;color:#111;padding:.25rem 0;letter-spacing:.04em;mix-blend-mode:multiply;text-shadow:0 1px 1px #ffffff4d} @keyframes shelfHighlight { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.4) saturate(1.2)} } .book-spine.featured{animation:shelfHighlight 4s ease-in-out infinite;animation-delay:calc(var(--hue) * 1ms)} .bookshelf-block.compact .bookshelf{padding:1rem;gap:.35rem} .bookshelf-block.compact .book-spine{width:clamp(10px,2vw,16px);font-size:.7rem} body:not(.night) .bookshelf-block{background:linear-gradient(145deg,#f8e9d2 0%,#e6cfaa 50%,#d7b88b 100%);border:1px solid #a0825a59;box-shadow:0 0 10px #0000001a inset 0 1px 2px #ffffff80 inset 0 -2px 4px #0000000d;color:#3a2a15} body:not(.night) .bookshelf-block::before{background:linear-gradient(145deg,#fff6,#0000001a 90%)} body:not(.night) .bookshelf{background:linear-gradient(to bottom,#ecd2a3 0%,#d9b782 50%,#cba36b 100%);box-shadow:inset 0 1px 2px #fff6} body:not(.night) .bookshelf::-webkit-scrollbar-thumb{background:#c49a60} body:not(.night) .bookshelf::before{background:linear-gradient(to bottom,#ffffff80,transparent)} body:not(.night) .bookshelf::after{background:linear-gradient(to bottom,#00000014,transparent)} body:not(.night) .book-spine{color:#1a0f05;text-shadow:0 1px 0 #fff6;box-shadow:inset 0 0 2px #0000001a 1px 1px 2px #00000040} body:not(.night) .book-spine:hover{filter:brightness(1.1) saturate(1.15)} body:not(.night) .book-label{color:#000;mix-blend-mode:normal;text-shadow:0 1px 0 #fff9} body:not(.night) .bookshelf-block::after{filter:drop-shadow(0 1px 1px #0000004d)} @media (max-width:768px) {.bookshelf-block{padding:1rem 1rem 1.25rem;border-radius:10px}} @media (max-width:480px) {.bookshelf-block{padding:.75rem .75rem 1rem;border-radius:8px}}