/* LuzKids — a children's storybook at lamplight.
   Signature: the glowing lamp against a twinkling night sky.
   Display: Fredoka. Body: Nunito. Motion: bouncy but gentle. */

:root {
  --sky: #1e2547;
  --sky-deep: #12172e;
  --sky-mid: #2c3766;
  --lamp: #f6ab3a;
  --lamp-soft: #ffd98a;
  --lamp-glow: rgba(255, 200, 110, .55);
  --paper: #fdf7ec;
  --ink: #2b2b33;
  --meadow: #4f9d69;
  --berry: #c45d83;
  --sea: #5b7bd5;
  --radius: 22px;
  --shadow: 0 8px 28px rgba(18, 23, 46, .14);
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(246,171,58,.07), transparent 28%),
    radial-gradient(circle at 88% 30%, rgba(91,123,213,.06), transparent 30%),
    var(--paper);
  line-height: 1.65;
}
h1, h2, h3, .brand, .btn, .price { font-family: 'Fredoka', sans-serif; }
h1 { font-size: clamp(1.8rem, 4.5vw, 3rem); line-height: 1.12; }
a { color: inherit; }

/* ---------------------------------------------------- nav with starlight */
.nav {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .6rem;
  padding: .85rem 1.4rem;
  background: linear-gradient(180deg, var(--sky-deep), var(--sky));
  color: #fff;
}
.brand { font-size: 1.5rem; font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: .3rem; }
.brand span { color: var(--lamp); }
.brand .lamp {
  display: inline-block;
  filter: drop-shadow(0 0 8px var(--lamp-glow));
  animation: flicker 3.2s ease-in-out infinite;
}
@keyframes flicker {
  0%, 100% { filter: drop-shadow(0 0 7px var(--lamp-glow)); transform: scale(1); }
  48%      { filter: drop-shadow(0 0 13px var(--lamp-glow)); transform: scale(1.06); }
  52%      { filter: drop-shadow(0 0 9px var(--lamp-glow)); }
}
.nav-right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.nav-right a { text-decoration: none; opacity: .92; font-weight: 800; font-size: .95rem; transition: color .15s; }
.nav-right a:hover { color: var(--lamp-soft); opacity: 1; }
.child-chip { background: rgba(255,255,255,.14); padding: .28rem .8rem; border-radius: 999px; border: 1px solid rgba(255,217,138,.35); }
.lang-toggle a { padding: 0 .3rem; opacity: .55; }
.lang-toggle a.on { opacity: 1; color: var(--lamp); }

.flash {
  background: var(--lamp-soft); padding: .65rem 1.2rem; text-align: center;
  font-weight: 800; animation: drop-in .45s var(--bounce);
}
@keyframes drop-in { from { transform: translateY(-100%); } }

main { max-width: 1040px; margin: 0 auto; padding: 0 1.2rem 3rem; }

