/* =======================================================================
   Novel88 v3 — "Reader's Study" palette, modern soft-card app shell
   Rounded cards, a floating pill tab bar, and a calmer typographic
   hierarchy: serif reserved for display moments (brand, hero, chapter
   headers), clean bold sans for dense grids and lists.
   ======================================================================= */

:root{
  --bg:            #EFE4CC;
  --surface:       #F7F0DC;
  --surface-alt:   #EFE2C2;
  --border:        #DCC99B;
  --text:          #2A2015;
  --text-soft:     #6B5A3E;
  --text-faint:    #9C8C6C;
  --accent:        #3C5A40;
  --accent-strong: #4C7350;
  --accent-ink:    #FFFFFF;
  --gold:          #A07F35;
  --danger:        #A6392C;

  --font-heading:  'Iowan Old Style', 'Sitka Text', Georgia, 'Times New Roman', serif;
  --font-body:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius-xs:   8px;
  --radius-sm:   12px;
  --radius:      18px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(42,32,21,0.10);
  --shadow:    0 10px 26px rgba(42,32,21,0.14);
  --shadow-lg: 0 20px 44px rgba(42,32,21,0.22);

  --nav-h:  100px;
  --ease:   200ms cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

html, body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* faint paper grain, site-wide — kept subtle so it reads as texture, not noise */
body{ position: relative; }
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: .2;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.63  0 0 0 0 0.52  0 0 0 0 0.31  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{ color: var(--accent); transition: color var(--ease); }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}

