/* ============================================================
   Designový systém „knížky" — vytažen 1:1 ze <style> knížek
   a rozšířen o domovskou stránku + navigaci čtečky.
   Fonty Nunito + Caveat, barevné tokeny, layout, animace, tisk.
   ============================================================ */
:root{
  --paper:#FFF7EC; --paper-edge:#F1E2CC;
  --ink:#3A2E28; --ink-soft:#7A6757;
  --gold:#F6A623; --gold-deep:#E5870C;
  --coral:#F2654F; --grass:#6FC36B;
  --sky:#BFE7F2;
  --shadow:rgba(58,46,40,.16);
  /* konstantní výška textové části → knížka má vždy stejnou velikost
     a listovací šipky neposkakují; škáluje se podle výšky okna */
  --text-h:clamp(200px, 32dvh, 320px);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Nunito',system-ui,sans-serif;
  color:var(--ink);
  min-height:100dvh;
  background:
    radial-gradient(120% 80% at 50% -10%, #FFF3D6 0%, #FCE8C4 38%, #F6D9AE 100%);
  -webkit-font-smoothing:antialiased;
}

/* ---------- pohled: čtečka (jedna knížka na střed) ---------- */
.reader-view{
  min-height:100dvh;
  display:flex; flex-direction:column; align-items:center;
  padding:14px 18px 24px;
  gap:12px;
}

.book{
  width:min(540px, 100%);
  background:var(--paper);
  border:3px solid #fff;
  border-radius:30px;
  box-shadow:0 22px 50px -18px var(--shadow), 0 4px 0 var(--paper-edge);
  overflow:hidden;
  position:relative;
  display:flex; flex-direction:column;
}

.stage{position:relative;}
.page{
  transition:opacity .19s ease, transform .19s ease;
  display:flex; flex-direction:column;
}
.page.swap-left{opacity:0; transform:translateX(-22px);}
.page.swap-right{opacity:0; transform:translateX(22px);}

.illus{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  background:#EAF6FA;
  overflow:hidden;
}
.illus svg{display:block; width:100%; height:100%;}

.pageno{
  position:absolute; top:12px; right:16px;
  z-index:3;
  font-weight:800; font-size:13px;
  color:#fff;
  background:rgba(58,46,40,.32);
  padding:3px 11px; border-radius:999px;
  backdrop-filter:blur(2px);
}

.text{
  flex:0 0 auto;
  height:var(--text-h);
  min-height:0;               /* zruší flexbox min-height:auto → výška je pevná */
  overflow-y:auto;
  display:flex; flex-direction:column; justify-content:center;
  padding:18px 26px;
}
.ptitle{
  font-weight:900;
  font-size:25px;
  line-height:1.12;
  margin:0 0 10px;
  color:var(--gold-deep);
  letter-spacing:.2px;
}
.ptext{
  font-size:19px;
  line-height:1.5;
  font-weight:600;
  margin:0;
  color:var(--ink);
}
.ptext + .ptext{margin-top:12px;}
.ptext .say{color:var(--grass); font-weight:800;}
.ptext .ball-say{color:var(--gold-deep); font-weight:800;}
.ptext .coach-say{color:#37589C; font-weight:800;}
.ptext .gp{color:#9B5B4A; font-weight:800;}
.ptext b{color:var(--coral);}

/* placeholder pro zatím neilustrované pohádky */
.illus.placeholder .scene-label{
  position:absolute; left:0; right:0; bottom:12px;
  text-align:center;
  font-family:'Caveat',cursive; font-weight:700; font-size:20px;
  color:var(--gold-deep);
}

/* obálka */
.page.cover .text{padding:24px 26px 22px; text-align:center;}
.page.cover .ptitle{
  font-size:38px; line-height:1.02; color:var(--coral);
  text-shadow:0 2px 0 #fff, 0 3px 0 var(--paper-edge);
  margin-bottom:8px;
}
.cover-sub{
  font-size:16px; font-weight:700; color:var(--ink-soft); margin:0 0 12px;
}
.cover-for{
  display:inline-block;
  font-family:'Caveat',cursive; font-size:23px; font-weight:700;
  color:var(--gold-deep);
  background:#FFF0CF; border:2px dashed var(--gold);
  padding:2px 16px; border-radius:14px;
}

/* stránka s ponaučením */
.page.moral .moral-quote{
  font-family:'Caveat',cursive;
  font-size:30px; font-weight:700; line-height:1.25;
  color:var(--coral);
  text-align:center;
  margin:6px 4px 0;
}
.page.moral .ptext{text-align:center; font-size:18px;}
.the-end{
  display:block; text-align:center; margin-top:14px;
  font-family:'Caveat',cursive; font-size:26px; color:var(--gold-deep); font-weight:700;
}

/* ovládání čtečky */
.controls{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:6px 18px 18px;
}
.nav{
  appearance:none; border:none; cursor:pointer;
  width:58px; height:58px; border-radius:50%;
  background:var(--gold); color:#fff;
  font-size:26px; font-weight:900; line-height:1;
  box-shadow:0 6px 0 var(--gold-deep);
  transition:transform .08s ease, box-shadow .08s ease, background .15s;
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}
.nav:hover{background:#FFB43C;}
.nav:active{transform:translateY(4px); box-shadow:0 2px 0 var(--gold-deep);}
.nav:disabled{background:#E7D8C2; box-shadow:0 6px 0 #D4C3A8; cursor:default; color:#fff;}
.nav:focus-visible{outline:3px solid var(--coral); outline-offset:3px;}

.dots{display:flex; gap:7px; flex-wrap:wrap; justify-content:center; flex:1;}
.dot{
  width:11px; height:11px; border-radius:50%;
  background:var(--paper-edge); border:none; padding:0; cursor:pointer;
  transition:transform .15s, background .15s;
}
.dot:hover{background:var(--gold);}
.dot.on{background:var(--coral); transform:scale(1.35);}
.dot:focus-visible{outline:2px solid var(--coral); outline-offset:2px;}

.hint{
  text-align:center; font-size:13px; color:var(--ink-soft);
  font-weight:700; padding:0 0 14px; opacity:.8;
}

/* lišta nad knížkou (zpět na knihovnu) */
.reader-bar{
  width:100%; max-width:540px;
  display:flex; align-items:center; gap:10px;
}
.back-btn{
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Nunito',sans-serif; font-weight:800; font-size:15px;
  color:var(--gold-deep);
  background:#FFF3D6; border:2px solid var(--paper-edge);
  padding:8px 16px; border-radius:999px;
  box-shadow:0 3px 0 var(--paper-edge);
  transition:transform .08s ease, box-shadow .08s ease, background .15s;
}
.back-btn:hover{background:#FFEBC0;}
.back-btn:active{transform:translateY(2px); box-shadow:0 1px 0 var(--paper-edge);}
.back-btn:focus-visible{outline:3px solid var(--coral); outline-offset:2px;}

/* checkbox „přečteno" v liště čtečky */
.read-toggle-bar{
  margin-left:auto;
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Nunito',sans-serif; font-weight:800; font-size:14px;
  color:var(--ink-soft);
  background:#fff; border:2px solid var(--paper-edge);
  padding:7px 14px; border-radius:999px;
  box-shadow:0 3px 0 var(--paper-edge);
  transition:transform .08s ease, box-shadow .08s ease, background .15s, color .15s;
}
.read-toggle-bar .read-check{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--paper-edge); color:transparent; font-size:12px; font-weight:900;
}
.read-toggle-bar:hover{background:#FFF7E8;}
.read-toggle-bar:active{transform:translateY(2px); box-shadow:0 1px 0 var(--paper-edge);}
.read-toggle-bar:focus-visible{outline:3px solid var(--coral); outline-offset:2px;}
.read-toggle-bar.on{background:var(--grass); color:#fff; border-color:var(--grass); box-shadow:0 3px 0 #4e9f4a;}
.read-toggle-bar.on .read-check{border-color:#fff; color:#fff;}

.home-progress{font-weight:800; font-size:14px; color:var(--ink-soft); margin:10px 0 0;}

/* ---------- pohled: domovská knihovna ---------- */
.home{
  max-width:1080px; margin:0 auto;
  padding:26px 20px 60px;
}
.home-head{text-align:center; margin:6px 0 30px;}
.home-title{
  font-weight:900; font-size:clamp(30px,6vw,46px); line-height:1.02;
  color:var(--coral); margin:0;
  text-shadow:0 2px 0 #fff, 0 3px 0 var(--paper-edge);
}
.home-title .lion{color:var(--gold-deep);}
.home-sub{
  font-family:'Caveat',cursive; font-weight:700;
  font-size:clamp(19px,3.5vw,24px); color:var(--ink-soft);
  margin:8px 0 0;
}

.cat{margin:0 0 34px;}
.cat-head{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  border-bottom:3px dashed var(--paper-edge);
  padding-bottom:8px; margin-bottom:16px;
}
.cat-title{font-weight:900; font-size:23px; color:var(--gold-deep); margin:0;}
.cat-theme{font-size:14px; font-weight:700; color:var(--ink-soft);}

.cards{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
}
.card{
  appearance:none; text-align:left; cursor:pointer;
  display:flex; flex-direction:column;
  background:var(--paper);
  border:3px solid #fff; border-radius:20px;
  box-shadow:0 12px 26px -14px var(--shadow), 0 3px 0 var(--paper-edge);
  overflow:hidden; padding:0;
  transition:transform .12s ease, box-shadow .12s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 20px 34px -16px var(--shadow), 0 3px 0 var(--paper-edge);}
.card:focus-visible{outline:3px solid var(--coral); outline-offset:3px;}
.card-illus{
  position:relative;
  width:100%; aspect-ratio:4/3; background:#EAF6FA;
}
.card-illus svg{display:block; width:100%; height:100%;}
.card-wrap{position:relative; display:flex;}
.card-wrap > .card{flex:1 1 auto; width:100%;}

/* checkbox „přečteno" na kartě (mimo odkaz, aby nenavigoval) */
.read-toggle{
  position:absolute; top:9px; right:9px; z-index:4;
  width:30px; height:30px; border-radius:50%;
  border:2px solid #fff; padding:0; cursor:pointer;
  background:rgba(58,46,40,.30); backdrop-filter:blur(2px);
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px -1px var(--shadow);
  transition:background .15s, transform .1s;
}
.read-toggle .read-check{font-size:16px; font-weight:900; line-height:1; opacity:.5;}
.read-toggle:hover{transform:scale(1.08);}
.read-toggle:focus-visible{outline:3px solid var(--coral); outline-offset:2px;}
.card-wrap.is-read .read-toggle{background:var(--grass);}
.card-wrap.is-read .read-toggle .read-check{opacity:1;}

.read-ribbon{
  position:absolute; top:12px; left:-5px; z-index:4; display:none;
  font-size:11px; font-weight:800; color:#fff;
  background:var(--grass); padding:3px 10px; border-radius:4px;
  box-shadow:0 2px 0 #4e9f4a;
}
.card-wrap.is-read .read-ribbon{display:inline-block;}
.card-wrap.is-read .card{opacity:.72;}
.card-wrap.is-read .card:hover{opacity:1;}

.card-body{padding:13px 15px 15px;}
.card-title{
  font-weight:900; font-size:18px; line-height:1.14;
  color:var(--ink); margin:2px 0 6px;
}
.card-moral{
  font-family:'Caveat',cursive; font-weight:700; font-size:16px;
  color:var(--gold-deep); line-height:1.15; margin:0;
}

/* ---------- animace ---------- */
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}}
@keyframes twinkle{0%,100%{opacity:.25; transform:scale(.7)} 50%{opacity:1; transform:scale(1.1)}}
@keyframes spin{to{transform:rotate(360deg)}}
.sunrays{transform-box:fill-box; transform-origin:center; animation:spin 32s linear infinite;}
.floaty{transform-box:fill-box; transform-origin:center; animation:bob 3s ease-in-out infinite;}
.spark{animation:twinkle 2.2s ease-in-out infinite;}
.spark:nth-child(2n){animation-delay:.6s}
.spark:nth-child(3n){animation-delay:1.1s}

@media (prefers-reduced-motion: reduce){
  .sunrays,.floaty,.spark{animation:none;}
  .page{transition:opacity .12s ease;}
  .card{transition:none;}
}

/* tablet */
@media (min-width:760px){
  :root{ --text-h:clamp(230px, 30dvh, 340px); }
  .book{ width:min(580px, 100%); }
  .home{ padding:34px 26px 70px; }
}

/* telefon */
@media (max-width:520px){
  .reader-view{ padding:8px 8px 16px; }
  .home{ padding:18px 12px 44px; }
  .cards{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
  .text{ padding:14px 18px; }
  .ptitle{ font-size:22px; }
  .ptext{ font-size:18px; }
  .page.cover .ptitle{ font-size:30px; }
  .cover-sub{ font-size:15px; }
  .nav{ width:52px; height:52px; font-size:23px; }
  .controls{ padding:6px 12px 14px; gap:8px; }
  .reader-bar{ flex-wrap:wrap; }
}

@media (max-width:360px){
  .card-title{ font-size:16px; }
  .nav{ width:46px; height:46px; }
}

/* ---------- tisk: opravdová minikniha, jedna scéna na stránku ---------- */
@media print{
  body{background:#fff;}
  .reader-view{padding:0; display:block;}
  .reader-bar,.controls,.hint,.pageno,.dots{display:none !important;}
  .book{max-width:none; box-shadow:none; border:none; border-radius:0;}
  .stage{position:static;}
  .page{position:static !important; opacity:1 !important; transform:none !important;
    page-break-after:always; padding-top:8mm;}
  .illus{aspect-ratio:auto; height:120mm;}
}