/* ---------------------------------------------------- hero: the night sky */
.hero {
  position: relative; overflow: hidden;
  margin: 0 calc(50% - 50vw);   /* full-bleed: break out of main's max-width */
  width: 100vw;
  background:
    radial-gradient(1200px 520px at 72% -12%, var(--sky-mid) 0%, var(--sky) 52%, var(--sky-deep) 100%);
  color: #fff;
  border-radius: 0 0 44px 44px;
}
.hero::after {              /* rolling hills at the bottom of the sky */
  content: ""; position: absolute; left: -5%; right: -5%; bottom: -36px; height: 90px;
  background: var(--paper);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.hero-sky { position: relative; z-index: 2; max-width: 1040px; margin: 0 auto; padding: 4.6rem 1.2rem 5.6rem; }
.hero h1 { margin: 0 0 .5rem; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero h1 em { font-style: normal; color: var(--lamp); text-shadow: 0 0 22px var(--lamp-glow); }
.tagline { font-size: 1.18rem; opacity: .94; max-width: 52ch; }
.hero-sub { opacity: .78; max-width: 48ch; }
.hero .btn.big { margin-top: .8rem; }

/* stars — three twinkle layers via box-shadow constellations */
.stars, .stars2, .stars3 { position: absolute; inset: 0; pointer-events: none; }
.stars  { animation: twinkle 3.4s ease-in-out infinite alternate; }
.stars2 { animation: twinkle 4.6s ease-in-out .9s infinite alternate; }
.stars3 { animation: twinkle 5.4s ease-in-out 1.7s infinite alternate; }
.stars::before, .stars2::before, .stars3::before {
  content: ""; position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff;
}
.stars::before {
  box-shadow: 8vw 9vh #fff, 22vw 4vh #ffe9c0, 35vw 12vh #fff, 51vw 6vh #fff,
              64vw 14vh #ffe9c0, 78vw 5vh #fff, 90vw 11vh #fff, 15vw 18vh #fff,
              44vw 19vh #ffe9c0, 70vw 21vh #fff, 84vw 18vh #fff, 5vw 24vh #fff;
}
.stars2::before {
  width: 2px; height: 2px;
  box-shadow: 12vw 6vh #cdd8ff, 28vw 16vh #fff, 41vw 3vh #cdd8ff, 57vw 10vh #fff,
              69vw 7vh #cdd8ff, 81vw 15vh #fff, 94vw 8vh #cdd8ff, 33vw 22vh #fff,
              60vw 24vh #cdd8ff, 88vw 23vh #fff;
}
.stars3::before {
  width: 4px; height: 4px;
  box-shadow: 18vw 11vh var(--lamp-soft), 47vw 15vh #fff, 75vw 12vh var(--lamp-soft), 92vw 19vh #fff;
}
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }

/* a drifting firefly of light */
.firefly {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: var(--lamp-soft); box-shadow: 0 0 16px 6px var(--lamp-glow);
  top: 30%; left: 12%;
  animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  30%  { transform: translate(16vw, -6vh) scale(.8); }
  65%  { transform: translate(38vw, 4vh) scale(1.15); }
  100% { transform: translate(60vw, -3vh) scale(.9); }
}

/* ---------------------------------------------------- buttons */
.btn {
  display: inline-block; background: linear-gradient(180deg, var(--lamp-soft), var(--lamp));
  color: var(--sky-deep);
  border: none; border-radius: 999px; padding: .7rem 1.6rem;
  font-weight: 700; font-size: 1.02rem; text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 0 #c9821f, var(--shadow);
  transition: transform .12s var(--bounce), box-shadow .12s;
}
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #c9821f; }
.btn.big { padding: .95rem 2.2rem; font-size: 1.15rem; }
.btn.small { padding: .42rem 1.05rem; font-size: .92rem; box-shadow: 0 3px 0 #c9821f; }
.btn.ghost {
  background: transparent; border: 3px solid var(--lamp); color: inherit;
  box-shadow: none;
}
.btn.ghost:hover { background: rgba(246,171,58,.12); }

/* ---------------------------------------------------- cards */
.strip { padding: 2.4rem 0 0; }
.strip > h1, .strip > h2 { margin-bottom: .2rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.2rem; margin-top: 1.2rem; }
.card {
  --accent: var(--lamp);
  position: relative;
  background: #fff; border-radius: var(--radius); padding: 1.3rem 1.3rem 1.4rem;
  text-decoration: none; box-shadow: var(--shadow);
  border: 2px solid #f1e8d6; border-top: 8px solid var(--accent);
  display: flex; flex-direction: column; gap: .4rem;
  transition: transform .18s var(--bounce), box-shadow .18s;
}
a.card:hover {
  transform: translateY(-6px) rotate(-.6deg);
  box-shadow: 0 16px 34px rgba(18,23,46,.18);
}
a.card:hover .card-emoji { transform: scale(1.18) rotate(8deg); }
.card h3 { margin: 0; font-size: 1.25rem; }
.card p { margin: 0; font-size: .95rem; opacity: .85; }
.card-emoji { font-size: 2.4rem; line-height: 1; transition: transform .2s var(--bounce); }
.card-emoji.big { font-size: 3.4rem; }
.pill {
  align-self: flex-start; margin-top: .5rem;
  background: var(--accent); color: #fff;
  border-radius: 999px; padding: .12rem .75rem; font-size: .8rem; font-weight: 800;
  letter-spacing: .02em;
}
.meta { font-size: .85rem; opacity: .62; }

/* ---------------------------------------------------- series page */
.series-head { display: flex; gap: 1.3rem; align-items: center; margin-top: 1rem; }
.lesson-list { list-style: none; padding: 0; margin-top: 1.5rem; display: grid; gap: .7rem; counter-reset: lesson; }
.lesson-row {
  display: flex; align-items: center; gap: 1rem;
  background: #fff; border: 2px solid #f1e8d6; border-radius: var(--radius);
  padding: .85rem 1.15rem; box-shadow: var(--shadow);
  transition: transform .15s var(--bounce);
}
.lesson-row:hover { transform: translateX(6px); border-color: var(--lamp-soft); }
.lesson-row.done { background: linear-gradient(90deg, #fff6e2, #fff); border-color: var(--lamp-soft); }
.lamp-mark { width: 1.8rem; text-align: center; font-size: 1.3rem; }
.lesson-row.done .lamp-mark { filter: drop-shadow(0 0 6px var(--lamp-glow)); animation: flicker 3s infinite; }
.lesson-row-main { flex: 1; display: flex; flex-direction: column; }

/* ---------------------------------------------------- lesson player */
.lesson-head { padding: 1.6rem 0 .6rem; }
.crumb { font-size: .92rem; text-decoration: none; opacity: .65; font-weight: 800; }
.crumb:hover { opacity: 1; color: var(--berry); }
.lesson-head h1 { margin: .3rem 0 .1rem; }
.lesson-head .meta { font-size: .95rem; }

.block {
  position: relative;
  background: #fff; border-radius: var(--radius);
  border: 2px solid #f1e8d6;
  box-shadow: var(--shadow);
  padding: 1.5rem 1.6rem; margin: 1.6rem 0;
}
.block h2 { margin: 0 0 .6rem; font-size: 1.35rem; display: flex; align-items: center; gap: .4rem; }
/* colour-coded left ribbons per block type */
.block.story       { border-left: 10px solid var(--sea); }
.block.verse-block { border-left: 10px solid var(--lamp); }
.block.song-block  { border-left: 10px solid var(--berry); }
.block.quiz        { border-left: 10px solid var(--meadow); }
.block.printable   { border-left: 10px solid #9a7bd5; }
.block.guide       { border-left: 10px solid var(--meadow); background: #f3f8f4; }
.block.story p { font-size: 1.08rem; }

.verse-block blockquote {
  margin: 0 0 1.1rem; font-size: 1.2rem; font-weight: 800;
  background: linear-gradient(120deg, #fff6e0, #fffdf6);
  border: 2px dashed var(--lamp);
  padding: 1rem 1.2rem; border-radius: 14px;
}
.verse-block cite { display: block; font-size: .85rem; opacity: .6; margin-top: .4rem; font-weight: 400; }

audio { width: 100%; border-radius: 999px; }

/* scramble game */
.scramble-hint { font-weight: 800; margin: .4rem 0 .2rem; }
.scramble-pool, .scramble-answer {
  display: flex; flex-wrap: wrap; gap: .55rem; min-height: 3rem;
  padding: .6rem; border-radius: 14px; margin: .5rem 0;
}
.scramble-answer { background: var(--paper); border: 3px dashed var(--lamp); }
.word-chip {
  background: var(--sky); color: #fff; border: none;
  border-radius: 999px; padding: .42rem 1rem; font-weight: 800; cursor: pointer;
  font-family: 'Nunito', sans-serif; font-size: 1.02rem;
  box-shadow: 0 3px 0 var(--sky-deep);
  transition: transform .12s var(--bounce);
}
button.word-chip:hover { transform: translateY(-3px) rotate(-2deg); }
.scramble-answer .word-chip {
  background: linear-gradient(180deg, var(--lamp-soft), var(--lamp));
  color: var(--sky-deep); box-shadow: 0 3px 0 #c9821f;
  animation: pop-in .3s var(--bounce);
}
@keyframes pop-in { from { transform: scale(.4); } }
.word-chip.wrong { background: #c0504d; box-shadow: 0 3px 0 #8c3835; animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-5px) rotate(-3deg); } 75% { transform: translateX(5px) rotate(3deg); } }
.scramble-result { font-weight: 800; font-size: 1.2rem; color: var(--meadow); animation: pop-in .4s var(--bounce); }

/* quiz */
.quiz-q { font-weight: 800; margin: 1rem 0 .4rem; font-size: 1.05rem; }
.quiz-opt {
  display: block; width: 100%; text-align: left;
  background: var(--paper); border: 3px solid #eee2cb;
  border-radius: 14px; padding: .6rem 1rem; margin: .35rem 0;
  font-family: 'Nunito'; font-size: 1.02rem; font-weight: 700; cursor: pointer;
  transition: transform .12s var(--bounce), border-color .12s;
}
.quiz-opt:hover { border-color: var(--lamp); transform: translateX(4px); }
.quiz-opt.correct { background: #e3f4e8; border-color: var(--meadow); animation: pop-in .25s var(--bounce); }
.quiz-opt.incorrect { background: #fae5e4; border-color: #c0504d; }
.quiz-score { font-weight: 800; font-size: 1.15rem; color: var(--meadow); }

.lesson-foot { text-align: center; padding: 2rem 0 1rem; }
#complete-msg { font-weight: 800; font-size: 1.25rem; color: var(--meadow); animation: pop-in .4s var(--bounce); }

/* star-burst celebration layer */
.burst-star {
  position: fixed; z-index: 99; pointer-events: none; font-size: 1.4rem;
  animation: burst 1.1s ease-out forwards;
}
@keyframes burst {
  0%   { transform: translate(0,0) scale(.6) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.4) rotate(220deg); opacity: 0; }
}

/* ---------------------------------------------------- auth, profiles, dash */
.auth-card {
  max-width: 440px; margin: 3.2rem auto; background: #fff;
  border: 2px solid #f1e8d6; border-top: 10px solid var(--lamp);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.2rem;
}
.auth-card form { display: grid; gap: 1.05rem; margin-top: 1.1rem; }
.auth-card label { display: grid; gap: .35rem; font-weight: 800; font-size: .93rem; }
.auth-card input, .add-profile input, .add-profile select {
  padding: .65rem .9rem; border: 3px solid #eee2cb; border-radius: 12px;
  font-family: 'Nunito'; font-size: 1rem;
}
.auth-card input:focus, .add-profile input:focus { outline: none; border-color: var(--lamp); box-shadow: 0 0 0 4px rgba(246,171,58,.25); }

.profiles .card { align-items: center; text-align: center; }
.card.selected { outline: 4px solid var(--lamp); outline-offset: 2px; }
.add-profile { gap: .65rem; }

.dash-child {
  background: #fff; border: 2px solid #f1e8d6; border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.3rem 1.5rem; margin: 1.1rem 0;
}
.dash-child h2 { margin: 0 0 .5rem; }
.dash-row { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 2px dashed #f1e8d6; }
.lamps { letter-spacing: .18rem; }

/* pricing */
.pricing .card.featured {
  outline: 4px solid var(--lamp); transform: scale(1.03);
  background: linear-gradient(180deg, #fffaf0, #fff);
}
.price { font-size: 2.3rem; font-weight: 700; margin: .2rem 0; color: var(--sky); }
.price span { font-size: 1rem; opacity: .6; }
.pricing ul { padding-left: 1.15rem; margin: .4rem 0 1.1rem; font-size: .96rem; }
.pricing ul li { margin: .25rem 0; }

.footer {
  margin-top: 3rem; text-align: center; padding: 2.4rem 1rem 2.8rem;
  background: linear-gradient(180deg, var(--sky), var(--sky-deep)); color: #fff;
  font-style: italic; border-radius: 44px 44px 0 0;
}

/* accessibility & responsive */
:focus-visible { outline: 4px solid var(--sea); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 640px) {
  .nav { justify-content: center; }
  .series-head { flex-direction: column; text-align: center; }
  .hero-sky { padding: 2.8rem 1.2rem 4.4rem; }
}

/* ====================================================== homepage v3 */
/* split hero with photo stack */
.hero-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: center; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.btn.ghost.light { color: #fff; border-color: var(--lamp-soft); }
.btn.ghost.light:hover { background: rgba(255,217,138,.15); }

.hero-photos { position: relative; min-height: 380px; }
.polaroid {
  margin: 0; background: #fff; padding: .7rem .7rem 0;
  border-radius: 8px; box-shadow: 0 14px 34px rgba(8,11,26,.45);
  display: inline-block; max-width: 250px;
  transition: transform .25s var(--bounce);
}
.polaroid::before {              /* washi tape */
  content: ""; position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-4deg);
  width: 86px; height: 26px; background: rgba(246,171,58,.78); border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0,0,0,.18);
}
.polaroid img { width: 100%; display: block; border-radius: 4px; }
.polaroid figcaption {
  font-family: 'Fredoka', sans-serif; font-weight: 600;
  text-align: center; padding: .55rem .3rem .7rem; color: var(--ink); font-size: .95rem;
}
.hero-photos .polaroid { position: absolute; }
.hero-photos .p1 { top: 0; right: 6%; transform: rotate(4deg); z-index: 2; }
.hero-photos .p2 { bottom: -10px; left: 0; transform: rotate(-6deg); max-width: 220px; }
.hero-photos .polaroid:hover { transform: rotate(0) scale(1.06); z-index: 5; }

/* feature & step cards */
.features .card.feature { border-top-width: 10px; }
.step { align-items: flex-start; }
.step-num {
  font-family: 'Fredoka'; font-weight: 700; font-size: 1.3rem;
  background: var(--sky); color: var(--lamp-soft);
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center; box-shadow: 0 3px 0 var(--sky-deep);
}

/* family story band */
.family-band {
  margin: 3.5rem calc(50% - 50vw) 0; width: 100vw;
  background:
    radial-gradient(700px 300px at 15% 0%, rgba(246,171,58,.16), transparent 60%),
    linear-gradient(180deg, #fff8ea, #fdf3e0);
  border-top: 3px dashed var(--lamp-soft);
  border-bottom: 3px dashed var(--lamp-soft);
}
.family-inner {
  max-width: 1040px; margin: 0 auto; padding: 3.4rem 1.2rem;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.6rem; align-items: center;
}
.eyebrow {
  font-family: 'Fredoka'; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  font-size: .8rem; color: var(--berry);
}
.family-copy h2 { margin: .3rem 0 .8rem; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.family-copy p { font-size: 1.05rem; }
.family-collage { position: relative; min-height: 420px; }
.family-collage .polaroid { position: absolute; max-width: 240px; }
.family-collage .p3 { top: 0; left: 4%; transform: rotate(-5deg); z-index: 2; }
.family-collage .p4 { bottom: 0; right: 2%; transform: rotate(5deg); }
.family-collage .polaroid:hover { transform: rotate(0) scale(1.06); z-index: 5; }

/* full-width LOVE photo with scripture overlay */
.love-photo {
  position: relative; margin: 0 calc(50% - 50vw); width: 100vw;
  max-height: 520px; overflow: hidden;
}
.love-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.love-caption {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(180deg, transparent, rgba(18,23,46,.85));
  color: #fff; text-align: center; padding: 4rem 1rem 1.4rem;
}
.love-caption p { font-family: 'Fredoka'; font-weight: 600; font-size: clamp(1.05rem, 2.4vw, 1.5rem); margin: 0; text-shadow: 0 2px 10px rgba(0,0,0,.5); }

/* closing CTA band */
.cta-band {
  position: relative; overflow: hidden; text-align: center;
  margin: 3.5rem calc(50% - 50vw) -3rem; width: 100vw;
  background: radial-gradient(900px 400px at 50% 120%, var(--sky-mid), var(--sky) 60%, var(--sky-deep));
  color: #fff; padding: 3.6rem 1.2rem 4rem;
}
.cta-band h2 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); margin: 0 0 1.2rem; }

@media (max-width: 820px) {
  .hero-split, .family-inner { grid-template-columns: 1fr; }
  .hero-photos { min-height: 300px; margin-top: .5rem; }
  .hero-photos .p1 { right: 0; max-width: 200px; }
  .hero-photos .p2 { left: 4%; max-width: 180px; }
  .family-collage { min-height: 360px; }
  .family-collage .polaroid { max-width: 200px; }
}

/* ====================================================== polish pass v4 */
/* scroll-reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s var(--bounce); }
.reveal.visible { opacity: 1; transform: none; }
.reveal .card { transition: opacity .6s ease, transform .6s var(--bounce), box-shadow .18s; }
.reveal:not(.visible) .card { opacity: 0; transform: translateY(20px); }
.reveal.visible .card:nth-child(1) { transition-delay: .05s; }
.reveal.visible .card:nth-child(2) { transition-delay: .15s; }
.reveal.visible .card:nth-child(3) { transition-delay: .25s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* centered section headers with a little glow flourish */
.eyebrow.center, h2.center { display: block; text-align: center; }
h2.center { font-size: clamp(1.5rem, 3.2vw, 2.2rem); margin: .25rem 0 .4rem; position: relative; }
h2.center::after {
  content: "✦"; display: block; color: var(--lamp);
  font-size: 1rem; margin-top: .35rem; text-shadow: 0 0 12px var(--lamp-glow);
}

/* feature cards: emoji in a glowing badge */
.features .card-emoji {
  width: 4.2rem; height: 4.2rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 2rem;
  background: radial-gradient(circle at 35% 30%, #fff, var(--paper));
  border: 3px solid var(--accent);
  box-shadow: 0 6px 16px rgba(18,23,46,.12);
  margin-bottom: .3rem;
}
.features .card:hover .card-emoji { animation: wiggle .5s var(--bounce); }
@keyframes wiggle { 30% { transform: rotate(-8deg) scale(1.1); } 70% { transform: rotate(6deg); } }

/* stats ribbon */
.stats-ribbon {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2.6rem;
  margin: 2.8rem auto 0; padding: 1.4rem 2rem; max-width: 860px;
  background: var(--sky); color: #fff; border-radius: 999px;
  box-shadow: var(--shadow);
}
.stats-ribbon div { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.stats-ribbon strong { font-family: 'Fredoka'; font-size: 2rem; color: var(--lamp); text-shadow: 0 0 14px var(--lamp-glow); }
.stats-ribbon span { font-size: .85rem; opacity: .85; }

/* LOVE photo: tighter, kinder crop + framed feel */
.love-photo { max-height: 640px; border-top: 6px solid var(--lamp); border-bottom: 6px solid var(--lamp); }
.love-photo img { object-position: center 38%; }
.love-caption { padding-top: 6rem; }

/* hero photos: gentle float so the sky feels alive */
.hero-photos .p1 { animation: float-a 7s ease-in-out infinite alternate; }
.hero-photos .p2 { animation: float-b 8s ease-in-out 1s infinite alternate; }
@keyframes float-a { from { transform: rotate(4deg) translateY(0); } to { transform: rotate(5deg) translateY(-12px); } }
@keyframes float-b { from { transform: rotate(-6deg) translateY(0); } to { transform: rotate(-7deg) translateY(-10px); } }
.hero-photos .polaroid:hover { animation-play-state: paused; }

@media (max-width: 640px) {
  .stats-ribbon { gap: 1.4rem; border-radius: 28px; }
}

/* ============================== worldwide language layer */
.lang-select {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,217,138,.4); border-radius: 999px;
  padding: .3rem .8rem; font-family: 'Nunito'; font-weight: 700; font-size: .9rem;
  cursor: pointer;
}
.lang-select option { color: var(--ink); }
.ai-lang-note {
  background: #eef3fb; border-bottom: 2px solid var(--sea);
  padding: .5rem 1.2rem; text-align: center; font-size: .88rem;
}

/* feedback widget */
.report-box { max-width: 680px; margin: 2rem auto 0; padding: 0 1.2rem; }
.report-box summary { cursor: pointer; font-weight: 800; opacity: .6; font-size: .9rem; }
.report-box summary:hover { opacity: 1; }
.report-box form { display: grid; gap: .6rem; margin-top: .6rem; }
.report-box textarea { padding: .6rem .8rem; border: 2px solid #eee2cb; border-radius: 12px; font-family: 'Nunito'; }
.report-box button { justify-self: start; }

/* mission verse in family band */
.mission-verse {
  margin: .8rem 0 1rem; padding: .9rem 1.2rem;
  font-family: 'Fredoka', sans-serif; font-weight: 600;
  font-size: 1.12rem; line-height: 1.45;
  background: #fff; border-left: 6px solid var(--lamp);
  border-radius: 12px; box-shadow: var(--shadow);
}
.mission-verse cite { display: block; font-family: 'Nunito'; font-weight: 800; font-style: normal; font-size: .85rem; opacity: .6; margin-top: .35rem; }

/* dashboard progress */
.dash-series { padding: .55rem 0; border-bottom: 2px dashed #f1e8d6; }
.dash-series-head { display: flex; justify-content: space-between; gap: 1rem; font-weight: 800; }
.progress-track { height: 12px; background: #f1e8d6; border-radius: 999px; margin: .4rem 0 .25rem; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--lamp-soft), var(--lamp));
  box-shadow: 0 0 10px var(--lamp-glow); transition: width .6s var(--bounce); }
.dash-series.complete .progress-fill { background: linear-gradient(90deg, var(--lamp), #ffce6b); }
.dash-series.complete .dash-series-head .meta { color: var(--meadow); font-weight: 800; opacity: 1; }

/* ============================== content typography & white space */

/* Lesson block breathing room */
.block { padding: 1.8rem 2rem; margin: 2rem 0; }

/* Rendered paragraphs */
.content-p {
  margin: 0 0 1.1rem;
  line-height: 1.85;
  font-size: 1.06rem;
}
.content-p:last-child { margin-bottom: 0; }

/* Story block — warm readable prose */
.block.story { font-size: 1.06rem; }
.block.story h2 { font-size: 1.3rem; margin-bottom: 1rem; }

/* Parent guide — distinct visual sections */
.block.guide .content-p { font-size: 1rem; line-height: 1.8; }

/* Pull-out: "Big idea:" as a highlight sentence */
.block.guide .content-p:first-child {
  font-weight: 800;
  font-size: 1.05rem;
  background: rgba(79,157,105,.12);
  border-left: 5px solid var(--meadow);
  border-radius: 0 10px 10px 0;
  padding: .8rem 1rem;
  margin-bottom: 1.3rem;
}

/* Conversation starters — make numbered items pop */
.block.guide .content-p:nth-child(3),
.block.guide .content-p:nth-child(4) {
  background: var(--paper);
  border-radius: 12px;
  padding: .7rem 1rem;
  border: 2px solid #f1e8d6;
}

/* Memory verse — larger, more impact */
.verse-block blockquote {
  font-size: 1.25rem;
  line-height: 1.65;
  padding: 1.2rem 1.5rem;
}

/* Quiz questions — more space */
.quiz-q { margin: 1.4rem 0 .6rem; font-size: 1.08rem; }
.quiz-opt { margin: .45rem 0; padding: .7rem 1.1rem; }

/* Lesson head — more breathing room */
.lesson-head { padding: 2rem 0 .8rem; }
.lesson-head h1 { margin: .4rem 0 .2rem; font-size: clamp(1.8rem, 4vw, 2.6rem); }

/* Series page — more space between lesson rows */
.lesson-list { gap: .9rem; margin-top: 1.8rem; }
.lesson-row { padding: 1rem 1.3rem; }

/* Library cards — more generous padding */
.card { padding: 1.5rem 1.5rem 1.6rem; gap: .5rem; }
.card h3 { font-size: 1.3rem; }
.card p { font-size: 1rem; line-height: 1.6; }

/* Section spacing on homepage */
.strip { padding: 3rem 0 0; }
.cards { margin-top: 1.5rem; gap: 1.4rem; }

/* ============================== XP / Streak / Rank / Certificates */
.pre-complete-bar {
  display: flex; justify-content: center; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1.2rem;
}
.streak-chip, .rank-chip, .xp-chip {
  background: var(--sky); color: #fff;
  border-radius: 999px; padding: .35rem 1rem;
  font-weight: 800; font-size: .95rem;
  box-shadow: var(--shadow);
}
.streak-chip { background: #d45500; }
.rank-chip { background: var(--sky-mid); border: 2px solid var(--lamp-soft); }
.xp-chip { background: var(--sky); color: var(--lamp-soft); }

#complete-panel { text-align: center; }
.complete-name { font-size: 1.25rem; font-weight: 800; }
.xp-award {
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: 1.35rem; color: var(--lamp);
  text-shadow: 0 0 16px var(--lamp-glow);
  margin: .5rem 0;
}
.rank-award { font-size: 1.1rem; font-weight: 800; color: var(--meadow); margin: .3rem 0; }
.rank-up { color: var(--lamp); font-size: 1.3rem; }

@keyframes pop-in-scale { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pop-in { animation: pop-in-scale .5s var(--bounce) forwards; }

.cert-links { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.1rem; }
.btn.gold { background: linear-gradient(180deg, #ffda5e, #f6ab3a); box-shadow: 0 6px 0 #c9821f, var(--shadow); }

/* Dashboard rank cards */
.rank-card {
  display: flex; align-items: center; gap: .8rem;
  background: var(--sky); color: #fff;
  border-radius: var(--radius); padding: .7rem 1rem;
  margin-bottom: .8rem; box-shadow: var(--shadow);
}
.rank-card .rank-emoji { font-size: 1.8rem; }
.rank-card .rank-info { flex: 1; }
.rank-card .rank-name { font-family: 'Fredoka'; font-weight: 700; font-size: 1.1rem; }
.rank-card .rank-xp { font-size: .88rem; opacity: .75; }
.xp-bar-wrap { height: 8px; background: rgba(255,255,255,.15); border-radius: 999px; margin-top: .4rem; }
.xp-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--lamp-soft), var(--lamp)); }
.streak-badge { background: #d45500; border-radius: 999px; padding: .2rem .7rem; font-size: .85rem; font-weight: 800; }

/* ============================== Armour Builder Game */
.block.armour-game { border-left: 10px solid var(--lamp); }
.armour-intro { font-weight: 800; margin-bottom: 1rem; }
.armour-arena { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1rem; }
.soldier-figure { display: flex; flex-direction: column; align-items: center; gap: .5rem; min-width: 260px; }
.soldier-row { display: flex; gap: .5rem; }
.soldier-zone {
  background: var(--sky); color: #fff;
  border: 3px dashed var(--lamp-soft); border-radius: 14px;
  padding: .9rem 1rem; text-align: center; cursor: pointer;
  transition: background .15s, border-color .15s;
  min-width: 80px; min-height: 60px;
}
.sz-head { width: 90px; }
.sz-chest { width: 180px; }
.sz-arm, .sz-hand { width: 80px; }
.sz-waist { width: 100px; }
.sz-feet { width: 180px; }
.sz-label { font-size: .78rem; opacity: .65; }
.soldier-zone:hover { background: var(--sky-mid); border-color: var(--lamp); }
.soldier-zone.filled { background: linear-gradient(180deg, #1a3a20, #0f2415); border-color: var(--meadow); border-style: solid; }
.soldier-zone.sz-wrong { animation: shake .35s; background: #6b1515; }
.armour-placed { font-size: 1.5rem; }

.armour-pool { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.armour-piece {
  background: var(--paper); border: 3px solid var(--lamp-soft);
  border-radius: 14px; padding: .6rem 1rem; cursor: pointer;
  display: flex; align-items: center; gap: .5rem;
  font-weight: 800; transition: transform .15s var(--bounce), border-color .15s;
}
.armour-piece:hover { transform: translateY(-3px); border-color: var(--lamp); }
.armour-piece.selected { border-color: var(--lamp); background: var(--lamp-soft); transform: scale(1.05); }
.armour-piece.done { opacity: .35; cursor: default; text-decoration: line-through; }
.armour-piece.wrong-flash { animation: shake .3s; }
.armour-icon { font-size: 1.4rem; }

.armour-meaning {
  flex: 1; background: var(--paper); border-radius: var(--radius);
  padding: 1rem 1.2rem; border-left: 6px solid var(--meadow); min-width: 200px;
}
.armour-meaning h4 { margin: 0 0 .4rem; font-size: 1.1rem; }
.armour-meaning p { margin: 0; font-size: .95rem; }

.armour-complete {
  font-family: 'Fredoka'; font-weight: 700; font-size: 1.2rem;
  color: var(--meadow); text-align: center; padding: 1rem;
  background: linear-gradient(90deg, #e8f5ec, #fff);
  border-radius: 14px; margin-top: 1rem;
  animation: pop-in-scale .5s var(--bounce);
}
.armour-win { box-shadow: 0 0 0 4px var(--meadow); }

/* Typing challenge */
.typing-challenge { margin-top: .8rem; }
.typing-input {
  width: 100%; border: 3px solid #eee2cb; border-radius: 12px;
  padding: .6rem .9rem; font-family: 'Nunito'; font-size: 1rem; resize: vertical;
}
.typing-input:focus { outline: none; border-color: var(--lamp); }
.typing-result { margin: .5rem 0; font-weight: 800; border-radius: 10px; padding: .5rem .8rem; }
.result-perfect { background: #e3f4e8; color: var(--meadow); }
.result-good { background: #e8f0ff; color: var(--sea); }
.result-try { background: #fff3e0; color: #c47000; }
.typing-toggle { margin-top: .4rem; opacity: .7; }
.typing-check { margin-top: .4rem; }

/* AI companion */
.block.ai-companion { border-left: 10px solid var(--sea); }
.ai-form { display: flex; gap: .6rem; margin: .8rem 0; flex-wrap: wrap; }
.ai-form input {
  flex: 1; min-width: 220px; padding: .65rem .9rem;
  border: 3px solid #eee2cb; border-radius: 12px;
  font-family: 'Nunito'; font-size: 1rem;
}
.ai-form input:focus { outline: none; border-color: var(--sea); }
.ai-answer {
  background: var(--paper); border-left: 5px solid var(--sea);
  border-radius: 12px; padding: .9rem 1.1rem;
  font-size: 1.02rem; line-height: 1.7; margin-top: .5rem;
  animation: pop-in-scale .4s var(--bounce);
}
.ai-limit { margin-top: .4rem; }

/* Soul winner tracker */
.mission-add-card { margin-top: 1.5rem; }
.mission-add-row { display: flex; gap: .6rem; flex-wrap: wrap; margin: .8rem 0 .4rem; }
.mission-add-row input {
  flex: 1; min-width: 180px; padding: .6rem .9rem;
  border: 3px solid #eee2cb; border-radius: 12px; font-family: 'Nunito'; font-size: 1rem;
}
.mission-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.mission-card {
  background: #fff; border: 2px solid #f1e8d6; border-radius: var(--radius);
  padding: 1.1rem 1.2rem; box-shadow: var(--shadow);
}
.mission-card.responded { background: #f3f8f0; border-color: var(--meadow); }
.mission-name { font-weight: 800; font-size: 1.1rem; margin-bottom: .5rem; }
.mission-notes { margin: 0 0 .5rem; }
.mission-badge { font-size: .8rem; background: var(--meadow); color: #fff; border-radius: 999px; padding: .1rem .6rem; margin-left: .4rem; }
.mission-badge.won { background: var(--meadow); }
.mission-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.mission-btn {
  background: var(--paper); border: 2px solid #eee2cb; border-radius: 999px;
  padding: .3rem .8rem; font-size: .88rem; font-weight: 700; cursor: pointer;
  font-family: 'Nunito';
}
.mission-btn.active { background: #e8f0ff; border-color: var(--sea); }
.mission-btn.won { background: #e3f4e8; border-color: var(--meadow); }
.mission-btn.del { opacity: .5; }
.mission-btn.del:hover { opacity: 1; background: #fae5e4; border-color: #c0504d; }

/* ============================== Wall Demolisher Game */
.block.wall-game { border-left: 10px solid var(--berry); }
.wall-bricks { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.wall-brick {
  background: #6b3a2a; color: #e8c9a0; font-weight: 800;
  border-radius: 8px; padding: .6rem 1rem; cursor: pointer;
  border: 3px solid #4a2a1a; font-size: .95rem;
  transition: transform .15s var(--bounce);
  box-shadow: 0 4px 0 #4a2a1a;
}
.wall-brick:hover { transform: translateY(-3px); }
.wall-brick.broken {
  animation: brick-crack .4s forwards;
  pointer-events: none;
}
@keyframes brick-crack {
  0%  { transform: scale(1) rotate(0); opacity: 1; }
  50% { transform: scale(1.2) rotate(5deg); opacity: .7; }
  100%{ transform: scale(0) rotate(15deg); opacity: 0; }
}
.wall-reveal {
  font-family: 'Fredoka'; font-weight: 700; font-size: 1.3rem;
  text-align: center; color: var(--meadow); padding: 1.2rem;
  background: linear-gradient(90deg, #e8f5ec, #fff);
  border-radius: 14px; border: 3px solid var(--meadow);
  animation: pop-in-scale .5s var(--bounce);
}

/* ============================== Light Sorter Game */
.block.light-sorter { border-left: 10px solid var(--lamp); }
.sorter-card-pool { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1rem 0; }
.sorter-card {
  background: var(--paper); border: 3px solid #eee2cb;
  border-radius: 14px; padding: .7rem 1rem; cursor: pointer;
  font-weight: 700; font-size: .95rem; position: relative;
  transition: transform .15s var(--bounce);
}
.sorter-card:hover:not(.sorted) { transform: translateY(-3px); border-color: var(--lamp); }
.sorter-card.sort-correct { background: #e3f4e8; border-color: var(--meadow); cursor: default; }
.sorter-card.sort-wrong { background: #fae5e4; border-color: #c0504d; animation: shake .35s; cursor: default; }
.sorter-choice { display: flex; gap: .4rem; margin-top: .5rem; }
.sorter-btn {
  font-size: 1.4rem; background: var(--paper); border: 2px solid #eee2cb;
  border-radius: 10px; padding: .3rem .7rem; cursor: pointer;
  transition: transform .1s var(--bounce);
}
.sorter-btn:hover { transform: scale(1.2); border-color: var(--lamp); }
.sorter-baskets { display: flex; gap: 1rem; margin: 1rem 0; }
.sorter-basket {
  flex: 1; text-align: center; padding: 1rem; border-radius: var(--radius);
  font-family: 'Fredoka'; font-weight: 700; font-size: 1.1rem;
}
.light-basket { background: #fff8e0; border: 3px solid var(--lamp); }
.dark-basket { background: #1e2547; color: #fff; border: 3px solid var(--sky-mid); }
.basket-count { font-size: 2rem; color: var(--lamp); }
.dark-basket .basket-count { color: var(--lamp-soft); }
.sorter-result { font-family: 'Fredoka'; font-weight: 700; font-size: 1.2rem; color: var(--meadow); text-align: center; }

/* ============================== Badge system */
.badge-earned-wrap { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1rem; }
.badge-earned {
  display: flex; align-items: center; gap: .5rem;
  background: var(--sky); color: #fff; border-radius: 999px;
  padding: .5rem 1.1rem; box-shadow: var(--shadow);
}
.badge-emoji { font-size: 1.4rem; }
.badge-label { font-size: .95rem; }

/* Badge wall on dashboard */
.badge-wall { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0; }
.badge-chip {
  background: var(--paper); border: 2px solid var(--lamp-soft);
  border-radius: 999px; padding: .3rem .8rem;
  font-size: .88rem; font-weight: 800; display: flex; align-items: center; gap: .35rem;
}
.badge-chip.earned { background: var(--sky); color: #fff; border-color: var(--sky-mid); }