/* ===================== Ilm for Kids — Story Library ===================== */
.library-page{background:var(--cream);}

.lib-hero{max-width:900px;margin:0 auto;padding:3.5rem 6vw 1.4rem;text-align:center;}
.lib-hero .eyebrow{font-size:.78rem;letter-spacing:.06em;font-weight:700;color:var(--gold-dark);}
.lib-hero h1{font-family:'Fredoka',sans-serif;font-size:clamp(2.2rem,5vw,3.2rem);color:var(--night);margin:.5rem 0;}
.lib-hero h1 span{color:var(--gold-dark);}
.lib-hero p{font-size:1.05rem;color:var(--ink-soft);max-width:620px;margin:0 auto 1.4rem;}

.lib-progress{max-width:420px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1.3rem;}
.lib-progress b{color:var(--night);font-family:'Fredoka',sans-serif;font-weight:600;}
.lib-bar{height:10px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:.6rem;}
.lib-bar i{display:block;height:100%;background:var(--gold);border-radius:99px;transition:width .4s;}

/* ---------- Shelf filters ---------- */
.lib-filters{max-width:1100px;margin:1.6rem auto 0;padding:0 6vw;display:flex;gap:.55rem;flex-wrap:wrap;justify-content:center;}
.lib-filter{
  background:var(--paper);border:1.5px solid var(--line);border-radius:999px;
  padding:.5rem 1.1rem;font-weight:700;font-size:.88rem;color:var(--ink-soft);
  font-family:inherit;cursor:pointer;transition:.15s;
}
.lib-filter:hover{border-color:var(--gold);}
.lib-filter.active{background:var(--night);border-color:var(--night);color:var(--cream);}

