/* ========== LearnQuest Jr. — preschool edition ========== */
:root{
  --ink:#3d2b56;
  --ink-soft:#7a6699;
  --card:#ffffff;
  --red:#ff5757; --orange:#ff9f43; --yellow:#ffd43b; --green:#3ddc84;
  --teal:#00d2c6; --blue:#4dabff; --purple:#a55eea; --pink:#ff7eb0;
  --red-d:#d63c3c; --orange-d:#e0801a; --yellow-d:#dbb01c; --green-d:#1fae5f;
  --teal-d:#00a89e; --blue-d:#2c85d8; --purple-d:#8443c9; --pink-d:#e05a8c;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Fredoka',sans-serif;
  color:var(--ink);
  min-height:100vh;
  line-height:1.5;
  background:linear-gradient(180deg,#a5e6ff 0%,#c8f4e4 45%,#fff6c9 100%);
  background-attachment:fixed;
  overflow-x:clip;
}
button{font-family:inherit}
a{-webkit-tap-highlight-color:transparent}
.btn:focus-visible,.big-opt:focus-visible,.tap-card:focus-visible,.icon-btn:focus-visible,.subject-bubble:focus-visible,.lesson-dot:focus-visible{
  outline:5px solid var(--purple);outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- floating sky ---------- */
.sky{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.sky .float{position:absolute;font-size:2.6rem;opacity:.8}
@keyframes drift{0%{transform:translateX(-8vw)}100%{transform:translateX(108vw)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.f1{top:9%;animation:drift 48s linear infinite}
.f2{top:22%;left:82%;font-size:3rem;animation:floaty 5s ease-in-out infinite}
.f3{top:15%;animation:drift 66s linear infinite;animation-delay:-30s;font-size:3.4rem}
.f4{top:58%;left:6%;animation:floaty 6s ease-in-out infinite .8s}
.f5{top:64%;left:90%;font-size:2.2rem;animation:floaty 7s ease-in-out infinite .3s}
.f6{top:34%;animation:drift 58s linear infinite;animation-delay:-14s}
.f7{top:44%;left:12%;font-size:2rem;animation:floaty 4.6s ease-in-out infinite}
.f8{top:78%;left:78%;font-size:2.2rem;animation:floaty 5.4s ease-in-out infinite 1.2s}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 20px;
  background:rgba(255,255,255,.95);
  border-bottom:6px solid transparent;
  border-image:linear-gradient(90deg,var(--red),var(--orange),var(--yellow),var(--green),var(--blue),var(--purple)) 1;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;font-size:1.5rem}
.brand-bear{font-size:2rem;display:inline-block;animation:bearBob 2.4s ease-in-out infinite}
@keyframes bearBob{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg) translateY(-4px)}}
.brand-text em{font-style:normal;color:var(--pink)}
.brand-sub{
  font-weight:700;font-size:.72rem;letter-spacing:.5px;
  background:var(--pink);color:#fff;border-radius:999px;padding:3px 10px;align-self:center;
}
@media(max-width:640px){.brand-sub{display:none}}
.topbar-right{display:flex;gap:10px;align-items:center}
.pill{
  background:#fff8e1;border:4px solid var(--yellow);border-radius:999px;
  padding:6px 18px;font-weight:700;font-size:1.15rem;color:var(--ink);
  text-decoration:none;box-shadow:0 4px 0 var(--yellow-d);
  transition:transform .12s;
}
.pill:hover{transform:translateY(-2px) scale(1.05)}
.icon-btn{
  background:#fff;border:4px solid var(--blue);border-radius:50%;
  width:52px;height:52px;font-size:1.5rem;cursor:pointer;line-height:1;
  box-shadow:0 4px 0 var(--blue-d);color:var(--ink);
  transition:transform .12s;display:grid;place-items:center;
}
.icon-btn:hover{transform:translateY(-2px) scale(1.06)}
.icon-btn:active{transform:translateY(2px)}

/* ---------- layout ---------- */
main{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:26px 18px 90px}

/* ---------- entrance ---------- */
@keyframes bounceIn{0%{opacity:0;transform:scale(.5)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
.pop{animation:bounceIn .5s ease both;animation-delay:var(--d,0ms)}

/* ---------- home hero ---------- */
.hero-jr{
  text-align:center;padding:30px 20px 10px;
}
.hero-jr .mascot{font-size:5.5rem;display:inline-block;animation:bearBob 2.4s ease-in-out infinite}
.hero-jr h1{font-size:clamp(2rem,6vw,3.2rem);font-weight:700;
  background:linear-gradient(90deg,var(--red),var(--orange),var(--green),var(--blue),var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-jr p{font-size:1.25rem;font-weight:600;color:var(--ink-soft);margin-top:4px}
.hear-btn{
  margin-top:12px;display:inline-block;border:none;cursor:pointer;
  background:#fff;border:4px solid var(--purple);color:var(--purple);
  font-size:1.1rem;font-weight:700;border-radius:999px;padding:9px 24px;
  box-shadow:0 4px 0 var(--purple-d);transition:transform .12s;
}
.hear-btn:hover{transform:scale(1.05)}

/* ---------- subject bubbles ---------- */
.subject-grid-jr{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:26px}
.subject-bubble{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  text-decoration:none;color:#fff;border-radius:34px;padding:28px 20px 22px;
  border:6px solid rgba(255,255,255,.6);
  transition:transform .16s ease;
  overflow:hidden;
}
.subject-bubble:hover{transform:translateY(-8px) rotate(-1deg) scale(1.02)}
.subject-bubble .s-emoji{font-size:4.5rem;line-height:1;animation:floaty 3.4s ease-in-out infinite}
.subject-bubble h3{font-size:1.8rem;font-weight:700}
.subject-bubble p{font-weight:600;font-size:1.05rem;opacity:.95}
.subject-bubble .s-count{
  margin-top:8px;background:rgba(255,255,255,.28);border:3px solid rgba(255,255,255,.6);
  border-radius:999px;padding:4px 16px;font-weight:700;font-size:1rem;
}
.sb-letters{background:linear-gradient(150deg,var(--red),#ff8a5c);box-shadow:0 10px 0 var(--red-d)}
.sb-numbers{background:linear-gradient(150deg,var(--blue),#7cc4ff);box-shadow:0 10px 0 var(--blue-d)}
.sb-colors{background:linear-gradient(150deg,var(--purple),var(--pink));box-shadow:0 10px 0 var(--purple-d)}
.sb-animals{background:linear-gradient(150deg,var(--green),#8ce99a);box-shadow:0 10px 0 var(--green-d)}
.sb-world{background:linear-gradient(150deg,var(--orange),var(--yellow));box-shadow:0 10px 0 var(--orange-d)}

/* ---------- subject page: lesson dots ---------- */
.page-title-jr{display:flex;align-items:center;justify-content:center;gap:14px;text-align:center;margin:10px 0 4px;flex-wrap:wrap}
.page-title-jr .s-emoji{font-size:3.4rem}
.page-title-jr h1{font-size:2.2rem;font-weight:700}
.sub-jr{text-align:center;color:var(--ink-soft);font-weight:600;font-size:1.15rem;margin-bottom:20px}
.back-jr{
  display:inline-block;text-decoration:none;font-weight:700;font-size:1.1rem;color:#fff;
  background:var(--ink-soft);border-radius:999px;padding:8px 22px;box-shadow:0 4px 0 #5d4b7a;
  transition:transform .12s;margin-bottom:8px;
}
.back-jr:hover{transform:scale(1.05)}
.lesson-dots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin-top:14px}
.lesson-dot{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:var(--card);border:5px solid var(--dot,#ffd43b);border-radius:26px;
  padding:18px 10px 12px;text-decoration:none;color:var(--ink);
  box-shadow:0 7px 0 rgba(0,0,0,.12);
  transition:transform .14s;
  text-align:center;
}
.lesson-dot:hover{transform:translateY(-6px) scale(1.04)}
.lesson-dot .d-emoji{font-size:2.9rem;line-height:1.1}
.lesson-dot h4{font-size:1.05rem;font-weight:700;line-height:1.2}
.lesson-dot .d-star{position:absolute;top:-14px;right:-8px;font-size:1.9rem;transform:rotate(12deg)}
.lesson-dot .d-num{position:absolute;top:8px;left:12px;font-weight:700;color:var(--ink-soft);font-size:.95rem;opacity:.6}

/* ---------- lesson learn screen ---------- */
.learn-head{text-align:center;margin-bottom:14px}
.learn-head .l-emoji{font-size:4.2rem;display:inline-block;animation:floaty 3s ease-in-out infinite}
.learn-head h1{font-size:2.2rem;font-weight:700}
.learn-head .hint{color:var(--ink-soft);font-weight:600;font-size:1.2rem}
.tap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:20px 0 26px}
.tap-card{
  background:var(--card);border:5px solid var(--tc,#4dabff);border-radius:26px;
  padding:20px 10px 14px;cursor:pointer;text-align:center;
  box-shadow:0 7px 0 rgba(0,0,0,.12);
  transition:transform .13s;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.tap-card:hover{transform:translateY(-5px) scale(1.05)}
.tap-card .t-emoji{font-size:3.6rem;line-height:1.1}
.tap-card .t-word{font-size:1.25rem;font-weight:700}
@keyframes wiggle{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-7deg) scale(1.12)}75%{transform:rotate(7deg) scale(1.12)}}
.tap-card.wiggle{animation:wiggle .45s ease}
.play-cta{text-align:center;margin-top:10px}

/* ---------- big buttons ---------- */
.btn{
  display:inline-block;border:none;cursor:pointer;text-decoration:none;
  font-size:1.5rem;font-weight:700;color:#fff;
  background:var(--green);border-radius:999px;padding:16px 44px;
  box-shadow:0 7px 0 var(--green-d);
  transition:transform .13s;
}
.btn:hover{transform:translateY(-3px) scale(1.03)}
.btn:active{transform:translateY(3px)}
.btn.blue{background:var(--blue);box-shadow:0 7px 0 var(--blue-d)}
.btn.purple{background:var(--purple);box-shadow:0 7px 0 var(--purple-d)}
.btn.orange{background:var(--orange);box-shadow:0 7px 0 var(--orange-d)}

/* ---------- play (quiz) screen ---------- */
.play-wrap{max-width:760px;margin:0 auto}
.play-progress{display:flex;gap:10px;justify-content:center;margin-bottom:18px}
.pp-dot{width:26px;height:26px;border-radius:50%;background:#fff;border:4px solid var(--ink-soft);opacity:.5}
.pp-dot.done{background:var(--green);border-color:var(--green-d);opacity:1}
.pp-dot.current{border-color:var(--purple);opacity:1;animation:floaty 1.6s ease-in-out infinite}
.play-card{
  background:var(--card);border:6px solid var(--yellow);border-radius:34px;
  padding:26px 24px 30px;box-shadow:0 10px 0 rgba(0,0,0,.12);
  text-align:center;
}
.play-q{font-size:1.6rem;font-weight:700;line-height:1.3}
.play-pic{font-size:3.4rem;letter-spacing:6px;margin:10px 0 4px;line-height:1.3;word-break:break-all}
.say-again{
  margin:10px 0 4px;display:inline-block;border:none;cursor:pointer;
  background:#f1ecff;border:3px solid var(--purple);color:var(--purple);
  font-size:1rem;font-weight:700;border-radius:999px;padding:7px 18px;
  box-shadow:0 3px 0 var(--purple-d);transition:transform .12s;
}
.say-again:hover{transform:scale(1.06)}
.big-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
@media(max-width:560px){.big-opts{grid-template-columns:1fr}.big-opt{flex-direction:row;justify-content:center;gap:14px}}
.big-opt{
  background:#fdfbff;border:5px solid var(--blue);border-radius:26px;
  padding:22px 10px 16px;cursor:pointer;
  box-shadow:0 7px 0 var(--blue-d);
  transition:transform .13s;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  min-height:120px;justify-content:center;
}
.big-opt:hover:not(:disabled){transform:translateY(-5px) scale(1.05)}
.big-opt .o-emoji{font-size:3.4rem;line-height:1.1;font-weight:700}
.big-opt .o-word{font-size:1.15rem;font-weight:700;color:var(--ink)}
.big-opt.right{background:#e2ffe9;border-color:var(--green);box-shadow:0 7px 0 var(--green-d);animation:bounceIn .5s ease}
.big-opt.wrong{background:#ffe9e9;border-color:var(--red);box-shadow:0 4px 0 var(--red-d);opacity:.55;animation:wiggle .4s ease}
.big-opt:disabled{cursor:default}
.cheer-line{margin-top:16px;font-size:1.4rem;font-weight:700;min-height:2rem}
.cheer-line.yay{color:var(--green-d)}
.cheer-line.oops{color:var(--orange-d)}

/* ---------- celebration ---------- */
.celebrate{
  text-align:center;background:var(--card);border:6px solid var(--pink);border-radius:34px;
  padding:40px 24px;box-shadow:0 10px 0 rgba(0,0,0,.12);
}
@keyframes starSpin{0%{transform:scale(0) rotate(-180deg)}70%{transform:scale(1.25) rotate(10deg)}100%{transform:scale(1) rotate(0)}}
.celebrate .c-sticker{font-size:6rem;display:inline-block;animation:starSpin .7s ease both}
.celebrate h2{font-size:2.2rem;font-weight:700;margin:8px 0 2px}
.celebrate p{font-size:1.3rem;font-weight:600;color:var(--ink-soft);margin-bottom:20px}
.celebrate .c-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- sticker book ---------- */
.sticker-head{text-align:center;margin-bottom:10px}
.sticker-head h1{font-size:2.2rem;font-weight:700}
.sticker-head p{color:var(--ink-soft);font-weight:600;font-size:1.15rem}
.sticker-section{margin-top:22px}
.sticker-section h3{font-size:1.4rem;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:10px}
.sticker-cell{
  background:var(--card);border:4px solid var(--line,#ffd43b);border-radius:18px;
  display:grid;place-items:center;aspect-ratio:1;font-size:2.2rem;
  box-shadow:0 4px 0 rgba(0,0,0,.1);
}
.sticker-cell.locked{opacity:.4;font-size:1.6rem}
.sticker-cell.new{animation:starSpin .6s ease both}

/* ---------- confetti ---------- */
#confetti{position:fixed;inset:0;pointer-events:none;z-index:200}

@media(max-width:640px){
  .brand-text{font-size:1.15rem}
  main{padding:20px 12px 70px}
  .play-q{font-size:1.35rem}
  .big-opt .o-emoji{font-size:2.8rem}
}