/* =============================================================================
   98Novels bookshelf: "Add to shelf" button and the wooden-plank bookcase
   ========================================================================== */

/* ---------- Add to shelf button (story page) ---------- */
.n98-shelf-add{position:relative;display:inline-block;margin-top:.6rem}
.n98-shelf-add[hidden]{display:none}
.n98-shelf-add__btn{display:inline-flex;align-items:center;gap:.5rem}
.n98-shelf-add__ico{display:inline-block;width:.8em;height:1.05em;border-radius:2px 2px 0 0;
  background:currentColor;opacity:.75;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%)}
.n98-shelf-add.is-on .n98-shelf-add__ico{background:var(--n98-red,#d6453a);opacity:1}
.n98-shelf-add__menu{position:absolute;z-index:40;left:0;top:calc(100% + .5rem);min-width:240px;max-width:min(92vw,320px);
  padding:.45rem;border-radius:14px;background:var(--card-bg-color,#fff);text-align:left}
.n98-shelf-add__menu[hidden]{display:none}
:root[data-mode=light] .n98-shelf-add__menu{box-shadow:0 0 0 2px var(--n98-charcoal),4px 5px 0 1px var(--n98-mint),12px 18px 24px -14px rgba(35,43,46,.45)}
:root:not([data-mode=light]) .n98-shelf-add__menu{box-shadow:0 0 0 1px var(--n98-edge),0 18px 32px -14px rgba(0,0,0,.8)}
.n98-shelf-add__item{display:flex;align-items:center;gap:.6rem;width:100%;padding:.55rem .65rem;border:0;border-radius:10px;
  background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.n98-shelf-add__item:is(:hover,:focus-visible){background:color-mix(in srgb,var(--n98-mint,#c6e0da) 45%,transparent)}
.n98-shelf-add__check{display:inline-grid;place-items:center;flex:none;width:1.25rem;height:1.25rem;border-radius:6px;
  font-size:.85rem;font-weight:700;line-height:1;box-shadow:inset 0 0 0 1.5px currentColor}
.n98-shelf-add__item.is-checked .n98-shelf-add__check{background:var(--n98-red,#d6453a);color:#fff;box-shadow:none}
.n98-shelf-add__open{display:block;margin:.3rem .65rem .2rem;font-size:.9rem}
.n98-shelf-add__note{margin:.4rem .65rem .3rem;font-size:.82rem;line-height:1.4;opacity:.85}

/* ---------- Bookshelf page: interactive covers ---------- */
.n98-shelf{max-width:1040px;margin:1.5rem auto 2.5rem}

.n98-shelf__banner{margin:0 0 1rem;padding:.7rem 1rem;border-radius:14px;font-size:.92rem;line-height:1.5;
  background:color-mix(in srgb,var(--n98-peach,#fec5b4) 40%,transparent)}
.n98-shelf__banner[hidden]{display:none}
.n98-shelf__import{margin-left:.5rem}

.n98-shelf__bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .8rem;margin:0 0 1rem}
.n98-shelf__search{flex:1 1 220px;display:block}
.n98-shelf__search input,.n98-shelf__sort{min-height:42px;box-sizing:border-box;font:inherit}
.n98-shelf__search input{width:100%;padding:.45rem .9rem}
.n98-shelf__sort{padding:.4rem .8rem}
.n98-shelf__summary{margin-left:auto;font-size:.88rem;opacity:.75}

.n98-shelf__tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .4rem}
.n98-shelf__tab{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .95rem;border:0;border-radius:999px;
  font-family:var(--ff-heading);font-weight:500;font-size:.95rem;color:inherit;cursor:pointer;
  background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.85;
  transition:background-color .16s ease,opacity .16s ease,transform .16s ease}
.n98-shelf__tab:is(:hover,:focus-visible){opacity:1;background:color-mix(in srgb,var(--n98-mint,#c6e0da) 40%,transparent)}
.n98-shelf__tab.is-active{opacity:1;background:var(--n98-red,#d6453a);color:#fff;box-shadow:none}
.n98-shelf__tab.is-drop{opacity:1;transform:scale(1.08);background:color-mix(in srgb,var(--n98-peach,#fec5b4) 70%,transparent);
  box-shadow:0 0 0 2px var(--n98-strong,#b23724)}
.n98-shelf__tabs.is-dragging .n98-shelf__tab:not(.is-active){animation:n98-tab-nudge 1s ease-in-out infinite}
@keyframes n98-tab-nudge{50%{transform:translateY(-3px)}}
.n98-shelf__count{display:inline-block;min-width:1.5em;padding:0 .4em;border-radius:999px;font-size:.78rem;text-align:center;background:rgba(255,255,255,.28)}
.n98-shelf__tab:not(.is-active) .n98-shelf__count{background:color-mix(in srgb,var(--n98-mint,#c6e0da) 55%,transparent)}
.n98-shelf__hint{margin:.2rem 0 1.4rem;font-size:.82rem;opacity:.6}
@media (hover:none){.n98-shelf__hint{display:none}}

/* The grid: every cover sits on a thin ledge */
.n98-shelf__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.9rem 1.2rem;margin:0;padding:0;list-style:none}
.n98-card{position:relative;margin:0;min-width:0;padding-bottom:.2rem}
.n98-card::after{content:"";position:absolute;left:-.6rem;right:-.6rem;bottom:-.75rem;height:6px;border-radius:99px;
  background:var(--n98-edge);box-shadow:0 6px 8px -6px rgba(35,43,46,.35)}
.n98-card.is-new{animation:n98-card-in .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 40ms)}
@keyframes n98-card-in{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
.n98-card.is-dragging{opacity:.4}

.n98-card__media{--rx:0deg;--ry:0deg;position:relative;transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .18s ease-out,filter .18s ease-out;will-change:transform}
@media (hover:hover){.n98-card:hover .n98-card__media{transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px) scale(1.03)}}
.n98-card__face{position:relative;display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.n98-card__img{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border-radius:12px;background:var(--n98-track)}
:root[data-mode=light] .n98-card__img{box-shadow:0 0 0 2px var(--n98-charcoal),3px 5px 0 1px var(--n98-mint),10px 16px 18px -12px rgba(35,43,46,.45)}
:root:not([data-mode=light]) .n98-card__img{box-shadow:0 0 0 1px var(--n98-edge),0 16px 24px -14px rgba(0,0,0,.85)}
.n98-card__img img{display:block;width:100%;height:100%;object-fit:cover;user-select:none}
.n98-card__img.is-blank{display:grid;place-items:center;font-family:var(--ff-heading);font-weight:600;font-size:2.6rem;color:var(--n98-ink);
  background:linear-gradient(160deg,var(--n98-mint),var(--n98-peach))}

.n98-card__status{position:absolute;top:.5rem;left:.5rem;z-index:2;padding:.12em .6em;border-radius:999px;font-size:.68rem;font-weight:700;
  letter-spacing:.02em;color:var(--n98-ink);background:color-mix(in srgb,#fff 82%,transparent);backdrop-filter:blur(4px)}
.n98-card__status.is-completed{background:var(--n98-mint)}
.n98-card__status.is-ongoing{background:var(--n98-peach)}
.n98-card__status.is-static{position:static;display:inline-block;margin:.2rem 0 0}

.n98-card__actions{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;
  padding:2.4rem .5rem .5rem;border-radius:0 0 12px 12px;pointer-events:none;opacity:0;transform:translateY(8px);
  background:linear-gradient(0deg,rgba(18,24,26,.94),rgba(18,24,26,.55) 60%,transparent);
  transition:opacity .18s ease,transform .18s ease}
.n98-card:is(:hover,:focus-within) .n98-card__actions{opacity:1;transform:none;pointer-events:auto}
@media (hover:none){.n98-card__actions{display:none}}
.n98-card__read,.n98-card__move,.n98-card__rm{display:inline-block;padding:.22em .65em;border:0;border-radius:999px;font:inherit;font-size:.7rem;font-weight:600;
  line-height:1.3;text-decoration:none;cursor:pointer;color:#fff;background:rgba(255,255,255,.18);transition:background-color .15s ease,transform .15s ease}
.n98-card__read{background:var(--n98-red,#d6453a)}
.n98-card__read:is(:hover,:focus-visible){background:var(--n98-strong,#b23724);color:#fff}
.n98-card__move:is(:hover,:focus-visible){background:rgba(255,255,255,.38)}
.n98-card__rm{margin-left:auto;padding:.1em .55em;font-size:.95rem}
.n98-card__rm:is(:hover,:focus-visible){background:var(--n98-red,#d6453a)}
.n98-card__read:active,.n98-card__move:active,.n98-card__rm:active{transform:scale(.94)}

.n98-card__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:.65rem;
  font-family:var(--ff-heading);font-weight:500;font-size:.88rem;line-height:1.25;text-decoration:none;transition:color .15s ease}
.n98-card__title:is(:hover,:focus-visible){color:var(--n98-strong)}

/* Quick view */
.n98-shelf__dialog{width:min(92vw,580px);padding:0;border:0;border-radius:22px;background:var(--card-bg-color,#fff);color:inherit;overflow:visible}
.n98-shelf__dialog::backdrop{background:rgba(18,24,26,.55);backdrop-filter:blur(3px)}
.n98-shelf__dialog[open]{animation:n98-dialog-in .28s cubic-bezier(.2,.8,.2,1)}
@keyframes n98-dialog-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
:root[data-mode=light] .n98-shelf__dialog{box-shadow:0 0 0 2px var(--n98-charcoal),6px 8px 0 1px var(--n98-mint),18px 28px 40px -18px rgba(35,43,46,.55)}
:root:not([data-mode=light]) .n98-shelf__dialog{box-shadow:0 0 0 1px var(--n98-edge),0 30px 60px -20px rgba(0,0,0,.9)}
.n98-shelf__close{position:absolute;top:-12px;right:-12px;z-index:2;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;
  font-size:1.3rem;line-height:1;color:#fff;background:var(--n98-red,#d6453a);cursor:pointer;box-shadow:0 0 0 2px var(--card-bg-color,#fff)}
.n98-shelf__dialog-inner{display:grid;grid-template-columns:150px minmax(0,1fr);gap:1.4rem;padding:1.5rem}
.n98-shelf__dialog-cover{aspect-ratio:3/4;overflow:hidden;border-radius:12px;background:var(--n98-track)}
.n98-shelf__dialog-cover img{display:block;width:100%;height:100%;object-fit:cover}
.n98-shelf__dialog-cover.is-blank{display:grid;place-items:center;font-family:var(--ff-heading);font-weight:600;font-size:3rem;color:var(--n98-ink);
  background:linear-gradient(160deg,var(--n98-mint),var(--n98-peach))}
.n98-shelf__dialog-title{margin:0;font-family:var(--ff-heading);font-weight:600;font-size:1.35rem;line-height:1.2;overflow-wrap:anywhere}
.n98-shelf__dialog-label{margin:1rem 0 .4rem;font-size:.82rem;font-weight:600;opacity:.7}
.n98-shelf__checks{display:flex;flex-wrap:wrap;gap:.45rem}
.n98-shelf__check{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem .35rem .45rem;border:0;border-radius:999px;font:inherit;font-size:.85rem;
  color:inherit;cursor:pointer;background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;transition:background-color .15s ease,transform .15s ease}
.n98-shelf__check:hover{background:color-mix(in srgb,var(--n98-mint) 40%,transparent)}
.n98-shelf__check:active{transform:scale(.95)}
.n98-shelf__check.is-on{background:var(--n98-red,#d6453a);color:#fff;box-shadow:none}
.n98-shelf__tick{display:inline-grid;place-items:center;width:1.1rem;height:1.1rem;border-radius:50%;font-size:.7rem;font-weight:700;background:rgba(255,255,255,.28)}
.n98-shelf__check:not(.is-on) .n98-shelf__tick{background:color-mix(in srgb,var(--n98-mint) 55%,transparent)}
.n98-shelf__open{display:inline-block;margin-top:1.2rem}

/* Undo toast */
.n98-shelf__toast{position:fixed;left:50%;bottom:1.2rem;z-index:60;display:flex;align-items:center;gap:.9rem;max-width:92vw;padding:.65rem 1rem;border-radius:999px;
  font-size:.9rem;color:#fff;background:var(--n98-charcoal,#232b2e);box-shadow:0 12px 28px -10px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transform:translate(-50%,16px);transition:opacity .2s ease,transform .2s ease}
.n98-shelf__toast.is-show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
:root:not([data-mode=light]) .n98-shelf__toast{background:var(--bg-800,#1b2427);box-shadow:0 0 0 1px var(--n98-edge),0 12px 28px -10px rgba(0,0,0,.8)}
.n98-shelf__undo{padding:.15em .7em;border:0;border-radius:999px;font:inherit;font-size:.82rem;font-weight:700;color:var(--n98-ink);background:var(--n98-peach);cursor:pointer}
.n98-shelf__undo[hidden]{display:none}

@media (max-width:600px){
  .n98-shelf__grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:1.6rem .8rem}
  .n98-shelf__summary{margin-left:0;flex-basis:100%}
  .n98-shelf__dialog-inner{grid-template-columns:96px minmax(0,1fr);gap:1rem;padding:1.2rem}
  .n98-shelf__dialog-title{font-size:1.15rem}
}
@media (prefers-reduced-motion:reduce){
  .n98-card__media,.n98-card__actions,.n98-shelf__tab,.n98-shelf__toast{transition:none}
  .n98-card.is-new,.n98-shelf__dialog[open],.n98-shelf__tabs.is-dragging .n98-shelf__tab{animation:none}
  .n98-card:hover .n98-card__media{transform:none}
}