:root{
  --ink:#1d1440; --bg:#fff6d6; --card:#ffffff; --purple:#5b3fd1; --purple-d:#3a2596;
  --green:#12a150; --green-d:#0a6b34; --red:#d6336c; --yellow:#ffd23f; --tap:60px;
  --font: ui-rounded, "Nunito", "Quicksand", "Arial Rounded MT Bold", "Trebuchet MS", "Comic Sans MS", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  background-image:radial-gradient(circle at 10% 10%,#ffe9a0 0,transparent 40%),radial-gradient(circle at 90% 30%,#d9f3ff 0,transparent 40%);
  background-attachment:fixed;
  min-height:100vh; min-height:100dvh; font-size:20px; line-height:1.4;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#app{max-width:900px;margin:0 auto;padding:14px 14px 40px;outline:none}
.skip{position:absolute;left:-999px;top:0;background:#000;color:#fff;padding:10px;z-index:99}
.skip:focus{left:8px;top:8px}
h1,h2,h3{margin:0;line-height:1.15}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:5px solid #ff8a00;outline-offset:3px}

/* Buttons */
.btn{
  min-height:var(--tap); min-width:var(--tap); padding:12px 22px; font-size:1.2rem; font-weight:800;
  border:4px solid var(--ink); border-radius:22px; background:var(--yellow); color:var(--ink);
  box-shadow:0 6px 0 var(--ink); transition:transform .08s, box-shadow .08s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.btn[disabled]{opacity:.45;box-shadow:0 6px 0 #777;border-color:#555;cursor:not-allowed}
.btn-green{background:#3ddc84}
.btn-purple{background:var(--purple);color:#fff}
.btn-blue{background:#7fd4ff}
.btn-pink{background:#ff9ec7}
.btn-big{font-size:1.4rem;min-height:68px;padding:14px 26px}

/* Top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.stars-pill{
  background:#fff; border:4px solid var(--ink); border-radius:999px; padding:6px 16px; min-height:var(--tap);
  font-weight:900; font-size:1.4rem; display:flex; align-items:center; gap:8px; box-shadow:0 4px 0 var(--ink);
}
.stars-pill .s{font-size:1.7rem}

/* Home */
.hero{text-align:center;padding:6px 0 12px}
.hero h1{font-size:clamp(2rem,8vw,3rem);color:var(--purple-d);text-shadow:3px 3px 0 #fff}
.hero p{margin:6px 0 0;font-size:1.15rem;font-weight:700}
.install-card{
  background:linear-gradient(135deg,#7b5cff,#5b3fd1); color:#fff; border:4px solid var(--ink); border-radius:28px;
  padding:16px; margin:10px 0 16px; box-shadow:0 8px 0 var(--ink); text-align:center;
}
.install-card h2{font-size:1.5rem;margin-bottom:4px}
.install-card p{margin:0 0 12px;font-weight:700}
.install-card .btn{width:100%;max-width:420px;font-size:1.5rem;min-height:72px}
.install-card.installed{background:linear-gradient(135deg,#2fbf71,#0a8a4a)}
.install-card.installed .btn{background:#fff}

.votd{background:#fff;border:4px solid var(--ink);border-radius:28px;padding:16px;margin:10px 0 16px;box-shadow:0 6px 0 var(--ink);display:flex;gap:14px;align-items:center}
.votd .big{font-size:3.4rem;flex:none}
.votd h2{font-size:1rem;text-transform:uppercase;letter-spacing:.06em;color:var(--purple-d)}
.votd blockquote{margin:4px 0;font-size:1.35rem;font-weight:800}
.votd cite{font-style:normal;font-weight:700;color:#444}
.votd .btn{margin-top:8px;min-height:56px;padding:8px 16px;font-size:1.05rem}

.section-title{font-size:1.6rem;margin:18px 4px 10px;color:var(--purple-d)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;list-style:none;margin:0;padding:0}
@media (min-width:640px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.grid{grid-template-columns:repeat(4,1fr)}}
.story-card{
  width:100%; min-height:170px; border:4px solid var(--ink); border-radius:26px; padding:12px 8px; color:#fff;
  box-shadow:0 7px 0 var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center;
  transition:transform .08s, box-shadow .08s; position:relative;
}
.story-card:active{transform:translateY(6px);box-shadow:0 1px 0 var(--ink)}
.story-card .em{font-size:3.4rem;line-height:1;filter:drop-shadow(0 3px 0 rgba(0,0,0,.25))}
.story-card .t{font-size:1.15rem;font-weight:900;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.story-card .st{background:#fff;color:var(--ink);border-radius:999px;padding:2px 10px;font-weight:900;font-size:1rem;border:3px solid var(--ink)}
.game-card{background:linear-gradient(135deg,#ff6fb1,#ff9a3d);grid-column:1/-1;min-height:110px;flex-direction:row;gap:16px}

.parents{background:#fff;border:4px solid var(--ink);border-radius:22px;margin:22px 0 0;padding:6px 14px}
.parents summary{min-height:var(--tap);display:flex;align-items:center;font-weight:900;font-size:1.15rem;cursor:pointer}
.parents p,.parents li{font-size:1rem}
.parents .btn{font-size:1rem;min-height:56px;margin:6px 0 10px}

/* Story */
.reader{background:#fff;border:4px solid var(--ink);border-radius:30px;box-shadow:0 8px 0 var(--ink);padding:14px 16px 20px;margin-top:8px;text-align:center}
.reader .art{
  font-size:clamp(3.6rem,20vw,6.5rem); line-height:1.15; padding:14px 6px; border-radius:22px; margin-bottom:10px;
  min-height:150px; display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
}
.reader .text{font-size:clamp(1.5rem,6.2vw,2.1rem);font-weight:800;line-height:1.35;margin:6px 4px 14px;text-align:left}
.reader .verse{background:#fff3b0;border:3px dashed var(--ink);border-radius:18px;padding:8px 12px;margin:0 0 14px;font-size:1.1rem;font-weight:700;text-align:left}
.dots{display:flex;gap:8px;justify-content:center;margin:6px 0 12px}
.dot{width:16px;height:16px;border-radius:50%;background:#ddd;border:3px solid var(--ink)}
.dot.on{background:var(--purple)}
.dot.done{background:#3ddc84}
.nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.nav .btn{width:100%}
.listen-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.story-title{font-size:1.5rem;text-align:center;margin:0 0 4px;flex:1}

/* Quiz */
.quiz h2{font-size:clamp(1.5rem,6vw,2rem);margin:6px 0 14px}
.opts{display:grid;gap:12px}
.opt{
  min-height:72px; font-size:1.35rem; font-weight:800; border:4px solid var(--ink); border-radius:22px; background:#e9f6ff; color:var(--ink);
  padding:12px 16px; box-shadow:0 5px 0 var(--ink); text-align:left;
}
.opt.right{background:#3ddc84}
.opt.wrong{background:#ffb3c7}
.feedback{min-height:70px;font-size:1.4rem;font-weight:900;margin:14px 0 4px;padding:10px;border-radius:18px}
.feedback.good{background:#d3f9e0;color:#0a5a2b}
.feedback.try{background:#ffe1ec;color:#8b1740}
.result .big{font-size:5rem}
.result .stars{font-size:3.4rem;letter-spacing:.1em}

/* Game */
.mem-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
@media (min-width:640px){.mem-grid{grid-template-columns:repeat(3,1fr)}}
.mcard{
  min-height:130px; border:4px solid var(--ink); border-radius:22px; background:var(--purple); color:#fff; font-size:3rem; font-weight:900;
  box-shadow:0 6px 0 var(--ink); padding:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center;
}
.mcard.up{background:#fff;color:var(--ink);font-size:1.25rem;line-height:1.2}
.mcard.up .e{font-size:2.6rem}
.mcard.matched{background:#3ddc84;color:var(--ink)}
.info{font-weight:800;font-size:1.15rem;text-align:center}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(20,10,60,.7);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal[hidden]{display:none}
.modal-card{background:#fff;border:5px solid var(--ink);border-radius:28px;padding:18px;max-width:460px;width:100%;max-height:92vh;overflow:auto;text-align:center}
.modal-card h2{font-size:1.6rem;margin-bottom:8px;color:var(--purple-d)}
.steps{text-align:left;padding-left:0;list-style:none;counter-reset:s;margin:10px 0 16px}
.steps li{counter-increment:s;display:flex;gap:12px;align-items:center;font-size:1.2rem;font-weight:700;margin-bottom:12px}
.steps li::before{content:counter(s);flex:none;width:44px;height:44px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink);display:grid;place-items:center;font-weight:900}
.kbd{background:#eee;border:2px solid var(--ink);border-radius:8px;padding:0 8px;font-weight:900}

.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:60}
.confetti span{position:absolute;top:-40px;font-size:2rem;animation:fall 2.2s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(360deg)}}
.pop{animation:pop .4s ease}
@keyframes pop{0%{transform:scale(.7)}70%{transform:scale(1.1)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
[hidden]{display:none!important}