:root { --text-size: 1.25em; }
body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #faf7f2;
  color: #2b2b2b;
  max-width: 1300px;
  margin: 30px auto;
  padding: 0 16px;
  line-height: 1.6;
}
h1 { font-size: 1.4em; }
h1 a { color: inherit; text-decoration: none; }
h1 a:hover { color: #2b6777; }

/* ── Library catalog ─────────────────────────────────────────── */
.lib-intro { color: #666; margin: 0 0 18px; }
.catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.story-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #e6e0d6;
  border-radius: 8px;
  padding: 16px 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.story-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  transform: translateY(-2px);
  border-color: #2b6777;
}
.card-type {
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #b15a00;
  font-weight: 600;
}
.card-title { font-size: 1.05em; font-weight: 600; margin-top: 3px; }
.card-title-bn { font-size: 1.1em; color: #2b2b2b; margin-top: 2px; }
.card-meta { font-size: 0.82em; color: #777; margin-top: 4px; }
.card-blurb { font-size: 0.85em; color: #555; margin-top: 8px; line-height: 1.4; }
.card-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.tag {
  font-size: 0.7em;
  background: #eef6f7;
  color: #2b6777;
  padding: 2px 8px;
  border-radius: 10px;
}
.card-count { font-size: 0.72em; color: #999; margin-left: auto; }

/* ── Reader header / back link ───────────────────────────────── */
.back-link {
  display: inline-block;
  margin-bottom: 14px;
  color: #2b6777;
  text-decoration: none;
  font-size: 0.9em;
}
.back-link:hover { text-decoration: underline; }
.story-head { margin-bottom: 18px; }
.story-title { font-size: 1.3em; margin: 0; }
.story-title-bn { font-size: 1.15em; color: #444; margin-top: 2px; }
.story-byline { font-size: 0.9em; color: #777; margin-top: 4px; }
.story-subtitle { font-size: 0.95em; color: #b15a00; margin-top: 6px; font-style: italic; }

/* ── Table of contents (chaptered works) ─────────────────────── */
.toc-title { font-size: 1.05em; }
.toc-list { padding-left: 1.2em; }
.toc-list li { margin: 8px 0; }
.toc-list a { color: #2b6777; text-decoration: none; }
.toc-list a:hover { text-decoration: underline; }

/* ── Chapter prev/next nav ───────────────────────────────────── */
.chapter-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid #e6e0d6;
}
.chapter-nav a {
  color: #2b6777;
  text-decoration: none;
  font-size: 0.9em;
  max-width: 40%;
}
.chapter-nav a:hover { text-decoration: underline; }
.chapter-nav .nav-toc { color: #999; }
.chapter-nav .nav-next { text-align: right; }

/* ── Status / error banner ───────────────────────────────────── */
.status {
  margin: 16px 0;
  padding: 10px 14px;
  background: #fff3e6;
  border: 1px solid #f0d4b0;
  border-radius: 6px;
  color: #8a4b00;
  font-size: 0.9em;
}
.controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
  position: sticky;
  top: 0;
  background: #faf7f2;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  z-index: 5;
}
button.ctrl {
  background: #2b6777;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9em;
}
button.ctrl:hover { background: #1f4d59; }
button.ctrl.off { background: #aaa; }
.fontsize-group {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.fontsize-group button {
  background: #fff;
  border: 1px solid #ccc;
  color: #2b6777;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}
.fontsize-group button:hover { background: #eef6f7; }
.fontsize-label { font-size: 0.8em; color: #777; margin: 0 6px; min-width: 38px; text-align: center; }

.story {
  font-size: var(--text-size);
  font-family: Georgia, 'Bookerly', 'Palatino Linotype', serif;
  background: #fff;
  padding: 30px 24px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  user-select: text;
  line-height: 1.75;
  max-width: none;
  margin: 0;
}
.bn { font-family: 'Noto Sans Bengali','Nirmala UI', sans-serif; }
.word {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: top;
  margin: 0 0.06em 2px 0.06em;
  cursor: pointer;
  padding: 0 2px;
  border-radius: 4px;
}
.show-gloss .word {
  margin: 0 7px 12px 7px;
  padding: 2px 5px;
}
.show-below-bn .word {
  margin: 0 0.1em 3px 0.1em;
  padding: 0 2px;
}
.word:hover { background: #eef6f7; }
.gloss {
  display: none;
  order: 1;
  font-size: 0.55em;
  color: #b15a00;
  line-height: 1.3;
  white-space: nowrap;
  font-style: italic;
}
.show-gloss .gloss { display: block; }
.main-text { order: 2; white-space: nowrap; }
.below-bn {
  display: none;
  order: 3;
  font-size: 0.55em;
  color: #2b6777;
  white-space: nowrap;
  line-height: 1.3;
  font-family: 'Noto Sans Bengali','Nirmala UI', sans-serif;
}
.show-below-bn .below-bn { display: block; }
.sentence-end { margin-right: 6px; }

#popup {
  display: none;
  position: fixed;
  background: #2b2b2b;
  color: #fff;
  padding: 14px 16px;
  border-radius: 8px;
  max-width: 320px;
  font-size: 0.95em;
  z-index: 50;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
#popup .close {
  position: absolute;
  top: 4px; right: 8px;
  cursor: pointer;
  color: #ccc;
}
#popup .label { color: #8fd3e8; font-size: 0.8em; display: block; margin-bottom: 4px;}

#selTranslateBtn {
  display: none;
  position: fixed;
  background: #d97706;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85em;
  z-index: 40;
}

.note {
  margin-top: 25px;
  font-size: 0.85em;
  color: #666;
  border-top: 1px dashed #ccc;
  padding-top: 12px;
}