:root{
  --green:#20a46a; --green-d:#168553; --green-l:#d9f4e6;
  --orange:#ff8a1f; --orange-d:#d96d08; --orange-l:#ffe9d0;
  --red:#e5484d; --red-d:#b9343a; --red-l:#fde4e4;
  --blue:#2f80ed; --ink:#2b2b2b; --ink2:#6b6b6b; --line:#e8dfd0;
  --bg:#fff8ee; --card:#fff; --gold:#ffc43d;
  --sat:env(safe-area-inset-top); --sab:env(safe-area-inset-bottom);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font:17px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Telugu Sangam MN",sans-serif;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;overscroll-behavior:none}
#app{min-height:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3{margin:0}
.screen{flex:1;display:flex;flex-direction:column;padding:calc(var(--sat) + 14px) 16px calc(var(--sab) + 20px)}
.center{align-items:center;justify-content:center;text-align:center;gap:14px}
.pad-top{height:6px}

/* buttons */
.btn{display:block;width:100%;padding:15px 18px;border-radius:16px;background:var(--green);color:#fff;
  font-weight:800;font-size:18px;letter-spacing:.3px;text-transform:uppercase;box-shadow:0 4px 0 var(--green-d);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--green-d)}
.btn.orange{background:var(--orange);box-shadow:0 4px 0 var(--orange-d)}
.btn.orange:active{box-shadow:0 1px 0 var(--orange-d)}
.btn.red{background:var(--red);box-shadow:0 4px 0 var(--red-d)}
.btn.ghost{background:#fff;color:var(--ink2);border:2px solid var(--line);box-shadow:0 4px 0 var(--line);text-transform:none}
.btn[disabled]{opacity:.45;pointer-events:none}
.link{color:var(--blue);font-weight:700;padding:8px}

/* top bar */
.top{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.chip{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:var(--card);border:2px solid var(--line);font-weight:800}
.chip.fire{color:var(--orange-d)} .chip.xp{color:#b58900}
.who{flex:1;display:flex;align-items:center;gap:8px;font-weight:800;font-size:19px;min-width:0}
.who .av{font-size:30px}
.who span.nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iconbtn{font-size:24px;width:44px;height:44px;border-radius:14px;background:var(--card);border:2px solid var(--line)}

/* hero / goal */
.hero{display:flex;align-items:center;gap:14px;background:var(--green);color:#fff;border-radius:22px;padding:16px;margin-bottom:14px}
.parrot{font-size:58px;line-height:1}
.hero .say{flex:1;font-weight:700;font-size:18px}
.hero .say small{display:block;font-weight:600;opacity:.9;font-size:14px;margin-top:4px}
.ring{--p:0;width:78px;height:78px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--gold) calc(var(--p)*1%),rgba(255,255,255,.28) 0)}
.ring>div{width:60px;height:60px;border-radius:50%;background:var(--green);display:grid;place-items:center;font-weight:800;font-size:15px;text-align:center;line-height:1.05}
.levelbar{height:10px;background:rgba(255,255,255,.3);border-radius:99px;overflow:hidden;margin-top:8px}
.levelbar>i{display:block;height:100%;background:var(--gold);border-radius:99px}

/* path */
.unit{font-weight:800;font-size:20px;margin:6px 4px 10px}
.lesson{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--card);border:2px solid var(--line);
  border-radius:20px;padding:12px 14px;margin-bottom:10px;box-shadow:0 4px 0 var(--line)}
.lesson:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.lesson .bub{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:32px;background:var(--green-l);flex:none}
.lesson.next{border-color:var(--green);box-shadow:0 4px 0 var(--green)}
.lesson.next .bub{background:var(--green)}
.lesson.locked{opacity:.55}
.lesson.locked .bub{background:#eee;filter:grayscale(1)}
.lesson h3{font-size:18px}
.lesson small{color:var(--ink2);display:block}
.stars{margin-left:auto;font-size:18px;white-space:nowrap}
.review{display:flex;gap:10px;margin:6px 0 14px}
.review .btn{font-size:16px}

/* lesson */
.lhead{display:flex;align-items:center;gap:12px;padding:calc(var(--sat) + 12px) 16px 6px}
.x{font-size:24px;color:var(--ink2);width:36px;height:36px}
.prog{flex:1;height:16px;border-radius:99px;background:var(--line);overflow:hidden}
.prog>i{display:block;height:100%;width:0;background:var(--green);border-radius:99px;transition:width .35s}
.body{flex:1;padding:10px 16px 16px;display:flex;flex-direction:column;gap:14px;overflow-y:auto}
.foot{padding:12px 16px calc(var(--sab) + 14px);background:var(--bg);transition:background .2s}
.foot.good{background:var(--green-l)} .foot.bad{background:var(--red-l)}
.fb{font-weight:800;font-size:20px;margin-bottom:10px}
.foot.good .fb{color:var(--green-d)} .foot.bad .fb{color:var(--red-d)}
.fb small{display:block;font-weight:600;font-size:15px;color:var(--ink)}
.q{font-weight:800;font-size:22px}
.big{font-size:34px;font-weight:800;text-align:center;line-height:1.15}
.script{font-size:24px;color:var(--ink2);text-align:center;font-family:"Telugu Sangam MN","Noto Sans Telugu",sans-serif}
.emoji{font-size:84px;text-align:center;line-height:1.1}
.note{background:var(--orange-l);border-radius:14px;padding:10px 14px;font-size:15px;color:#7a4300}
.speak{align-self:center;width:96px;height:96px;border-radius:50%;background:var(--blue);color:#fff;font-size:42px;box-shadow:0 5px 0 #1f5fb8}
.speak.sm{width:56px;height:56px;font-size:26px;box-shadow:0 3px 0 #1f5fb8}
.speak:active{transform:translateY(3px);box-shadow:0 2px 0 #1f5fb8}
.opts{display:grid;gap:10px}
.opt,.tile{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:14px;font-weight:700;font-size:19px;text-align:center;box-shadow:0 3px 0 var(--line)}
.opt:active,.tile:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.opt.ok,.tile.ok{background:var(--green-l);border-color:var(--green);box-shadow:0 3px 0 var(--green)}
.opt.no,.tile.no{background:var(--red-l);border-color:var(--red);box-shadow:0 3px 0 var(--red)}
.tile.sel{border-color:var(--blue);background:#e8f1fe;box-shadow:0 3px 0 var(--blue)}
.tile[disabled]{opacity:.35;pointer-events:none}
.opts.off{pointer-events:none}
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pairs .tile{font-size:16px;min-height:58px}
.shake{animation:shake .35s}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.line{min-height:76px;border-bottom:3px solid var(--line);border-top:3px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;padding:8px 0;align-content:flex-start}
.bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:56px}
.tile.inline{padding:10px 14px}
.rec{display:flex;flex-direction:column;align-items:center;gap:12px}
.mic{width:96px;height:96px;border-radius:50%;background:var(--red);color:#fff;font-size:42px;box-shadow:0 5px 0 var(--red-d)}
.mic.on{animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.08)}}
.row{display:flex;gap:12px;align-items:center;justify-content:center}
.hint{text-align:center;color:var(--ink2);font-size:15px}

/* result */
.stars.big{font-size:54px;margin:0}
.stat{display:flex;gap:10px;width:100%}
.stat>div{flex:1;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px 6px}
.stat b{display:block;font-size:24px}
.stat small{color:var(--ink2);font-weight:700}
.badge-pop{background:var(--orange-l);border-radius:16px;padding:10px 14px;font-weight:800;color:#7a4300;width:100%}

/* cards, badges, settings */
.card{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:14px;margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bd{text-align:center;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px 6px;font-size:13px;font-weight:700}
.bd .e{font-size:38px;display:block}
.bd.lock{opacity:.35;filter:grayscale(1)}
.seg{display:flex;gap:8px}
.seg button{flex:1;padding:12px 6px;border-radius:14px;border:2px solid var(--line);background:#fff;font-weight:800}
.seg button.on{border-color:var(--green);background:var(--green-l);color:var(--green-d)}
.avs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.avs button{font-size:34px;padding:8px;border-radius:16px;border:3px solid var(--line);background:#fff}
.avs button.on{border-color:var(--green);background:var(--green-l)}
input[type=text]{width:100%;font:inherit;font-size:20px;font-weight:700;padding:14px;border-radius:14px;border:2px solid var(--line);background:#fff;-webkit-user-select:text;user-select:text}
label.k{display:block;font-weight:800;margin:14px 0 8px}
.prof{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:18px;padding:12px 14px;margin-bottom:10px;box-shadow:0 4px 0 var(--line)}
.prof .av{font-size:40px}.prof b{font-size:20px}.prof small{display:block;color:var(--ink2);font-weight:600}
.bars{display:flex;align-items:flex-end;gap:6px;height:70px;margin:10px 0 4px}
.bars>div{flex:1;background:var(--green);border-radius:6px 6px 0 0;min-height:3px}
.bars-l{display:flex;gap:6px;font-size:12px;color:var(--ink2);text-align:center}.bars-l>span{flex:1}
.warn{background:var(--orange-l);color:#7a4300;border-radius:14px;padding:10px 14px;font-size:14px}

#toast{position:fixed;left:50%;bottom:calc(var(--sab) + 110px);transform:translate(-50%,20px);background:#333;color:#fff;padding:10px 16px;border-radius:14px;font-weight:700;opacity:0;pointer-events:none;transition:.25s;z-index:20;max-width:86%;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
.confetti{position:fixed;top:-30px;font-size:26px;pointer-events:none;animation:fall linear forwards;z-index:15}
@keyframes fall{to{transform:translateY(110vh) rotate(360deg);opacity:.9}}
@media (prefers-reduced-motion:reduce){.confetti{display:none}.mic.on{animation:none}}