:root{
  --bg:#121212;
  --panel:#1a1a1a;
  --text:#e8e8e8;
  --body-text:#d6d6d6;
  --muted:#a9a9a9;
  --line:#2a2a2a;
  --button:#3b3737;
  --button-hover:#4a4444;
  --accent:#ed872d;
  --link:#7272FF;
  --page-bg:#3b3737;   /* фон страницы книги */
  --pad:10pt;          /* поля внутри страницы книги */
  --gutter:8px;        /* отступ страницы от краёв экрана */
  --text-max:680px;    /* максимальная ширина строки */
  --box-max:calc(var(--text-max) + 2 * var(--pad));
  --font-size:18px;
  /* Шрифт текста книги. Варианты: 'Literata', 'PT Serif', 'Merriweather', 'Source Serif 4' */
  --book-font:'Literata', Georgia, serif;
}

*{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  overflow:hidden;
}

[hidden]{display:none!important}

/* Каркас: шапка, область чтения, нижняя полоска */
.reader{
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100dvh;
}

.reader-header{
  flex:0 0 auto;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  width:calc(100% - 2 * var(--gutter));
  max-width:var(--box-max);
  margin:0 auto;
  padding:10px 0 6px;
  padding-top:max(10px, env(safe-area-inset-top));
  font-size:14px;
}

