/* =============================================================================
   98Novels story page: Continue + Shelf bar
   Desktop: a button row under the author. Phones (700px and below): fixed bottom bar.
   All colors are theme tokens, so brightness, saturation and hue settings apply.
   ========================================================================== */

.n98-storybar{display:flex;flex-wrap:wrap;gap:.65rem;align-items:stretch;margin:.85rem 0 0}
.n98-storybar>*{margin:0}
.n98-storybar:not(:has(>:not([hidden]))){display:none}
.n98-storybar .n98-story-continue,.n98-storybar .n98-shelf-add{display:flex;margin:0}
.n98-storybar .n98-story-continue[hidden],.n98-storybar .n98-shelf-add[hidden]{display:none}

/* ---- Continue button: play circle, label, chapter name, progress along the bottom edge ---- */
.n98-go{
  position:relative;display:inline-flex;align-items:center;gap:.7rem;min-height:3.2rem;max-width:100%;
  padding:.45rem 1.2rem .45rem .55rem;border-radius:16px;overflow:hidden;text-decoration:none;
  background:var(--button-primary-background,var(--n98-red));color:var(--button-primary-color,#fff);
  border:2px solid var(--n98-ink);box-shadow:0 4px 0 var(--n98-ink);
  font-family:var(--ff-heading);line-height:1.15;
  transition:transform .12s ease,box-shadow .12s ease,background-color .15s ease;
}
.n98-go:is(:hover,:focus-visible){
  background:var(--button-primary-background-hover,var(--n98-charcoal));color:var(--button-primary-color-hover,#fff);
  transform:translateY(2px);box-shadow:0 2px 0 var(--n98-ink);
}
.n98-go:active{transform:translateY(4px);box-shadow:0 0 0 var(--n98-ink)}
.n98-go__play{flex:none;display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;background:color-mix(in srgb,currentColor 24%,transparent)}
.n98-go__play::before{content:"";margin-left:3px;border-style:solid;border-width:.4rem 0 .4rem .65rem;border-color:transparent transparent transparent currentColor}
.n98-go__text{display:flex;flex-direction:column;min-width:0}
.n98-go__label{font-weight:700;font-size:1.08rem;white-space:nowrap}
.n98-go__sub{font-size:.8rem;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(26ch,52vw)}
.n98-go__bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:color-mix(in srgb,#000 24%,transparent)}
.n98-go__fill{display:block;height:100%;background:var(--n98-peach)}

/* Outlined look */
.n98-story--btn-outline .n98-go{background:var(--card-bg-color);color:var(--fg-100)}
.n98-story--btn-outline .n98-go:is(:hover,:focus-visible){background:color-mix(in srgb,var(--n98-mint) 45%,var(--card-bg-color));color:var(--fg-100)}
.n98-story--btn-outline .n98-go__play{background:var(--n98-strong);color:#fff}
.n98-story--btn-outline .n98-go__fill{background:var(--n98-strong)}
.n98-story--btn-outline .n98-go__bar{background:var(--n98-track)}

/* ---- Shelf button ---- */
.n98-storybar .n98-shelf-add .n98-shelf-add__btn{
  min-height:3.2rem;padding:.45rem 1.05rem;border-radius:16px;gap:.5rem;font-family:var(--ff-heading);font-weight:600;font-size:1rem;
  background:color-mix(in srgb,var(--n98-mint) 35%,var(--card-bg-color));color:var(--fg-100);
  border:2px solid var(--n98-ink);box-shadow:0 4px 0 var(--n98-ink);
  transition:transform .12s ease,box-shadow .12s ease,background-color .15s ease;
}
.n98-storybar .n98-shelf-add .n98-shelf-add__btn:is(:hover,:focus-visible),
.n98-storybar .n98-shelf-add .n98-shelf-add__btn[aria-expanded=true]{
  background:color-mix(in srgb,var(--n98-mint) 60%,var(--card-bg-color));color:var(--fg-100);transform:translateY(2px);box-shadow:0 2px 0 var(--n98-ink);
}
.n98-storybar .n98-shelf-add__btn::after{content:"";flex:none;border:.3rem solid transparent;border-top-color:currentColor;border-bottom:0;margin-left:.1rem}

/* Hide the views line if switched off */
.n98-story--no-views .n98-story-views{display:none}

/* ---- Phones: fixed bottom bar ---- */
@media (max-width:700px){
  .n98-story--bar-on .n98-storybar{
    position:fixed;left:0;right:0;bottom:0;z-index:900;margin:0;flex-wrap:nowrap;gap:.6rem;
    padding:.65rem .8rem calc(.65rem + env(safe-area-inset-bottom,0px));
    background:var(--card-bg-color);
  }
  :root[data-mode=light] .n98-story--bar-on .n98-storybar{border-top:2px solid var(--n98-ink);box-shadow:0 -10px 24px -14px rgba(35,43,46,.35)}
  :root:not([data-mode=light]) .n98-story--bar-on .n98-storybar{border-top:1px solid var(--n98-edge);box-shadow:0 -12px 28px -14px rgba(0,0,0,.7)}
  .n98-story--bar-on.n98-story--bar-glass .n98-storybar{
    background:color-mix(in srgb,var(--card-bg-color) 80%,transparent);
    -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  }
  .n98-story--bar-on .n98-storybar .n98-story-continue{flex:1 1 auto;min-width:0}
  .n98-story--bar-on .n98-storybar .n98-go{width:100%;min-width:0}
  .n98-story--bar-on .n98-storybar .n98-shelf-add{flex:0 0 auto}
  .n98-story--bar-on .n98-storybar .n98-shelf-add__menu{top:auto;bottom:calc(100% + .9rem);left:auto;right:0}

  /* "Add to shelf" is long for a phone bar: show "Shelf" */
  .n98-story--short-shelf .n98-storybar .n98-shelf-add__label{font-size:0}
  .n98-story--short-shelf .n98-storybar .n98-shelf-add__label::after{content:"Shelf";font-size:1rem}

  /* Keep the end of the page clear of the bar */
  .n98-story--bar-on .footer{padding-bottom:5.5rem}

  /* Without the bar: buttons share the row */
  .n98-story--bar-off .n98-storybar{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .n98-go,.n98-storybar .n98-shelf-add .n98-shelf-add__btn{transition:none}
  .n98-go:is(:hover,:focus-visible,:active){transform:none}
}