/* ============================================================
   CLIRIUM · book.clirium.me
   Движок читалки и аудиоплеера — самодостаточные компоненты.
   Оформление сайта (шапка, лендинг) делает дизайн жены отдельно;
   этот файл отвечает только за overlay-читалку и плеер.
   ============================================================ */

:root{
  --rd-bg:#faf8f4;
  --rd-fg:#1c1a17;
  --rd-muted:#6b6459;
  --rd-line:#e5ded2;
  --rd-accent:#8a6d3b;
  --rd-panel:#fffdf9;
  --rd-fontsize:19px;
  --rd-maxw:70ch;
}
/* Ночной режим читалки (переключатель внутри листа) */
.rd-overlay[data-theme="dark"]{
  --rd-bg:#16140f;
  --rd-fg:#e9e3d6;
  --rd-muted:#9a927f;
  --rd-line:#2c281f;
  --rd-accent:#c8a86a;
  --rd-panel:#1d1a14;
}

/* нет горизонтального сдвига на всём сайте */
html,body{overflow-x:clip;}
body.rd-lock{overflow:hidden;}

/* ---------- OVERLAY-ЛИСТ (единый паттерн для читалки) ---------- */
.rd-overlay{
  position:fixed; inset:0; z-index:1000;
  display:none; flex-direction:column;
  background:var(--rd-bg); color:var(--rd-fg);
  font-family:Georgia,"Times New Roman",serif;
}
.rd-overlay.is-open{display:flex;}

.rd-bar{
  flex:0 0 auto;
  display:flex; align-items:center; gap:.5rem;
  padding:clamp(.5rem,2vw,.9rem) clamp(.6rem,3vw,1.2rem);
  border-bottom:1px solid var(--rd-line);
  background:var(--rd-panel);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.rd-bar .rd-title{
  font-weight:600; font-size:.95rem; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; margin-right:auto;
}
.rd-bar button, .rd-bar select{
  font:inherit; color:var(--rd-fg);
  background:transparent; border:1px solid var(--rd-line);
  border-radius:8px; padding:.4rem .6rem; cursor:pointer;
  line-height:1;
}
.rd-bar button:hover{border-color:var(--rd-accent);}
.rd-bar select{max-width:min(48vw,320px);}
.rd-close{font-size:1.1rem; padding:.4rem .7rem;}

.rd-body{
  flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch;
  padding:clamp(1.2rem,5vw,3rem) clamp(1rem,5vw,2rem);
}
.rd-content{
  max-width:var(--rd-maxw); margin:0 auto;
  font-size:var(--rd-fontsize); line-height:1.72;
}
.rd-content .rd-chapter-head{
  font-family:system-ui,sans-serif; margin:0 0 1.6rem;
  padding-bottom:1rem; border-bottom:1px solid var(--rd-line);
}
.rd-content .rd-part{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--rd-accent); font-weight:600;
}
.rd-content h2{font-size:1.5rem; line-height:1.25; margin:.4rem 0 .2rem;}
.rd-content .rd-sub{color:var(--rd-muted); font-style:italic; font-size:1.05rem;}
.rd-content h3{
  font-family:system-ui,sans-serif; font-size:.8rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rd-accent);
  margin:2.2rem 0 .6rem;
}
.rd-content p{margin:0 0 1.1rem; text-align:justify; hyphens:auto;}
.rd-content blockquote{
  margin:1.4rem 0; padding:.2rem 0 .2rem 1.2rem;
  border-left:3px solid var(--rd-accent);
  color:var(--rd-muted); font-style:italic;
}
.rd-content ul{margin:0 0 1.1rem 1.1rem; padding:0;}
.rd-content li{margin:.35rem 0;}
.rd-content hr{border:0; text-align:center; margin:1.8rem 0;}
.rd-content hr::before{content:"* * *"; color:var(--rd-muted); letter-spacing:.4em;}

.rd-foot{
  flex:0 0 auto; display:flex; align-items:center; gap:.6rem;
  padding:.6rem clamp(.6rem,3vw,1.2rem);
  border-top:1px solid var(--rd-line); background:var(--rd-panel);
  font-family:system-ui,sans-serif; font-size:.85rem;
}
.rd-foot .rd-progress{margin:0 auto; color:var(--rd-muted);}
.rd-foot button{
  font:inherit; background:transparent; color:var(--rd-fg);
  border:1px solid var(--rd-line); border-radius:8px;
  padding:.45rem .8rem; cursor:pointer;
}
.rd-foot button:disabled{opacity:.35; cursor:default;}

/* ---------- АУДИОПЛЕЕР ---------- */
.pl{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex; gap:1rem; align-items:center;
  padding:1rem; border:1px solid var(--rd-line); border-radius:16px;
  background:var(--rd-panel); max-width:640px;
}
.pl-cover{width:88px;height:88px;border-radius:12px;object-fit:cover;flex:0 0 auto;background:var(--rd-line);}
.pl-main{flex:1 1 auto; min-width:0;}
.pl-name{font-weight:600; margin-bottom:.5rem;}
.pl-controls{display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem;}
.pl-btn{
  border:1px solid var(--rd-line); background:transparent; color:var(--rd-fg);
  border-radius:50%; width:44px;height:44px; cursor:pointer; font-size:1rem;
  display:grid; place-items:center;
}
.pl-btn.pl-play{width:52px;height:52px; background:var(--rd-accent); color:#fff; border-color:transparent;}
.pl-seek{background:transparent;border:none;color:var(--rd-muted);cursor:pointer;font-size:.8rem;}
.pl-bar{height:6px;border-radius:6px;background:var(--rd-line);cursor:pointer;position:relative;}
.pl-bar-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:6px;background:var(--rd-accent);}
.pl-time{display:flex;justify-content:space-between;font-size:.78rem;color:var(--rd-muted);margin-top:.3rem;}

/* Закреплённый мини-плеер снизу */
.pl-mini{
  position:fixed; left:0; right:0; bottom:0; z-index:900;
  display:none; align-items:center; gap:.7rem;
  padding:.55rem clamp(.6rem,3vw,1rem);
  background:var(--rd-panel); border-top:1px solid var(--rd-line);
  font-family:system-ui,sans-serif;
  box-shadow:0 -6px 20px rgba(0,0,0,.08);
}
.pl-mini.is-on{display:flex;}
.pl-mini .pl-cover{width:46px;height:46px;border-radius:8px;}
.pl-mini .pl-mid{flex:1 1 auto; min-width:0;}
.pl-mini .pl-name{font-size:.85rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pl-mini .pl-bar{margin-top:.35rem;}
.pl-mini .pl-btn{width:38px;height:38px;}
.pl-mini .pl-btn.pl-play{width:42px;height:42px;}

@media(max-width:520px){
  .pl{flex-direction:column;align-items:stretch;}
  .pl-cover{width:100%;height:200px;}
  .pl-mini .pl-time,.pl-mini .pl-seek{display:none;}
}