body.kid-mode { background: var(--tint, var(--blue-pale)); }

.kid-shell { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.kid-header {
  padding: 1.25rem 1rem .75rem; text-align: center;
  background: var(--strong, var(--sky)); color: #fff;
}
.kid-header .avatar { font-size: 2.4rem; }
.kid-main { flex: 1; padding: 1rem; padding-bottom: 96px; overflow-x: hidden; }

.kid-section-title { font-size: 1.05rem; font-weight: 800; margin: 1.25rem 0 .5rem; }

.kid-row {
  display: flex; align-items: center; gap: .75rem;
  background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-soft);
  padding: .85rem 1rem; margin-bottom: .6rem; min-height: 56px; font-size: 1.1rem;
}
.kid-row.prereader { min-height: 64px; font-size: 1.3rem; }
.kid-row.pending { border: 2px solid var(--gold); background: var(--sunshine); }
.kid-row.pending .check { border-color: var(--gold); }
.kid-row .check {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid #ddd;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  flex-shrink: 0; background: #fff;
}
.kid-row.done { opacity: .55; }
.kid-row.done .check { background: var(--lime); border-color: var(--lime); }
.kid-row .stars { margin-left: auto; color: var(--gold); font-weight: 800; }

.kid-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; background: #fff;
  border-top: 1px solid #eee; display: flex; z-index: 400;
}
.kid-tabbar a {
  flex: 1; text-align: center; padding: .8rem 0; min-height: 56px; text-decoration: none;
  color: var(--ink-soft); font-size: 1.4rem; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .1rem;
}
.kid-tabbar a.active { color: var(--coral-dark); }
.kid-tabbar a .label { font-size: .65rem; font-weight: 700; }

#celebration {
  position: fixed; inset: 0; background: rgba(6,41,53,.85); color: #fff; z-index: 2000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 1.5rem;
}
#celebration .burst { font-size: 3rem; }
#celebration h2 { color: #fff; font-size: 1.6rem; }

.star-fly {
  position: fixed; font-size: 1.5rem; pointer-events: none; z-index: 1500;
  transition: transform 1s ease-in, opacity 1s ease-in;
}