@keyframes nx-fade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes nx-pop{
  from{ opacity: 0; transform: translateY(8px) scale(.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes nx-pop-center{
  from{ opacity: 0; transform: translateX(-50%) translateY(8px) scale(.98); }
  to{ opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes nx-pop-modal{
  from{ opacity: 0; transform: translate(-50%, -50%) translateY(8px) scale(.98); }
  to{ opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------------------- */
/* Masthead — quiet nameplate, scrolls away with the page                */
/* --------------------------------------------------------------------- */

.masthead{
  text-align: center;
  padding: 28px 20px 16px;
}
.masthead-plain{ padding: 22px 20px 16px; border-bottom: 1px solid var(--border); }
.brand{
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -.01em;
  color: var(--text);
  text-decoration: none;
  display: inline-block;
  transition: color var(--ease);
}
.brand:hover{ color: var(--accent); }
.kicker{
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 6px;
}
.rule{ height: 1px; background: var(--border); margin: 0 20px 4px; }

/* --------------------------------------------------------------------- */
/* Page shell                                                             */
/* --------------------------------------------------------------------- */

.nx-page{
  max-width: 640px;
  margin: 0 auto;
  padding: 22px 20px calc(var(--nav-h) + 12px);
}

/* --------------------------------------------------------------------- */
/* Bottom tab bar — floating pill, icon + label                          */
/* --------------------------------------------------------------------- */

.tabbar{
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  height: 64px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  z-index: 500;
}
.tabbar a{
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-faint);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: color var(--ease), background var(--ease);
}
.tabbar a svg{
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform var(--ease);
}
.tabbar a span{ font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.tabbar a:hover{ color: var(--accent); }
.tabbar a:active svg{ transform: scale(.88); }
.tabbar a.is-active{ color: var(--accent-ink); background: var(--accent); }
.tabbar a.is-active svg{ fill: none; stroke: var(--accent-ink); }

/* Reading page: the tabbar tucks into a hidden vertical rail on the right
   edge, clear of the floating prev/contents/next bar docked at the bottom.
   It stays off-screen until pulled out via the edge toggle handle. */
#wrapper.is-reading{ --dock-w: 64px; --dock-gap: 14px; }
#wrapper.is-reading .tabbar{
  left: auto;
  right: var(--dock-gap);
  bottom: auto;
  top: 50%;
  width: var(--dock-w);
  height: auto;
  flex-direction: column;
  padding: 6px;
  transform: translateY(-50%) translateX(120%);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}
#wrapper.is-reading .tabbar.tabbar-open{
  transform: translateY(-50%) translateX(0);
  opacity: .97;
  pointer-events: auto;
}
#wrapper.is-reading .tabbar a{ flex: none; width: 52px; height: 52px; }

/* The toggle handle sits flush against the dock's left edge (no overlap)
   so its own pill shape, background and border stay fully visible instead
   of being mostly hidden behind the dock. */
.tabbar-toggle{ display: none; }
#wrapper.is-reading .tabbar-toggle{
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 52px;
  z-index: 500;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 26px 0 0 26px;
  box-shadow: var(--shadow-lg);
  color: var(--text-soft);
  cursor: pointer;
  transition: right .25s ease, color var(--ease);
}
#wrapper.is-reading .tabbar-toggle:hover{ color: var(--accent); }
#wrapper.is-reading .tabbar-toggle svg{ transition: transform .25s ease; }
#wrapper.is-reading .tabbar-toggle.tabbar-toggle-open{ right: calc(var(--dock-gap) + var(--dock-w)); }
#wrapper.is-reading .tabbar-toggle.tabbar-toggle-open svg{ transform: rotate(180deg); }

/* --------------------------------------------------------------------- */
/* Search — permanent inline bar under the masthead (search/list pages)  */
/* --------------------------------------------------------------------- */

.nx-search-form-wrap{ max-width: 640px; margin: 0 auto; padding: 16px 20px 4px; position: relative; }
.nx-search-form{
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 12px 18px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.nx-search-form:focus-within{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(60,90,64,0.12);
}
.nx-search-form input{
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  min-width: 0;
}
.nx-search-form input::placeholder{ color: var(--text-faint); }
.nx-search-icon{ color: var(--text-faint); width: 15px; height: 15px; flex: none; }

.search_css{
  display: none;
  padding: 10px 4px;
  font-size: 13px;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.search_css:hover{ color: var(--accent); }
#clearHistory{
  color: var(--danger) !important;
  font-weight: 700;
  text-align: right;
  border-bottom: none !important;
}

/* --------------------------------------------------------------------- */
/* Side menu overlay                                                      */
/* --------------------------------------------------------------------- */

#overlay{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(29,22,14,0.82);
  z-index: 700;
  animation: nx-fade var(--ease);
}
#overlay .closeMenu{
  display: flex;
  justify-content: flex-end;
  padding: 20px 20px 0;
}
#overlay .closeMenu svg{ color: var(--surface); opacity: .9; cursor: pointer; transition: opacity var(--ease), transform var(--ease); }
#overlay .closeMenu svg:hover{ opacity: .6; }
#overlay .closeMenu svg:active{ transform: scale(.9); }
.menuTop{ padding-top: 20%; text-align: center; }
.menuTop div{ margin: 0 24px 14px; }
.menuTop a{
  display: block;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-family: var(--font-body);
  transition: border-color var(--ease), color var(--ease), transform var(--ease);
}
.menuTop a:hover{ border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }

/* --------------------------------------------------------------------- */
/* Cover story — hero card, title lives on the page below the art        */
/* --------------------------------------------------------------------- */

.coverstory{ margin-bottom: 30px; }
.coverstory > a{ display: block; text-decoration: none; color: inherit; }
.coverstory .art{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 12 / 5;
  box-shadow: var(--shadow);
  background: var(--surface-alt);
  transition: box-shadow var(--ease);
}
.coverstory .art img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(.4,0,.2,1);
}
.coverstory .tag{
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .02em;
  background: var(--accent);
  color: #fff;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 10px rgba(42,32,21,0.25);
}
.coverstory .caption{ padding: 16px 4px 0; }
.coverstory h2{
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 6px;
  text-wrap: balance;
  transition: color var(--ease);
}
.coverstory .byline{
  font-size: 12px;
  color: var(--text-soft);
}
@media (hover: hover){
  .coverstory > a:hover .art{ box-shadow: var(--shadow-lg); }
  .coverstory > a:hover .art img{ transform: scale(1.04); }
  .coverstory > a:hover h2{ color: var(--accent); }
}

.pullquote{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 30px;
  padding: 16px 18px;
  background: var(--surface-alt);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.pullquote .mark{ font-family: var(--font-heading); font-size: 28px; line-height: .7; color: var(--gold); flex: none; }
.pullquote p{ font-family: var(--font-heading); font-style: italic; font-size: 14.5px; line-height: 1.6; color: var(--text); margin: 0; }

/* --------------------------------------------------------------------- */
/* Sections — module headers (view-all / search pages)                   */
/* --------------------------------------------------------------------- */

.nx-section{ margin-bottom: 32px; }
.nx-section-wide{ margin-bottom: 32px; }
.nx-section-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.nx-section-head h3{ font-family: var(--font-body); font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--text); margin: 0; }
.nx-section-head a{
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  transition: background var(--ease), border-color var(--ease);
}
.nx-section-head a:hover{ border-color: var(--accent); background: var(--surface); }
.module-title{ font-family: var(--font-body); font-weight: 800; font-size: 18px; letter-spacing: -.01em; color: var(--text); margin: 0 0 4px; }
.module-desc{ color: var(--text-soft); font-size: 13px; margin: 0 0 16px; }
.module-title:empty, .module-desc:empty{ display: none; }

.nx-page-number{ text-align: center; color: var(--text-faint); font-size: 12px; margin: 16px 0 32px; }

.nx-pagination{ display: flex; justify-content: center; gap: 10px; margin: 0 0 32px; }

/* --------------------------------------------------------------------- */
/* Genre dividers + asymmetric spread (home page genres)                 */
/* --------------------------------------------------------------------- */

.eyebrow-row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 34px 0 16px; }
.eyebrow{ font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--text); white-space: nowrap; }
.eyebrow-row .line{ display: none; }
.eyebrow-row a{
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  transition: background var(--ease), border-color var(--ease);
}
.eyebrow-row a:hover{ border-color: var(--accent); background: var(--surface); }