.reader-book-title{
  color:var(--muted);
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.reader-back{
  flex:0 0 auto;
  color:var(--link);
  font-weight:700;
}

.reader-viewport{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  width:calc(100% - 2 * var(--gutter));
  max-width:var(--box-max);
  margin:0 auto;
  padding:var(--pad);
  background-color:var(--page-bg);
  touch-action:pan-y pinch-zoom;
}

/* Режим по главам: обычная прокрутка */
.mode-chapters .reader-viewport{
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.mode-chapters .reader-page{padding-bottom:40px}

/* Режим по страницам: текст раскладывается в колонки шириной в экран */
.mode-pages .reader-viewport{overflow:hidden}
.mode-pages .reader-page{
  height:100%;
  column-fill:auto;
  will-change:transform;
}
.mode-pages .reader-page.animate{transition:transform .28s ease}

/* Текст книги */
.reader-page{
  color:var(--body-text);
  font-family:var(--book-font);
  font-size:var(--font-size);
  line-height:1.6;
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
  overflow-wrap:break-word;
}

.reader-page h2{
  margin:.6em 0 .9em;
  color:var(--text);
  font-size:1.35em;
  line-height:1.25;
  text-align:left;
  hyphens:manual;
  break-after:avoid;
}

.reader-page h3{
  margin:1.2em 0 .6em;
  color:var(--text);
  font-size:1.1em;
  line-height:1.3;
  text-align:left;
  break-after:avoid;
}

.reader-page p{
  margin:0 0 .55em;
  text-indent:1.4em;
  orphans:2;
  widows:2;
}

.reader-page h2 + p,
.reader-page h3 + p,
.reader-page blockquote p,
.reader-page .poem p,
.reader-page figure + p{text-indent:0}

.reader-page blockquote{
  margin:1em 0 0 2em;
  margin-top:calc(1em + 1.6em); /* + одна пустая строка перед вставкой */
  padding:.1em 0 .1em 1em;
  border-left:2px solid #fff;
  color:var(--text);
}

.reader-page .poem{
  margin:1em 0;
  text-align:left;
  hyphens:manual;
}
.reader-page .stanza{margin:0 0 .8em}
.reader-page .v{padding-left:1.2em;text-indent:-1.2em}
.reader-page .text-author{
  margin-top:.4em;
  text-align:right;
  font-style:italic;
  color:var(--muted);
}
.reader-page .empty-line{height:.8em}

.reader-page figure{
  margin:1em 0;
  text-align:center;
  break-inside:avoid;
}
.reader-page img{
  max-width:100%;
  max-height:var(--page-h, 70vh);
  height:auto;
  background:#fff;
  border-radius:6px;
}

.reader-page a{color:var(--link)}

.reader-page table{border-collapse:collapse;margin:1em 0;font-size:.9em}
.reader-page td,.reader-page th{border:1px solid var(--line);padding:.3em .5em}

.reader-status{
  margin-top:30vh;
  color:var(--muted);
  text-align:center;
  text-indent:0!important;
}

/* Нижняя полоска */
.reader-bar{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:1fr 1.3fr 1fr;
  gap:8px;
  width:calc(100% - 2 * var(--gutter));
  max-width:var(--box-max);
  margin:0 auto;
  padding:8px 0;
  padding-bottom:max(8px, env(safe-area-inset-bottom));
  background:var(--bg);
}

.reader-btn{
  display:flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 8px;
  border:0;
  border-radius:12px;
  background:var(--button);
  color:var(--text);
  font:inherit;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.reader-btn:hover,
.reader-btn:focus-visible{background:var(--button-hover)}
.reader-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.reader-btn:disabled{opacity:.35;cursor:default;background:var(--button)}
.reader-btn svg{
  width:20px;height:20px;flex:0 0 20px;
  fill:none;stroke:var(--accent);stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round;
}

.reader-btn-toc{flex-direction:column;gap:0;line-height:1.15}
.reader-progress{
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}

/* Оверлеи */
.reader-overlay{
  position:fixed;
  inset:0;
  z-index:10;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(0,0,0,.6);
}
.reader-overlay-center{align-items:center;padding:16px}

.reader-sheet{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:560px;
  max-height:85vh;
  max-height:85dvh;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:18px 18px 0 0;
  background:var(--panel);
  padding-bottom:env(safe-area-inset-bottom);
}

.reader-sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px 8px;
}
.reader-sheet-title{margin:0;font-size:20px;font-weight:800;color:var(--text)}
.reader-toc-title{padding:6px 16px 8px}

.reader-close{
  display:flex;
  width:40px;height:40px;
  align-items:center;justify-content:center;
  border:0;border-radius:10px;
  background:var(--button);
  cursor:pointer;
}
.reader-close svg{width:20px;height:20px;fill:none;stroke:var(--text);stroke-width:2.5;stroke-linecap:round}

.reader-mode-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin:4px 16px 10px;
  padding:4px;
  border-radius:12px;
  background:#242424;
}
.reader-mode-switch button{
  min-height:40px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}
.reader-mode-switch button[aria-pressed="true"]{background:var(--button-hover);color:var(--text)}

.reader-toc-list{
  margin:0;
  padding:0 8px 12px;
  list-style:none;
  overflow-y:auto;
  overscroll-behavior:contain;
  counter-reset:toc;
}
.reader-toc-list button{
  display:flex;
  width:100%;
  gap:10px;
  padding:10px 10px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:15px;
  line-height:1.3;
  text-align:left;
  cursor:pointer;
}
.reader-toc-list button:hover,
.reader-toc-list button:focus-visible{background:#242424}
.reader-toc-list .num{flex:0 0 2em;color:var(--muted);text-align:right}
.reader-toc-list [aria-current="true"]{background:var(--button)}
.reader-toc-list [aria-current="true"] .num{color:var(--accent)}

.reader-modal{
  width:100%;
  max-width:400px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
}
.reader-modal h2{margin:0 0 14px;font-size:21px}
.reader-choice{
  display:flex;
  flex-direction:column;
  width:100%;
  gap:3px;
  margin-bottom:10px;
  padding:14px;
  border:0;
  border-radius:14px;
  background:var(--button);
  color:var(--text);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.reader-choice:hover,.reader-choice:focus-visible{background:var(--button-hover)}
.reader-choice strong{font-size:17px}
.reader-choice span{color:var(--muted);font-size:14px}
.reader-modal-note{margin:4px 0 0;color:var(--muted);font-size:13px}

/* На узком экране выравнивание по ширине даёт дыры между словами */
@media (max-width:480px){
  .reader-page{text-align:left}
}

@media (min-width:700px){
  :root{--font-size:19px}
}
@media (max-width:360px){
  :root{--font-size:17px}
  .reader-btn{font-size:14px}
}