/* Сказки - читалка для телефона. Одна колонка, крупный шрифт, тёплая бумага. */

:root{
  --fs: 19px;              /* базовый кегль, меняется кнопками Aa */
  --measure: 34em;
  --paper:#fbf6ec; --paper-2:#f4ecdd; --ink:#2b2318; --ink-2:#6c6152;
  --accent:#a8452a; --line:#e3d8c4; --shadow:0 2px 14px rgba(80,60,30,.10);
}
html[data-theme="night"]{
  --paper:#14120f; --paper-2:#1d1a16; --ink:#ded4c4; --ink-2:#9b9080;
  --accent:#e2a179; --line:#312b23; --shadow:0 2px 14px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="day"]){
    --paper:#14120f; --paper-2:#1d1a16; --ink:#ded4c4; --ink-2:#9b9080;
    --accent:#e2a179; --line:#312b23; --shadow:0 2px 14px rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box}
/* кегль держим на html: тогда все размеры в rem растут вместе с выбором читателя */
html{-webkit-text-size-adjust:100%; font-size:var(--fs); scroll-padding-top:4rem}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'PT Serif', Georgia, 'Times New Roman', serif;
  font-size:1rem; line-height:1.62;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}

/* ---------- шапка ---------- */
.bar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; padding-top:calc(.55rem + env(safe-area-inset-top));
  background:color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.bar__title{
  flex:1; min-width:0; font-size:.82rem; font-weight:700; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink-2);
}
.btn{
  appearance:none; border:1px solid var(--line); background:var(--paper-2);
  color:var(--ink); border-radius:999px; cursor:pointer;
  min-width:2.35rem; height:2.35rem; padding:0 .7rem;
  font:inherit; font-size:.82rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; gap:.3rem;
}
.btn:active{transform:scale(.96)}
.progress{position:fixed; top:0; left:0; height:3px; background:var(--accent); width:0; z-index:30; transition:width .1s linear}

/* ---------- главная ---------- */
.wrap{max-width:52rem; margin:0 auto; padding:0 1rem 4rem}
.hero{padding:1.6rem 0 .6rem; text-align:center}
.hero h1{margin:0; font-size:2rem; letter-spacing:.01em}
.hero p{margin:.35rem 0 0; color:var(--ink-2); font-size:.92rem}

.chips{display:flex; gap:.4rem; overflow-x:auto; padding:.9rem 0 .3rem; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto; border:1px solid var(--line); background:var(--paper-2);
  border-radius:999px; padding:.42rem .85rem; font-size:.85rem; color:var(--ink-2); cursor:pointer;
}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}

.resume{
  display:none; align-items:center; gap:.8rem; margin:.9rem 0 .2rem;
  padding:.75rem .85rem; border:1px solid var(--line); border-radius:1rem;
  background:var(--paper-2); box-shadow:var(--shadow);
}
.resume img{width:3.2rem; height:3.2rem; border-radius:.7rem; object-fit:cover; flex:0 0 auto}
.resume b{display:block; font-size:.95rem}
.resume span{font-size:.8rem; color:var(--ink-2)}

.grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:.9rem; margin-top:.9rem}
@media (min-width:600px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{border-radius:1rem; overflow:hidden; background:var(--paper-2); box-shadow:var(--shadow)}
.card__img{aspect-ratio:2/3; width:100%; object-fit:cover; background:
  linear-gradient(150deg, var(--line), var(--paper-2))}
.card__body{padding:.6rem .7rem .75rem}
.card__title{font-size:.98rem; font-weight:700; line-height:1.25}
.card__meta{margin-top:.2rem; font-size:.76rem; color:var(--ink-2)}
.card__done{color:var(--accent)}

/* ---------- страница сказки ---------- */
.tale{max-width:var(--measure); margin:0 auto; padding:0 1.1rem 5rem}
/* обложку не режем: у неё есть орнаментальная рамка, кроп её убивает */
.tale__hero{display:block; width:auto; max-width:100%; max-height:56vh;
  margin:1rem auto 1.4rem; border-radius:1rem; box-shadow:var(--shadow)}
div.tale__hero{width:100%; max-width:22rem}
.tale h1{font-size:1.85rem; line-height:1.2; margin:.2rem 0 .35rem; text-wrap:balance}
.tale__meta{color:var(--ink-2); font-size:.85rem; margin-bottom:1.5rem}
.tale p{margin:0 0 1.05em; hyphens:auto}
.tale p::first-letter{}
.tale .lead::first-letter{
  float:left; font-size:3.1em; line-height:.84; padding:.06em .1em 0 0; color:var(--accent); font-weight:700;
}
.tale h2{font-size:1.15rem; margin:2.2rem 0 1rem; color:var(--accent); text-align:center; font-weight:700}
.verse{white-space:pre-wrap; margin:0 0 1.25em; line-height:1.5; padding-left:.6em}
figure{margin:1.8rem -.35rem}
figure img{border-radius:1rem; box-shadow:var(--shadow)}

.tale__end{margin-top:2.5rem; padding-top:1.4rem; border-top:1px solid var(--line); text-align:center}
.tale__end p{color:var(--ink-2); font-size:.9rem}
.next{display:flex; gap:.8rem; align-items:center; text-align:left; margin-top:1rem;
  padding:.7rem; border:1px solid var(--line); border-radius:1rem; background:var(--paper-2)}
.next img{width:3.4rem; height:5.1rem; border-radius:.6rem; object-fit:cover; flex:0 0 auto}
.next b{display:block}
.next span{font-size:.8rem; color:var(--ink-2)}

/* ---------- панель настроек ---------- */
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:40; transform:translateY(110%);
  transition:transform .22s ease; background:var(--paper-2);
  border-top:1px solid var(--line); border-radius:1.2rem 1.2rem 0 0;
  padding:1rem 1rem calc(1.2rem + env(safe-area-inset-bottom));
  box-shadow:0 -8px 30px rgba(0,0,0,.18);
}
.sheet[data-open="1"]{transform:translateY(0)}
.sheet__row{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin:.5rem 0}
.sheet__row > span{font-size:.9rem; color:var(--ink-2)}
.seg{display:flex; gap:.3rem}
.seg .btn[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:35; opacity:0; pointer-events:none; transition:opacity .2s}
.scrim[data-open="1"]{opacity:1; pointer-events:auto}

.foot{text-align:center; color:var(--ink-2); font-size:.75rem; padding:2rem 1rem 1rem; line-height:1.5}