.spread{ display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin-bottom: 8px; }
.spread-big .novel-cover{ height: 190px; }
.spread-stack{ display: flex; flex-direction: column; gap: 14px; }
.spread-stack .novel-cover{ height: 88px; }
.spread .novel-title{ font-size: 13px; margin: 10px 0 2px; }

/* --------------------------------------------------------------------- */
/* Novel cards — rounded covers, soft shadow                             */
/* --------------------------------------------------------------------- */

.novel-list{ }
.nx-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.nx-list{ display: flex; flex-direction: column; gap: 12px; }

.nx-card{
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 0;
}

.novel-cover{
  background: var(--surface-alt);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease);
}
.novel-cover img{ width: 100% !important; height: 100%; object-fit: cover; display: block; transition: transform 350ms cubic-bezier(.4,0,.2,1); }
.novel-cover a{ display: block; height: 100%; }
@media (hover: hover){
  .nx-card:hover .novel-cover,
  .spread-big:hover .novel-cover,
  .spread-stack > div:hover .novel-cover,
  .nx-list-item:hover .novel-cover{ transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); }
  .nx-card:hover .novel-cover img,
  .spread-big:hover .novel-cover img,
  .spread-stack > div:hover .novel-cover img,
  .nx-list-item:hover .novel-cover img{ transform: scale(1.06); }
  .nx-card:hover .novel-title,
  .spread-big:hover .novel-title,
  .spread-stack > div:hover .novel-title,
  .nx-list-item:hover .novel-title{ color: var(--accent); }
}