/* ---------- Book shelf ---------- */
.lib-shelf{max-width:1100px;margin:0 auto;padding:2rem 6vw 5rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1.6rem 1.3rem;}
.book{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;text-align:left;}
.book.hidden{display:none;}
.book-cover{
  position:relative;aspect-ratio:3/4;border-radius:8px 16px 16px 8px;overflow:hidden;
  background:var(--c);color:#fff;display:flex;flex-direction:column;justify-content:space-between;
  padding:1.1rem 1rem 1rem 1.5rem;
  box-shadow:0 6px 16px rgba(31,58,92,.12), inset 7px 0 0 rgba(0,0,0,.12);
  transition:transform .2s ease, box-shadow .2s ease;
}
.book-cover::after{ /* soft page edge */
  content:"";position:absolute;right:0;top:6px;bottom:6px;width:5px;border-radius:0 6px 6px 0;
  background:repeating-linear-gradient(180deg,#fff 0 2px,#EFE6D4 2px 4px);opacity:.9;
}
.book:hover .book-cover,.book:focus-visible .book-cover{transform:translateY(-5px) rotate(-1deg);box-shadow:0 14px 26px rgba(31,58,92,.16), inset 7px 0 0 rgba(0,0,0,.12);}
.book-shelf-tag{font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.85;}
.book-icon{
  width:76px;height:76px;border-radius:50%;margin:.4rem auto;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.2);font-size:2.2rem;color:#fff;
}
.book-pic{display:block;margin:.5rem -.5rem .6rem -.9rem;border-radius:10px;overflow:hidden;box-shadow:0 3px 8px rgba(0,0,0,.18);border:3px solid rgba(255,255,255,.85);background:#fff;}
.book-pic svg{display:block;width:100%;height:auto;aspect-ratio:400/250;}
.page-pic{width:100%;max-width:600px;border-radius:20px;overflow:hidden;margin:0 auto 1.4rem;box-shadow:0 8px 22px rgba(31,58,92,.14);border:4px solid #fff;background:#fff;}
.page-pic svg{display:block;width:100%;height:auto;aspect-ratio:400/250;}
.book-title{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.18rem;line-height:1.2;color:#fff;}
.book-read{
  position:absolute;top:10px;right:14px;background:#fff;color:#2F5B3E;border-radius:999px;
  font-size:.7rem;font-weight:700;padding:.2rem .55rem;display:none;align-items:center;gap:.25rem;
}
.book.is-read .book-read{display:inline-flex;}
.book-blurb{display:block;margin-top:.7rem;color:var(--ink-soft);font-size:.86rem;line-height:1.4;}

/* ---------- Reader ---------- */
.reader{max-width:820px;margin:0 auto;padding:1.6rem 5vw 4rem;}
.reader-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap;}
.reader-btn{
  display:inline-flex;align-items:center;gap:.45rem;background:var(--paper);border:1px solid var(--line);
  color:var(--night);font-weight:700;padding:.55rem 1.1rem;border-radius:999px;cursor:pointer;font-family:inherit;font-size:.9rem;
}
.reader-btn:hover{border-color:var(--gold);}
.reader-btn.listening{background:var(--night);border-color:var(--night);color:var(--cream);}
.reader-title{font-family:'Fredoka',sans-serif;font-weight:600;color:var(--night);font-size:1.05rem;text-align:center;flex:1;min-width:160px;}

.page{
  background:var(--paper);border:1px solid var(--line);border-radius:24px;
  box-shadow:0 10px 28px rgba(31,58,92,.07);padding:1.6rem 1.6rem 2rem;text-align:center;min-height:430px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  animation:pageIn .3s ease;
}
@keyframes pageIn{from{opacity:0;transform:translateX(12px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){ .page{animation:none;} }
.page-art{
  width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:4.2rem;color:var(--c);background:var(--cbg);margin-bottom:1.6rem;
}
.page-text{font-size:1.4rem;line-height:1.7;color:var(--ink);font-weight:600;max-width:560px;margin:0 auto;}
.page-text .word{border-radius:6px;transition:background .1s;}
.page-text .word.saying{background:#FFE993;box-shadow:0 0 0 .1em #FFE993;}

.page-dua{margin-top:1.3rem;background:var(--cbg);border-radius:16px;padding:1rem 1.3rem;max-width:520px;}
.page-dua .ar{font-family:'Amiri',serif;font-size:1.7rem;color:var(--night);line-height:1.9;margin:0;max-width:none;}
.page-dua .tr{font-style:italic;color:var(--ink-soft);margin:.2rem auto 0;font-size:.98rem;}
.page-dua .en{color:var(--night);font-weight:700;margin:.2rem auto 0;font-size:.98rem;}

.page-link{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1.3rem;background:var(--night);color:var(--cream);
  padding:.7rem 1.3rem;border-radius:999px;font-weight:700;text-decoration:none;
}
.page-link:hover{background:var(--night-2);}

.reader-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.2rem;}
.turn{
  width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;font-size:1.4rem;
  background:var(--night);color:var(--cream);display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 0 var(--night-2);transition:transform .12s;
}
.turn:hover{transform:translateY(-2px);}
.turn:disabled{opacity:.25;cursor:default;transform:none;}
.dots{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:center;}
.dot{width:11px;height:11px;border-radius:50%;background:var(--line);border:0;padding:0;cursor:pointer;}
.dot.on{background:var(--gold-dark);transform:scale(1.25);}

/* The End page */
.end-title{font-family:'Fredoka',sans-serif;font-size:2.2rem;color:var(--night);margin:0 0 .4rem;}
.end-q{font-weight:700;color:var(--night);font-size:1.15rem;margin:1rem auto .8rem;}
.end-opts{display:grid;gap:.6rem;width:100%;max-width:440px;margin:0 auto;}
.end-opt{
  background:var(--cream);border:2px solid var(--line);border-radius:14px;padding:.85rem 1rem;
  font-weight:700;font-size:1.02rem;color:var(--night);cursor:pointer;font-family:inherit;text-align:left;
}
.end-opt:hover:not(:disabled){border-color:var(--gold);}
.end-opt.correct{background:#E4F0E7;border-color:#6E9C7D;color:#2F5B3E;}
.end-opt.wrong{background:#FBE7DA;border-color:#E2946B;}
.end-feedback{min-height:1.6rem;font-weight:700;margin-top:.8rem;color:#2F5B3E;}
.done-btn{
  margin-top:1rem;background:#6E9C7D;color:#fff;border:0;border-radius:999px;padding:.85rem 1.6rem;
  font-weight:700;font-size:1rem;cursor:pointer;font-family:inherit;box-shadow:0 4px 0 #4C7A5A;
}
.done-btn.done{background:#CFE4D6;color:#2F5B3E;box-shadow:none;}
.next-book{margin-top:1rem;}

@media(max-width:600px){
  .lib-shelf{grid-template-columns:repeat(2,1fr);gap:1.2rem .9rem;}
  .book-icon{width:58px;height:58px;font-size:1.7rem;}
  .book-title{font-size:1rem;}
  .page{padding:1.6rem 1.1rem;min-height:380px;}
  .page-art{width:112px;height:112px;font-size:3.2rem;}
  .page{padding:1rem .9rem 1.6rem;}
  .page-pic{border-radius:14px;border-width:3px;margin-bottom:1rem;}
  .book-pic{margin:.4rem -.4rem .5rem -.8rem;}
  .page-text{font-size:1.2rem;}
  .turn{width:50px;height:50px;}
}