/* search bar */
.search-bar {
  display:flex;
  justify-content:center;
  margin:1.3rem 0 2rem;
}
.search-bar input {
  max-width:520px;
  width:100%;
  padding:.7rem 1rem;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.15);
  font-size:1rem;
}

.bookshelf-wrapper {
  max-width:1000px;
  margin:0 auto 3rem;
}

/* single suspended shelf */
.shelf-scroll {
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  height:260px;
}

/* wooden board at bottom */
.shelf-scroll::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:14px;
  background:#7b4a1f;
  box-shadow:0 -3px 0 #5a3414;
  z-index:0;
}

/* books sit on shelf (bottom aligned) */
.shelf-inner {
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  align-items:flex-end;
  gap:.4rem;                /* closer together */
  padding:0 1.5rem 14px;    /* 14px so bases touch the board */
}

/* book spine */
.book-spine {
  position:relative;
  padding:.45rem .35rem;
  border-radius:12px;
  color:#111827;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  border:2px solid rgba(255,255,255,0.7);
  box-shadow:0 4px 12px rgba(15,23,42,0.35);
  cursor:pointer;
  background:#f97373;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s ease, box-shadow .15s ease;
}

.book-spine span {
  display:block;
  text-align:center;
  white-space:nowrap;
  letter-spacing:0.05em;
}

.book-spine:hover {
  transform:translateY(-6px);
  box-shadow:0 10px 22px rgba(15,23,42,0.45);
}

/* tooltip below cursor */
.book-tooltip {
  position:fixed;
  max-width:260px;
  background:rgba(255,255,255,0.97);
  padding:.7rem .9rem;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(15,23,42,0.25);
  border:1px solid rgba(0,0,0,0.05);
  pointer-events:none;
  z-index:50;
}

.book-tooltip-title {
  font-weight:700;
  margin-bottom:.15rem;
}

.book-tooltip-meta {
  color:var(--muted);
  font-size:.84rem;
}

.book-tooltip-notes {
  margin-top:.3rem;
  font-size:.82rem;
  line-height:1.35;
  color:var(--muted);
}

/* empty message */
.bookshelf-empty {
  text-align:center;
  color:var(--muted);
  margin-top:1rem;
}