.novel-title{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.35;
  margin: 10px 0 2px;
  text-align: left;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  transition: color var(--ease);
}
.novel-author{
  font-size: 11.5px;
  color: var(--text-soft);
  margin: 0;
  margin-top: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nx-list-item{
  display: flex;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.nx-list-item:hover{ border-color: var(--accent); box-shadow: var(--shadow); }
.nx-list-item .novel-cover{ width: 76px; flex: none; }
.nx-list-item .nx-list-info{ flex: 1; min-width: 0; padding-top: 2px; }
.nx-list-item .novel-title{ margin-top: 0; -webkit-line-clamp: 2; }
.novel-desc{
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.45;
  margin-top: 6px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.nx-empty{ text-align: center; padding: 72px 20px; color: var(--text-soft); }
.nx-empty h4{ font-family: var(--font-body); font-weight: 800; color: var(--text); margin: 0 0 8px; font-size: 19px; }

.unsub-card{
  max-width: 420px;
  margin: 60px auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--shadow);
}
.unsub-card h4{ font-family: var(--font-heading); font-size: 19px; color: var(--text); margin: 0 0 10px; }
.unsub-card p{ font-size: 14px; color: var(--text-soft); line-height: 1.6; margin: 0 0 22px; }
.unsub-actions{ display: flex; flex-direction: column; gap: 10px; }
.unsub-actions .nx-btn{ width: 100%; }

/* --------------------------------------------------------------------- */
/* Buttons                                                                */
/* --------------------------------------------------------------------- */

.nx-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease), transform 100ms ease;
}
.nx-btn:active{ transform: scale(.97); }
.nx-btn-primary{ background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 16px rgba(60,90,64,0.28); }
.nx-btn-primary:hover{ background: var(--accent-strong); }
.nx-btn-ghost{ background: transparent; border-color: var(--border); color: var(--text); }
.nx-btn-ghost:hover{ border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------------- */
/* Popups — subscribe / share / congratulation                           */
/* --------------------------------------------------------------------- */

#PopupOverlay{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(29,22,14,0.75);
  z-index: 900;
  animation: nx-fade var(--ease);
}
#subsPopup{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 360px;
  width: 88%;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px 24px;
  box-shadow: var(--shadow-lg);
  animation: nx-pop-modal 260ms cubic-bezier(.2,.8,.3,1);
}
.closeSubs{
  position: absolute;
  top: 12px; right: 16px;
  cursor: pointer;
  color: var(--text-soft);
  font-size: 22px;
  line-height: 1;
  transition: color var(--ease), transform 100ms ease;
}
.closeSubs:hover{ color: var(--text); }
.closeSubs:active{ transform: scale(.9); }
.innerAction{ text-align: center; margin-top: 14px; color: var(--text); }

