:root{
  --sky:#1a6fa8; --sky2:#3d9bd1; --sand:#f4c87a; --gold:#ffd740;
  --accent:#e8530a; --accent2:#c8420a; --grass:#7ab648; --correct:#38c172;
  --cream:#fff8dc; --card:#fffdf0; --text:#2c1a00; --brown:#5a3a0a;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:'Nunito',-apple-system,'Segoe UI',sans-serif;
  background:linear-gradient(180deg,var(--sky) 0%,var(--sky2) 40%,var(--sand) 75%,#c8832a 100%);
  color:var(--text); overflow:hidden; user-select:none; -webkit-user-select:none;
  touch-action:pan-y;
}
/* ---------- screens ---------- */
.screen{position:fixed;inset:0;display:none;flex-direction:column;overflow:hidden;}
.screen.active{display:flex;}
.topbar{
  background:rgba(255,248,220,.97);padding:10px 16px;display:flex;justify-content:space-between;align-items:center;
  border-bottom:4px solid #e8a030;z-index:50;min-height:60px;
}
.topbar h1{font-family:'Righteous',cursive;font-size:1.3rem;color:var(--accent2);}
.icon-btn{background:#ffe0a0;border:3px solid #e8a030;border-radius:50%;width:46px;height:46px;font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.scroll{flex:1;overflow-y:auto;padding:18px 16px 100px;-webkit-overflow-scrolling:touch;}
/* ---------- library ---------- */
.shelf-title{font-family:'Righteous',cursive;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4);font-size:1.6rem;margin:6px 4px 14px;}
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;}
.book-card{background:var(--card);border-radius:18px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.3);cursor:pointer;border:4px solid transparent;transition:transform .15s;}
.book-card:active{transform:scale(.96);}
.book-card img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;}
.book-card .meta{padding:10px 12px;}
.book-card .meta b{display:block;font-size:.95rem;}
.book-card .meta small{color:var(--brown);}
.progress-strip{height:8px;background:#e8dcc0;border-radius:4px;margin-top:8px;overflow:hidden;}
.progress-strip i{display:block;height:100%;background:var(--correct);border-radius:4px;}
/* ---------- reader ---------- */
#readerScreen{background:#222;padding-bottom:calc(72px + env(safe-area-inset-bottom));}
.reader-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#1a1a1a;perspective:1600px;}
.page-img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:-16px 14px 44px rgba(0,0,0,.65),0 10px 40px rgba(0,0,0,.6),inset 10px 0 18px rgba(0,0,0,.22);transition:opacity .3s, transform .3s;transform-origin:left center;}
.page-img.turn{opacity:.08;transform:translateX(-48px) rotateY(-42deg) scale(.98);}
.page-img.turn-back{opacity:.08;transform:translateX(48px) rotateY(42deg) scale(.98);transform-origin:right center;}
.reader-controls{background:rgba(255,248,220,.97);padding:10px 12px;border-top:4px solid #e8a030;display:flex;align-items:center;gap:8px;}
.ctl-btn{background:var(--accent);color:#fff;border:none;border-radius:14px;min-width:52px;height:52px;font-size:1.5rem;cursor:pointer;box-shadow:0 4px 0 #8a2800;display:flex;align-items:center;justify-content:center;}
.ctl-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #8a2800;}
.ctl-btn.blue{background:#1a8ac8;box-shadow:0 4px 0 #0d5a85;}
.ctl-btn.green{background:var(--correct);box-shadow:0 4px 0 #1e7a44;}
.page-dots{flex:1;text-align:center;font-weight:800;color:var(--brown);font-size:.95rem;}
.audio-bar{flex:1;display:flex;align-items:center;gap:8px;}
.audio-bar input[type=range]{flex:1;accent-color:var(--accent);}
/* ---------- games ---------- */
.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.game-tile{background:var(--card);border:4px solid #e8a030;border-radius:20px;padding:22px 12px;text-align:center;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.25);}
.game-tile:active{transform:scale(.95);}
.game-tile .emoji{font-size:3rem;}
.game-tile b{display:block;margin-top:8px;font-size:1.05rem;}
.game-tile small{color:var(--brown);}
/* ---------- modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;display:none;align-items:center;justify-content:center;padding:16px;}
.modal-overlay.active{display:flex;}
.modal-box{background:var(--card);border-radius:24px;padding:24px;width:100%;max-width:560px;max-height:88vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.5);position:relative;}
.modal-box h2{color:var(--accent2);font-family:'Righteous',cursive;text-align:center;margin-bottom:12px;}
.close-x{position:absolute;top:12px;right:12px;background:#ffe0a0;border:none;width:40px;height:40px;border-radius:50%;font-size:1.3rem;cursor:pointer;}
/* ---------- game bits ---------- */
.option-btn{background:#fffbf0;border:4px solid #e8c870;border-radius:16px;padding:16px;font-weight:700;cursor:pointer;margin:6px 0;font-size:1.05rem;font-family:inherit;width:100%;text-align:left;}
.option-btn.correct{background:#d4f5e0;border-color:var(--correct);}
.option-btn.wrong{background:#ffe0e0;border-color:#e3342f;}
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0;}
.mem-card{aspect-ratio:1;background:#e8a030;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;cursor:pointer;}
.mem-card.flipped{background:#fff;border:3px solid #e8a030;}
.mem-card.matched{background:#d4f5e0;border:3px solid var(--correct);cursor:default;}
.btn-primary{background:linear-gradient(135deg,#e8630a,#c8420a);color:#fff;border:none;border-radius:16px;padding:15px 28px;font-family:'Righteous',cursive;font-size:1.15rem;cursor:pointer;box-shadow:0 6px 0 #8a2800;width:100%;margin-top:10px;}
.btn-primary:active{transform:translateY(3px);box-shadow:0 2px 0 #8a2800;}
.btn-primary.blue{background:linear-gradient(135deg,#1a8ac8,#0d5a85);box-shadow:0 6px 0 #083a56;}
.big-input{width:100%;padding:15px;border:4px solid #e8a030;border-radius:14px;font-size:1.15rem;text-align:center;font-family:inherit;margin:10px 0;}
.score-chip{background:var(--gold);border-radius:20px;padding:6px 14px;font-weight:800;}
/* ---------- parent ---------- */
.gate-box{text-align:center;padding:20px 0;}
.parent-row{background:var(--card);border-radius:16px;padding:16px;margin:10px 0;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 12px rgba(0,0,0,.15);}
.parent-row b{font-size:1.05rem;}
.parent-row span{font-size:1.3rem;font-weight:800;color:var(--accent2);}
/* ---------- bottom nav ---------- */
.bottomnav{position:fixed;bottom:0;left:0;right:0;background:rgba(255,248,220,.98);border-top:4px solid #e8a030;display:flex;z-index:500;padding:6px 4px calc(6px + env(safe-area-inset-bottom));}
.bottomnav button{flex:1;background:none;border:none;font-size:.72rem;font-weight:800;color:var(--brown);cursor:pointer;padding:8px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;}
.bottomnav button .ni{font-size:1.6rem;}
.bottomnav button.on{color:var(--accent2);}
/* confetti */
.confetti{position:fixed;top:-20px;width:10px;height:10px;z-index:9999;border-radius:2px;pointer-events:none;animation:cfall linear forwards;}
@keyframes cfall{to{transform:translateY(110vh) rotate(360deg);}}
/* stars toast */
.toast{position:fixed;top:70px;left:50%;transform:translateX(-50%);background:#2c1a00;color:var(--gold);padding:12px 24px;border-radius:30px;font-weight:800;z-index:2000;opacity:0;transition:opacity .3s;pointer-events:none;font-size:1.1rem;}
.toast.show{opacity:1;}
@media (min-width:700px){
  .book-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
  .scroll{padding:24px 32px 110px;}
}
/* ---------- reading quiz ---------- */
.quiz-intro{color:#fff;font-weight:700;margin:0 4px 14px;text-shadow:0 1px 4px rgba(0,0,0,.4);}
.quiz-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.quiz-card{background:var(--card);border:4px solid #e8a030;border-radius:18px;padding:16px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.25);}
.quiz-card:active{transform:scale(.96);}
.quiz-card.done{border-color:var(--correct);}
.quiz-card-title{font-weight:800;font-size:1.05rem;margin-bottom:6px;}
.quiz-card-meta{color:var(--brown);font-size:.85rem;}
.quiz-passage{background:var(--card);border-radius:20px;padding:20px;margin:12px 0;box-shadow:0 6px 16px rgba(0,0,0,.25);}
.quiz-passage h2{font-family:'Righteous',cursive;color:var(--accent2);margin-bottom:8px;}
.quiz-meta{color:var(--brown);font-weight:700;margin-bottom:12px;}
.quiz-text{font-size:18px;line-height:1.7;background:#fffdf5;border:2px solid #e8dcc0;border-radius:12px;padding:16px;margin-bottom:12px;user-select:text;-webkit-user-select:text;}
.quiz-text.dyslexia{font-family:'Comic Sans MS','Chalkboard SE',sans-serif;letter-spacing:.05em;line-height:2;}
.quiz-timer{background:#fff3d6;border-radius:12px;padding:12px;text-align:center;font-weight:700;margin-bottom:12px;}
.quiz-btn{background:var(--accent);color:#fff;border:none;border-radius:16px;padding:14px 28px;font-size:1.1rem;font-weight:800;cursor:pointer;box-shadow:0 4px 0 #8a2800;display:block;margin:12px auto;width:100%;max-width:320px;}
.quiz-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #8a2800;}
.quiz-btn:disabled{background:#ccc;box-shadow:none;cursor:not-allowed;}
.quiz-tools{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.quiz-tool{background:#ffe0a0;border:2px solid #e8a030;border-radius:12px;padding:8px 14px;font-weight:700;cursor:pointer;}
.quiz-q{background:#fffdf5;border:2px solid #e8dcc0;border-radius:14px;padding:16px;margin-bottom:14px;}
.quiz-q-prompt{font-weight:800;font-size:1.05rem;margin-bottom:10px;}
.quiz-opt{display:block;background:#fff;border:2px solid #e8dcc0;border-radius:10px;padding:10px 12px;margin-bottom:8px;cursor:pointer;font-weight:600;}
.quiz-opt input{margin-right:8px;}
.quiz-textarea{width:100%;border:2px solid #e8dcc0;border-radius:10px;padding:12px;font-family:inherit;font-size:1rem;resize:vertical;}
.quiz-feedback{display:none;margin-top:10px;padding:10px;border-radius:10px;font-weight:600;}
.quiz-feedback.show{display:block;background:#fff8e1;}
.fb-good{color:#1e7a44;}
.fb-bad{color:#b71c1c;}
.quiz-results{background:var(--card);border:4px solid var(--gold);border-radius:20px;padding:20px;margin:16px 0;text-align:center;}
.quiz-results h3{font-family:'Righteous',cursive;color:var(--accent2);font-size:1.4rem;margin-bottom:8px;}
.quiz-score{font-size:1.2rem;font-weight:800;margin-bottom:12px;}
.mastery-box{background:var(--card);border-radius:16px;padding:16px;}
.mastery-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-weight:700;font-size:.9rem;}
.mastery-row span:first-child{flex:0 0 120px;text-transform:capitalize;}
.mastery-bar{flex:1;height:12px;background:#e8dcc0;border-radius:6px;overflow:hidden;}
.mastery-bar div{height:100%;background:var(--correct);border-radius:6px;transition:width .3s;}
/* ---------- STEM quest ---------- */
.stem-subjects{display:flex;gap:10px;margin:0 4px 16px;}
.stem-subj{flex:1;background:var(--card);border:3px solid #e8a030;border-radius:14px;padding:12px;font-size:1.1rem;font-weight:800;cursor:pointer;}
.stem-subj.on{background:var(--accent);color:#fff;border-color:#8a2800;}
.stem-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.stem-card{background:var(--card);border:4px solid #e8a030;border-radius:18px;padding:18px 12px;text-align:center;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.25);}
.stem-card:active{transform:scale(.95);}
.stem-card-emoji{font-size:2.5rem;}
.stem-card-name{font-weight:800;margin-top:6px;}
.stem-card-ages{color:var(--brown);font-size:.85rem;}
.stem-hud{display:flex;justify-content:space-between;background:var(--card);border-radius:14px;padding:10px 16px;font-weight:800;margin-bottom:14px;}
.stem-problem{background:var(--card);border-radius:20px;padding:24px;box-shadow:0 6px 16px rgba(0,0,0,.25);}
.stem-q{font-size:1.6rem;font-weight:800;text-align:center;margin-bottom:20px;color:var(--accent2);}
.stem-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.stem-opt{background:#fff;border:3px solid #e8a030;border-radius:14px;padding:16px;font-size:1.2rem;font-weight:800;cursor:pointer;}
.stem-opt:active{background:var(--accent);color:#fff;}
.stem-feedback{text-align:center;font-size:1.2rem;font-weight:800;margin-top:16px;padding:12px;border-radius:12px;}
.stem-feedback.good{background:#d4edda;color:#155724;}
.stem-feedback.bad{background:#f8d7da;color:#721c24;}
/* ---------- lottie the story friend ---------- */
.lottie-hero{display:flex;gap:14px;align-items:flex-start;margin:6px 0 18px;}
.lottie-owl{width:110px;height:110px;object-fit:cover;border-radius:50%;border:4px solid var(--gold);box-shadow:0 6px 16px rgba(0,0,0,.3);flex:none;}
.lottie-owl.small{width:76px;height:76px;}
.lottie-bubble{position:relative;background:var(--card);border:3px solid #e8a030;border-radius:18px;padding:16px 18px;font-size:1.08rem;line-height:1.5;box-shadow:0 6px 16px rgba(0,0,0,.2);flex:1;}
.lottie-bubble:before{content:"";position:absolute;left:-13px;top:34px;border:7px solid transparent;border-right:10px solid #e8a030;}
.lottie-bubble p{margin:0 0 8px;}
.lottie-bubble p:last-child{margin-bottom:0;}
.lottie-big-btn{margin-top:12px;font-size:1.25rem;padding:17px 28px;}
.lottie-note{text-align:center;color:#fff;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.4);margin-top:18px;}
.lottie-joke-q{font-size:1.25rem;font-weight:800;margin:0;}
.lottie-joke-a{font-size:1.2rem;font-weight:800;color:var(--accent2);margin:10px 0 0;}
.lottie-link-btn{display:block;width:100%;background:none;border:none;color:#fff;font-family:inherit;font-weight:800;font-size:1rem;text-shadow:0 1px 4px rgba(0,0,0,.45);cursor:pointer;padding:12px 4px 0;}
.lottie-pick-card{background:var(--card);border-radius:18px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.3);cursor:pointer;border:4px solid var(--gold);max-width:280px;margin:4px auto 6px;}
.lottie-pick-card img{width:100%;height:210px;object-fit:cover;display:block;}
.lottie-pick-card .meta{padding:12px 14px;}
.lottie-pick-card .meta b{display:block;font-size:1.05rem;}
.lottie-pick-card .meta small{color:var(--brown);}