/* LUMO — guided learning: the child's home (today's session), mini-lessons, fluency, mastery badges. */

/* home: today's session */
.scr-home { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; padding-left: 11rem; padding-right: 2rem; }
.home-hero { text-align: center; }
.home-hi small { display: inline-block; padding: 0.25rem 0.9rem; border-radius: 99px; background: rgba(255, 255, 255, 0.85); box-shadow: var(--lift-s); font-weight: 800; color: var(--ink-2); }
.home-hi h1 { margin: 0.6rem 0 0; font-size: 2.4rem; font-weight: 600; text-shadow: 0 3px 0 rgba(255, 255, 255, 0.8); }
body[data-time='night'] .home-hi h1 { color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
.plan-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; max-width: 70rem; }
.plan-card { --c: var(--sun); position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; width: 11.5rem; padding: 1.1rem 0.8rem 1rem; border-radius: 1.6rem; background: #fff; box-shadow: 0 0.35rem 0 color-mix(in srgb, var(--c) 55%, #fff), var(--lift); border-top: 0.45rem solid var(--c); animation: popIn 0.5s var(--spring) both; }
.plan-card.next { transform: translateY(-0.5rem) scale(1.04); box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--c) 30%, transparent), 0 0.35rem 0 color-mix(in srgb, var(--c) 55%, #fff), var(--lift); }
.plan-card.done { opacity: 0.6; filter: saturate(0.6); }
.plan-card.placement { border-top-color: var(--violet); }
.pc-art { width: 4.4rem; }
.pc-txt { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pc-txt small { color: var(--c); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; }
.pc-txt b { font-family: 'Fredoka'; font-weight: 600; font-size: 1.1rem; line-height: 1.2; }
.pc-check { position: absolute; top: -0.9rem; right: -0.7rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--good); color: #fff; font-weight: 900; box-shadow: var(--lift-s); }
.home-btns { display: flex; gap: 1rem; align-items: center; }
.home-meta { margin: 0; font-weight: 800; color: var(--ink-2); }
body[data-time='night'] .home-meta { color: #e8e2ff; }

/* mini-lesson */
.lesson { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; }
.lesson-head { display: flex; align-items: center; gap: 1rem; }
.lesson-icon { width: 4rem; }
.lesson-titles small { display: block; font-weight: 800; color: var(--zone); text-transform: uppercase; letter-spacing: 0.06em; }
.lesson-titles h2 { margin: 0; font-weight: 600; font-size: 2rem; }
.lesson-board { min-height: 42vh; width: min(60rem, 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; padding: 1.6rem; border-radius: 2rem; background: #fffdf7; box-shadow: var(--lift); border: 0.25rem solid color-mix(in srgb, var(--zone) 30%, #fff); }
.lesson-board .show { flex: none; }
.lesson-say { margin: 0; max-width: 46rem; text-align: center; font-family: 'Fredoka'; font-weight: 500; font-size: 1.5rem; line-height: 1.35; }
.lesson-dots { display: flex; gap: 0.5rem; }
.lesson-dots i { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #e7e1f2; transition: background 0.3s; }
.lesson-dots i.on { background: var(--zone); }
.lesson-go { font-size: 1.6rem; min-height: 4rem; padding: 0 2.6rem; animation: pulse 1.6s infinite; }

/* fluency */
.fluency { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; }
.fl-bar { width: min(40rem, 90%); height: 1rem; border-radius: 99px; background: #efeaf6; overflow: hidden; }
.fl-bar i { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffd84f, #ff9a1f); transition: width 0.2s linear; }
.fl-q { min-height: 5rem; padding: 0.4rem 2.4rem; border-radius: 1.6rem; background: #fff; box-shadow: var(--lift); font-family: 'Fredoka'; font-weight: 600; font-size: clamp(2.6rem, 8vmin, 4.6rem); }
.fl-opts { display: flex; gap: 1rem; }
.fl-opt { min-width: 7rem; min-height: 6rem; border-radius: 1.4rem; background: #fff; box-shadow: 0 0.35rem 0 #f0c45c, var(--lift-s); font-family: 'Fredoka'; font-weight: 600; font-size: 2.6rem; transition: transform 0.1s; }
.fl-opt:active { transform: translateY(0.2rem); }
.fl-opt.ok { background: #d8f5e3; }
.fl-opt.ko { background: #ffe1e1; }
.fl-score { min-height: 2rem; color: #e0900b; font-size: 1.3rem; letter-spacing: 0.1em; text-align: center; max-width: 40rem; }
.fl-score b { font-family: 'Fredoka'; font-size: 1.8rem; color: var(--good); letter-spacing: 0; }

/* result: mastery badge */
.mastery-badge { margin-top: 0.4rem; padding: 0.35rem 1.2rem; border-radius: 99px; background: linear-gradient(90deg, #5ee08a, #2fbf71); color: #fff; font-family: 'Fredoka'; font-weight: 600; font-size: 1.15rem; box-shadow: var(--lift-s); animation: popIn 0.5s 1.2s var(--spring) both; }
.mastery-badge.soft { background: #f3eff9; color: var(--ink-2); font-size: 0.95rem; }
.session-end .end-item span { display: flex; flex-direction: column; }
.session-end .end-item small { color: var(--ink-2); font-weight: 700; }
.session-end .end-item.win { box-shadow: 0 0 0 0.25rem var(--good), var(--lift-s); }

/* profile form additions */
.np-select { height: 3.4rem; border-radius: 1rem; border: 0.18rem solid var(--line); padding: 0 1rem; font-size: 1.2rem; font-weight: 700; background: var(--paper); }
.modes { display: flex; flex-direction: column; gap: 0.4rem; }
.mode { padding: 0.6rem 1rem; border-radius: 1rem; background: var(--paper); box-shadow: inset 0 0 0 0.15rem var(--line); font-weight: 800; text-align: left; }
.mode.on { background: #fff4d6; box-shadow: inset 0 0 0 0.22rem var(--sun); }

@media (max-aspect-ratio: 1/1) {
  .scr-home { padding: 5rem 1rem 9rem; }
  .plan-card { width: 9.5rem; }
}
body[data-time='night'] .session-end .sub { color: #e8e2ff; }