.nx-popup-icon{
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.nx-popup-icon svg{ width: 26px; height: 26px; }
.nx-popup-title{
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
  text-align: center;
  color: var(--text);
  margin-bottom: 6px;
}
.nx-popup-subtitle{
  text-align: center;
  font-size: 13px;
  color: var(--text-soft);
  margin: 0 0 16px;
  line-height: 1.5;
}
.nx-popup-features{
  list-style: none;
  margin: 0 0 18px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.nx-popup-features li{
  position: relative;
  padding-left: 24px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.3;
}
.nx-popup-features li::before{
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.nx-popup-cta{ font-weight: 700; }
.nx-popup-later{
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-faint);
  text-decoration: underline;
  transition: color var(--ease);
}
.nx-popup-later:hover{ color: var(--text-soft); }

.modal{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(29,22,14,0.75);
  z-index: 900;
  animation: nx-fade var(--ease);
}
.modal-content{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  max-width: 320px; width: 86%;
  margin: 26% auto 0;
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: nx-pop 260ms cubic-bezier(.2,.8,.3,1);
}
.modal-content .close{ position: absolute; top: 12px; right: 16px; cursor: pointer; color: var(--text-soft); font-size: 22px; transition: color var(--ease), transform 100ms ease; }
.modal-content .close:hover{ color: var(--text); }
.modal-content .close:active{ transform: scale(.9); }
.modal-content h4{ font-family: var(--font-heading); margin: 0 0 14px; }
.modal-content table{ width: 100%; margin-top: 6px; border-collapse: collapse; }
.modal-content td{ text-align: center; padding: 8px; }
.nx-share-link{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: 11px;
}
.nx-share-icon{
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  color: var(--accent);
  transition: border-color var(--ease), transform var(--ease);
}
.nx-share-link:hover .nx-share-icon{ border-color: var(--accent); transform: translateY(-2px); }

.modal2{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(29,22,14,0.8);
  z-index: 900;
  animation: nx-fade var(--ease);
}
.modal-content2{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  max-width: 320px; width: 86%;
  margin: 22% auto 0;
  border-radius: var(--radius);
  padding: 30px 24px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: nx-pop 260ms cubic-bezier(.2,.8,.3,1);
}
.modal-content2 img{ width: 60px; margin: 0 auto 14px; display: block; }
.modal-content2 h4{ font-family: var(--font-heading); color: var(--accent); margin: 0 0 8px; }
.close2{ position: absolute; top: 12px; right: 16px; cursor: pointer; color: var(--text-soft); font-size: 22px; transition: color var(--ease), transform 100ms ease; }
.close2:hover{ color: var(--text); }
.close2:active{ transform: scale(.9); }
.continue{ margin-top: 18px; width: 100%; }

/* --------------------------------------------------------------------- */
/* Chapter detail page                                                    */
/* --------------------------------------------------------------------- */

.novel-detailsbox{ margin-top: 4px; }
.novel-details{ display: flex; gap: 16px; }
.novel-details .novel-cover{ width: 120px; flex: none; }
.novel-details .novel-title{ font-family: var(--font-heading); font-size: 19px; font-weight: 700; margin-top: 0; -webkit-line-clamp: 3; }
.novel-details .novel-author{ font-size: 13px; margin-top: 6px; }
.novel-readnow{ margin-top: 12px; width: 100%; }
.novel-contentbox{ margin: 24px 0; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.novel-content{ text-align: left; }
.novel-content a{ color: var(--accent); text-decoration: none; font-weight: 700; font-size: 13.5px; transition: color var(--ease); }
.novel-content a:hover{ color: var(--accent-strong); }
.novel-other{ min-height: 4px; }

.novel-chapters-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--ease), color var(--ease);
}
.novel-chapters-toggle:hover{ border-color: var(--accent); color: var(--accent); }
.novel-chapters-toggle .caret{
  display: inline-block;
  width: 0; height: 0;
  border-top: 5px solid currentColor;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  transition: transform var(--ease);
}
.novel-chapters-toggle.open .caret{ transform: rotate(180deg); }

.novel-chapters-list{
  list-style: none;
  margin: 0; padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.novel-chapters-list.open{
  max-height: 60vh;
  overflow-y: auto;
  margin-top: 10px;
  padding-right: 2px;
}
.novel-chapters-list::-webkit-scrollbar{ width: 6px; }
.novel-chapters-list::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 3px; }
.novel-chapters-list::-webkit-scrollbar-thumb:hover{ background: var(--text-faint); }

.sticky-footer{ margin: 24px auto calc(var(--nav-h) + 8px); max-width: 640px; padding: 16px 20px 0; }
.sticky-read a{
  display: block;
  text-align: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  padding: 15px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(60,90,64,0.3);
  transition: background var(--ease), transform 100ms ease;
}
.sticky-read a:hover{ background: var(--accent-strong); }
.sticky-read a:active{ transform: scale(.98); }

/* --------------------------------------------------------------------- */
/* Chapter list page                                                      */
/* --------------------------------------------------------------------- */

.novel-chaptersbox{ margin-top: 4px; }
.chapterlist{ margin-top: 20px; }
.list-group{
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.chapterlistitem{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 14px 16px;
  text-decoration: none;
  font-size: 14px;
  box-shadow: var(--shadow-sm);
  transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.chapterlistitem:hover{ border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow); transform: translateX(2px); }
.np-chevron{ color: var(--text-faint); transition: transform var(--ease), color var(--ease); }
.chapterlistitem:hover .np-chevron{ transform: translateX(3px); color: var(--accent); }

/* --------------------------------------------------------------------- */
/* Comments                                                               */
/* --------------------------------------------------------------------- */

.novel-commentbox{ margin-top: 4px; }
.section-title{ font-family: var(--font-heading); font-size: 16px; color: var(--text); margin: 0 0 12px; }
.np-comment-form{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}
.np-comment-fieldset{ display: flex; gap: 10px; border: none; margin: 0; padding: 0; }
.np-comment-fieldset .user-pic{ width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.np-comment-fieldset .form-group{ flex: 1; margin: 0; }
.np-comment-fieldset textarea{
  width: 100%;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  resize: vertical;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.np-comment-fieldset textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(60,90,64,0.12);
}
.btn-normal{
  margin-top: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--ease), transform 100ms ease;
}
.btn-normal:hover{ background: var(--accent-strong); }
.btn-normal:active{ transform: scale(.97); }
.pull-right{ float: right; }
.clr{ clear: both; display: block; }

.novel-comments{ display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.novel-comments .user-pic{ width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.username{ font-weight: 700; font-size: 13.5px; color: var(--text); margin: 0; }
.commentstxt{ font-size: 13px; line-height: 1.5; color: var(--text-soft); margin: 4px 0; }
.dates{ font-size: 11px; color: var(--text-faint); margin: 0; }

/* --------------------------------------------------------------------- */
/* Reading page                                                           */
/* --------------------------------------------------------------------- */

.readingbox{ max-width: 640px; margin: 0 auto; }
.reading-content{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 22px 36px;
  box-shadow: var(--shadow);
  animation: nx-fade 320ms ease;
}
.reading-content #novel_title{
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.reading-content p{
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16.5px;
  line-height: 1.95;
  color: var(--text);
  margin-bottom: 1.3em;
}

.reading-navigation{
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 560px;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 400;
  opacity: .97;
  transition: transform .25s ease, opacity .2s ease;
}
.reading-navigation.nav-hidden{
  transform: translateX(-50%) translateY(140%);
}
.reading-navigation .btn-group-justified{ display: flex; gap: 10px; }
.reading-navigation .btn-group{ flex: 1; display: flex; position: relative; }
.reading-navigation .btn{
  flex: 1;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  padding: 13px 10px;
  border-radius: var(--radius-pill);
  text-align: center;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease), transform 100ms ease;
}
.reading-navigation .btn:hover{ border-color: var(--accent); color: var(--accent); }
.reading-navigation .btn:active{ transform: scale(.97); }
.reading-navigation .np-btn-next{ background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 6px 16px rgba(60,90,64,0.25); }
.reading-navigation .np-btn-next:hover{ background: var(--accent-strong); }

.reading-navigation .caret{
  display: inline-block;
  width: 0; height: 0;
  margin-left: 5px;
  border-top: 4px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  vertical-align: middle;
}
.reading-navigation .dropdown-menu{
  display: none;
  list-style: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  height: 280px;
  width: 200px;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: center;
  margin: 0;
  z-index: 410;
}
.reading-navigation .btn-group.open .dropdown-menu{ display: block; animation: nx-pop-center 180ms cubic-bezier(.2,.8,.3,1); }
.reading-navigation ul.dropdown-menu li{ height: 38px; line-height: 38px; }
.reading-navigation ul.dropdown-menu li a{ color: var(--text); text-decoration: none; display: block; border-radius: var(--radius-xs); transition: background var(--ease), color var(--ease); }
.reading-navigation ul.dropdown-menu li a:hover{ background: var(--surface-alt); color: var(--accent); }
.reading-navigation ul.dropdown-menu li a.is-current,
.reading-navigation ul.dropdown-menu li a.is-current:hover{ background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.reading-navigation .dropdown-menu::-webkit-scrollbar{ width: 6px; }
.reading-navigation .dropdown-menu::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 3px; }
.reading-navigation .dropdown-menu::-webkit-scrollbar-thumb:hover{ background: var(--text-faint); }

/* --------------------------------------------------------------------- */
/* Wider viewports — same palette and layout language, more breathing    */
/* room and a taller lead once there's space for it                      */
/* --------------------------------------------------------------------- */

@media (min-width: 760px){
  .nx-page, .nx-search-form-wrap, .readingbox, .sticky-footer{ max-width: 720px; }
  .tabbar{ left: 50%; right: auto; width: 420px; transform: translateX(-50%); }
  .coverstory h2{ font-size: 30px; }
  .nx-grid{ grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .spread{ grid-template-columns: 1.4fr 1fr; gap: 16px; }
  .spread-big .novel-cover{ height: 240px; }
  .spread-stack .novel-cover{ height: 112px; }
  .reading-content{ padding: 36px 44px 44px; }
  .reading-content p{ font-size: 17px; }
}