/* your original styles moved here unchanged */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background-color:#f5f5f5;color:#333}

/* Reader Page Styles */
.reader-page{display:none;min-height:100vh;transition:background-color .3s ease,color .3s ease}
.reader-page.dark-mode{background-color:#1a1a1a;color:#e0e0e0}
.reader-page.dark-mode .reader-header{background:#2a2a2a;border-bottom:1px solid #444}
.reader-page.dark-mode .chapter-content{background:#2a2a2a;color:#e0e0e0}
.reader-page.dark-mode .settings-panel{background:#2a2a2a;border:1px solid #444}
.reader-page.dark-mode .settings-button{background:#3a3a3a;color:#e0e0e0}
.reader-page.dark-mode .settings-button:hover{background:#4a4a4a}

.novel-description {
  white-space: pre-line;
}

.reader-header{background:white;padding:1rem 0;box-shadow:0 2px 10px rgba(0,0,0,.1);position:sticky;top:0;z-index:100;transition:all .3s ease}
.reader-controls{max-width:900px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.reader-nav{display:flex;gap:1rem;align-items:center}
.reader-nav button{background:#667eea;color:white;border:none;padding:.5rem 1rem;border-radius:8px;cursor:pointer;transition:all .3s ease;font-size:.9rem}
.reader-nav button:hover:not(:disabled){background:#764ba2;transform:translateY(-2px)}
.reader-nav button:disabled{opacity:.5;cursor:not-allowed}
.chapter-title-display{font-size:1.1rem;font-weight:bold;color:#667eea}
.reader-page.dark-mode .chapter-title-display{color:#8a9dff}

.settings-button{background:#f0f0f0;border:none;padding:.5rem 1rem;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .3s ease}
.settings-button:hover{background:#e0e0e0;transform:translateY(-2px)}
.settings-panel{display:none;position:absolute;top:100%;right:2rem;background:white;border-radius:12px;box-shadow:0 5px 25px rgba(0,0,0,.2);padding:1.5rem;margin-top:.5rem;z-index:200;min-width:300px;animation:slideDown .3s ease}
.settings-panel.show{display:block}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

.setting-group{margin-bottom:1.5rem}
.setting-group:last-child{margin-bottom:0}
.setting-label{font-size:.9rem;font-weight:600;margin-bottom:.5rem;display:block}
.font-selector,.size-slider{width:100%;padding:.5rem;border:1px solid #ddd;border-radius:6px;background:white;cursor:pointer}
.reader-page.dark-mode .font-selector{background:#3a3a3a;border-color:#555;color:#e0e0e0}
.size-display{display:flex;align-items:center;gap:1rem}
.size-slider{flex:1;padding:0}
.size-value{min-width:40px;text-align:center;font-weight:600}
.theme-toggle{display:flex;align-items:center;justify-content:space-between}
.toggle-switch{position:relative;width:50px;height:24px;background:#ccc;border-radius:12px;cursor:pointer;transition:background .3s ease}
.toggle-switch.active{background:#667eea}
.toggle-switch::after{content:'';position:absolute;width:20px;height:20px;background:white;border-radius:50%;top:2px;left:2px;transition:transform .3s ease}
.toggle-switch.active::after{transform:translateX(26px)}

.chapter-content{max-width:800px;margin:2rem auto;padding:2rem;background:white;border-radius:12px;box-shadow:0 5px 20px rgba(0,0,0,.1);line-height:1.8;transition:all .3s ease}
.chapter-content h2{margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid #667eea}
.chapter-content p{margin-bottom:1.5rem;text-align:justify}
.reader-page.dark-mode .chapter-content h2{border-bottom-color:#8a9dff}

.header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:1rem 0;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.nav-container{max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center;position:relative}
.logo{color:white;font-size:1.5rem;font-weight:bold;text-decoration:none;background:rgba(255,255,255,.2);padding:.5rem 1rem;border-radius:25px;backdrop-filter:blur(10px)}
.nav-menu{display:flex;gap:2rem}
.nav-link{color:white;text-decoration:none;padding:.5rem 1rem;border-radius:20px;transition:all .3s ease;background:rgba(255,255,255,.1)}
.nav-link:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}

.container{max-width:1200px;margin:0 auto;padding:3rem 2rem}
.hero-section{text-align:center;margin-bottom:3rem;background:white;padding:2rem;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,.1)}
.hero-image{width:300px;height:200px;background-size:cover;background-position:center;border-radius:15px;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:white;font-weight:bold;position:relative;overflow:hidden;cursor:pointer;transition:all .4s ease}
.hero-image:hover{transform:scale(1.05);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.hero-image::before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.4) 100%);z-index:1}
.hero-content{position:relative;z-index:2;text-align:center;background:rgba(0,0,0,.6);padding:1rem;border-radius:10px;backdrop-filter:blur(5px);transition:all .3s ease}
.hero-image:hover .hero-content{background:rgba(0,0,0,.8);transform:scale(1.05)}
.featured-title{font-size:1rem;margin-bottom:.5rem;text-shadow:2px 2px 4px rgba(0,0,0,.8)}
.featured-subtitle{font-size:.8rem;opacity:.9;text-shadow:1px 1px 2px rgba(0,0,0,.8)}
.slideshow-indicators{display:flex;justify-content:center;gap:.5rem;margin-top:1rem}
.indicator{width:10px;height:10px;border-radius:50%;background:rgba(102,126,234,.3);cursor:pointer;transition:all .3s ease}
.indicator.active{background:#667eea;transform:scale(1.3)}
.indicator:hover{background:#667eea;transform:scale(1.2)}
.slide-transition{animation:slideIn .8s ease-out}
@keyframes slideIn{from{opacity:0;transform:translateX(30px) scale(.95)}to{opacity:1;transform:translateX(0) scale(1)}}

.novels-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:2rem}
.novel-card{background:white;border-radius:15px;overflow:hidden;box-shadow:0 5px 20px rgba(0,0,0,.1);transition:all .4s ease;cursor:pointer;position:relative}
.novel-card::before{content:'';position:absolute;inset:0;background:linear-gradient(45deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.05) 25%,transparent 50%,rgba(255,255,255,.05) 75%,rgba(255,255,255,.1) 100%);opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:2}
.novel-card:hover{transform:translateY(-15px) scale(1.02);box-shadow:0 20px 40px rgba(0,0,0,.25)}
.novel-card:hover::before{opacity:1}
.novel-image{width:100%;height:250px;background-size:cover;background-position:center;position:relative;transition:transform .4s ease;overflow:hidden}
.novel-card:hover .novel-image{transform:scale(1.08)}
.novel-image::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.1) 25%,transparent 50%,rgba(255,255,255,.1) 75%,rgba(255,255,255,.2) 100%);opacity:.6;transition:opacity .4s ease}
.novel-card:hover .novel-image::after{opacity:.8;background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 25%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.2) 75%,rgba(255,255,255,.3) 100%)}
.novel-content{padding:1.5rem}
.novel-title{font-size:1.3rem;font-weight:bold;margin-bottom:.5rem;color:#333}
.novel-description{color:#666;line-height:1.5;font-size:.9rem}

.detail-page{display:none}
.detail-header{background:white;padding:2rem;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,.1);margin-bottom:2rem}
.back-button{background:#667eea;color:white;border:none;padding:.5rem 1rem;border-radius:25px;cursor:pointer;margin-bottom:1rem;transition:all .3s ease}
.back-button:hover{background:#764ba2;transform:translateX(-3px)}
.detail-content{display:flex;gap:3rem;align-items:flex-start}
.detail-info{flex:1;min-width:0}
.detail-image{width:280px;height:400px;background-size:cover;background-position:center;border-radius:15px;box-shadow:0 8px 25px rgba(0,0,0,.3);flex-shrink:0}
.detail-info h1{font-size:2rem;margin-bottom:1rem;color:#333}
.detail-info p{color:#666;line-height:1.6;margin-bottom:1rem}
.genres,.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.genre-tag,.tag-item{background:#e3f2fd;color:#1976d2;padding:.3rem .8rem;border-radius:15px;font-size:.8rem}
.chapters-section{background:white;padding:2rem;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,.1)}
.chapters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-top:1rem}
.chapter-item{display:block;text-decoration:none;color:inherit;padding:1rem;background:#f8f9fa;border-radius:8px;border-left:4px solid #667eea;transition:all .3s ease;cursor:pointer}
.chapter-item:hover{background:#e9ecef;transform:translateX(5px)}

.mobile-nav{display:none}
.mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);backdrop-filter:blur(10px);padding:1rem;box-shadow:0 5px 20px rgba(0,0,0,.3)}
.mobile-menu.show{display:block;animation:slideDown .3s ease-out}
.mobile-menu .nav-link{display:block;padding:.8rem 1rem;margin:.2rem 0;text-align:center;border-radius:8px}

@media (max-width:768px){
  .nav-menu{display:none}
  .mobile-nav{display:block;color:white;background:none;border:none;font-size:1.5rem;cursor:pointer;padding:.5rem;border-radius:5px;transition:background-color .3s ease}
  .mobile-nav:hover{background:rgba(255,255,255,.1)}
  .detail-content{flex-direction:column;text-align:center}
  .detail-image{margin:0 auto}
  .novels-grid{grid-template-columns:1fr}
}

.fade-in{animation:fadeIn .5s ease-in}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* make images responsive */
/* make <img> tags responsive */
img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* keep fixed heights for background-image containers */
.novel-image {
  /* width is 100% earlier, keep it */
  height: 250px;                  /* DO NOT use height:auto here */
  background-size: cover;
  background-position: center;
  border-radius: 8px;
}

.detail-image {
  width: 280px;                   /* keep your card aspect */
  height: 400px;                  /* DO NOT use height:auto here */
  background-size: cover;
  background-position: center;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0,0,0,.3);
}


/* responsive grid for novels */
.novels-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.novel-card {
  flex: 1 1 calc(33.333% - 16px); /* 3 columns on desktop */
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}

.novel-card:hover {
  transform: translateY(-5px);
}

@media (max-width: 768px) {
  .novel-card {
    flex: 1 1 calc(50% - 16px); /* 2 columns on tablets */
  }
}

@media (max-width: 480px) {
  .novel-card {
    flex: 1 1 100%; /* 1 column on phones */
  }
}

/* Hide desktop nav on small screens */
.nav-menu {
  display: flex;
  gap: 16px;
}

/* Mobile Navigation */
.mobile-nav, .mobile-menu {
  display: none;
}

@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }
  .mobile-nav {
    display: block;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
  }
  .mobile-menu {
    display: none;
    flex-direction: column;
    gap: 12px;
    background: #222;
    padding: 12px;
  }
  .mobile-menu.show {
    display: flex;
  }

  .chapter-item.locked { opacity: .65; cursor: not-allowed; }

}

.reader-page {
  padding: 16px;
}

.chapter-content {
  font-size: 16px;
  line-height: 1.6;
  word-wrap: break-word;
}

/* reader page improvements */
.reader-page {
  padding: 16px;
}

.chapter-content {
  font-size: 16px;
  line-height: 1.6;
  word-wrap: break-word;
}

#chapterContent {
  white-space: pre-line;  /* keeps newlines */
  font-size: 17px;
  line-height: 1.7;
}

#chapterContent,
#chapterContent p {
  white-space: pre-line;
}

/* --- Reader header: responsive and tidy --- */
.reader-controls {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 12px;
}

.reader-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.chapter-title-display {
  min-width: 0;                 /* allow ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

/* Buttons stay tappable on phones */
.reader-nav button {
  padding: 10px 14px;
  border-radius: 10px;
}

/* Stack on small screens; let title take its own row */
@media (max-width: 480px) {
  .reader-nav {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .reader-nav button:first-child { justify-self: start; }  /* Back */
  .reader-nav button:last-child  { justify-self: end; }    /* Next */
  .chapter-title-display {
    grid-column: 1 / -1;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* 2-line clamp */
    -webkit-box-orient: vertical;
  }
}

/* --- Settings: desktop popover + mobile bottom sheet --- */
.settings-button { position: relative; z-index: 1001; }

.settings-panel {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1002;
  background: var(--panel-bg, #fff);
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 16px;
  min-width: 300px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

.settings-panel.show { display: block; }

.reader-header {
  background: var(--reader-header-bg, #fff);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.settings-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1000;
}
.settings-backdrop.show { display: block; }

body.no-scroll { overflow: hidden; }

/* On phones, use a bottom-sheet so it never gets cut off */
@media (max-width: 768px) {
  .settings-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    margin: 0;
    border-radius: 16px 16px 0 0;
    min-width: unset;
    max-height: 70vh;
    overflow: auto;
    padding: 18px 16px;
  }
}

/* --- Chapter content: robust wrapping & media sizing --- */
.chapter-content,
.chapter-content p {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.chapter-content img,
.chapter-content video,
.chapter-content iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* a touch more vertical rhythm on mobile */
@media (max-width: 480px) {
  .chapter-content { padding: 18px 14px; line-height: 1.8; }
}

/* ===== Reader header layout (like your reference) ===== */

.reader-page.dark-mode .reader-header {
  --reader-header-bg: #2a2a2a;
}

.reader-topbar {
  max-width: 900px;
  margin: 0 auto;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}

.reader-novel-title {
  font-size: 18px;
  font-weight: 700;
  color: #3b82f6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reader-page.dark-mode .reader-novel-title { color: #8ab4ff; }

.settings-wrap { position: relative; }

.reader-cta {
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 16px 14px;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 10px;
  align-items: center;
}

/* nav buttons */
.nav-btn {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
}
.nav-btn:disabled { opacity: .5; cursor: default; }

.toc-button {
  justify-self: center;
  min-width: 220px;
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  background: #1f2937;
  color: #e5e7eb;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reader-page.dark-mode .toc-button { background: #0f172a; color: #e5e7eb; }
.toc-button .caret { opacity: .75; }

/* Small screens: stack nicely, TOC spans full row */
@media (max-width: 520px) {
  .reader-topbar { padding: 4px 10px; }
  .reader-cta {
    padding: 4px 10px 6px;
    gap: 6px;

    /* >>> This is the important part <<< */
    display: grid;
    grid-template-columns: auto 1fr auto; /* Back | (space) | Next */
    grid-template-rows: auto auto;        /* row 1: buttons, row 2: picker */
    align-items: center;
  }

  #prevChapter { grid-column: 1; justify-self: start; } /* next to Back */
  #nextChapter { grid-column: 3; justify-self: end; }   /* right edge */
  .toc-button  { grid-column: 1 / -1; width: 100%; justify-content: center; }

  .nav-btn         { padding: 7px 10px; font-size: 13px; }
  .toc-button      { padding: 7px 10px; min-width: 170px; }
  .settings-button { padding: 5px 9px; font-size: 13px; }
}

/* ===== TOC panel (searchable list) ===== */
.toc-panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -8px;               /* anchor under the button row */
  translate: 0 100%;
  width: min(640px, 92vw);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,.28);
  padding: 12px;
  display: none;
  z-index: 1002;
}
.toc-panel.show { display: block; }

.reader-page.dark-mode .toc-panel {
  background: #242424;
  border-color: #444;
}

.toc-search {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  margin-bottom: 10px;
  outline: none;
}
.reader-page.dark-mode .toc-search {
  background: #1f1f1f; color: #e5e7eb; border-color: #444;
}

.toc-list {
  max-height: 60vh;
  overflow: auto;
  padding-right: 6px;
}
.toc-item {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.toc-item:hover { background: rgba(59,130,246,.12); }
.reader-page.dark-mode .toc-item:hover { background: rgba(138,180,255,.14); }

/* Reuse settings backdrop for TOC as well (already in your file) */
.settings-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1000; }
.settings-backdrop.show { display: block; }

/* Chapter content safety on phones still intact */
.chapter-content, .chapter-content p {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Backdrop sits under the panel */
.settings-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1000;    /* below the panel */
}
.settings-backdrop.show { display: block; }

body.no-scroll { overflow: hidden; }

/* Settings panel floats above everything, not inside header */
.settings-panel {
  display: none;
  position: fixed;
  top: 80px;              /* desktop placement */
  right: 16px;
  z-index: 1100;          /* above backdrop */
  background: #fff;
  color: inherit;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 16px;
  min-width: 300px;
  max-height: 70vh;
  overflow: auto;
  box-shadow: 0 20px 40px rgba(0,0,0,.28);
}
.settings-panel.show { display: block; }
.reader-page.dark-mode .settings-panel { background:#242424; border-color:#444; }

/* On phones, slide up like a bottom-sheet */
@media (max-width: 768px) {
  .settings-panel {
    left: 0; right: 0;
    bottom: 0; top: auto;
    border-radius: 16px 16px 0 0;
    margin: 0;
  }
}

/* Safer wrapping for chapter text on tiny screens */
.chapter-content, .chapter-content p {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* --- Compact reader header --- */
.reader-header {            /* white bar */
  /* keep it sticky, just smaller */
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

.reader-topbar {            /* row with Settings on the right */
  padding: 6px 12px;        /* was ~12px+ */
}

.reader-cta {               /* row with Back / Prev / picker / Next */
  padding: 6px 12px 8px;    /* tighten vertical space */
  gap: 8px;
}

/* smaller buttons so header height drops */
.nav-btn {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
}
.toc-button {
  padding: 8px 12px;
  border-radius: 10px;
  min-width: 200px;         /* you can lower to 180 if you like */
  max-width: 100%;
}
.settings-button {
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 14px;
}

/* EXTRA: on phones, reduce a bit more */
@media (max-width: 520px) {
  .reader-topbar { padding: 4px 10px; }
  .reader-cta    { padding: 4px 10px 6px; gap: 6px; }
  .nav-btn       { padding: 7px 10px; font-size: 13px; }
  .toc-button    { padding: 7px 10px; min-width: 170px; }
  .settings-button { padding: 5px 9px; font-size: 13px; }
}

/* --- Optional: auto-shrink header while scrolling --- */
.reader-header.condensed .reader-topbar { padding: 2px 10px; }
.reader-header.condensed .reader-cta    { padding: 3px 10px 5px; }
.reader-header.condensed .nav-btn       { padding: 6px 9px;  font-size: 13px; }
.reader-header.condensed .toc-button    { padding: 6px 9px;  min-width: 160px; }
.reader-header.condensed .settings-button { padding: 5px 8px; font-size: 13px; }