:root{--g:#2f7d5b;--g2:#47a77a;--y:#ffd45c;--o:#ff9f43;--b:#3d7bd9;--r:#e8603c;--ink:#22313f;--bg:#f4f8ef;--card:#fff;--s1:#2a6fd6;--s2:#d6452a;--rad:22px;font-size:18px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:"Andika","Comic Neue","Trebuchet MS",system-ui,sans-serif;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
#app{min-height:100%;display:flex;flex-direction:column;background:radial-gradient(circle at 20% 0,#fff8d6 0,transparent 40%),radial-gradient(circle at 100% 100%,#d9f0e3 0,transparent 50%)}
.top{display:flex;align-items:center;gap:.6rem;padding:calc(.5rem + env(safe-area-inset-top)) 1rem .5rem;background:var(--g);color:#fff}
.top .title{flex:1;display:flex;align-items:center;gap:.5rem;font-size:1.2rem}
.top .logo{width:34px;height:34px;background:url(../img/bruno.svg) center/contain no-repeat}
.stars{background:#ffffff26;border-radius:99px;padding:.25rem .8rem;font-weight:700}
.icon-btn{border:0;background:#ffffff26;color:inherit;font-size:1.4rem;border-radius:14px;min-width:48px;min-height:48px;cursor:pointer}
.screen{flex:1;padding:1rem;max-width:1100px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:1rem}
.hero{display:flex;align-items:center;gap:1rem;justify-content:center;margin-top:1rem}
.hero.small{margin-top:0}
.bruno{width:120px;height:120px;flex:none;background:url(../img/bruno.svg) center/contain no-repeat;animation:bob 3s ease-in-out infinite}
.bruno.big{width:190px;height:190px}.bruno.small{width:72px;height:72px}
.bruno.happy{animation:jump .7s ease-in-out 3}
.bruno.listen{animation:listen 1s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px) rotate(-2deg)}}@keyframes jump{50%{transform:translateY(-30px) scale(1.05)}}@keyframes listen{50%{transform:scale(1.06) rotate(3deg)}}
.bubble{background:#fff;border-radius:var(--rad);padding:1rem 1.2rem;box-shadow:0 4px 0 #0001;position:relative;font-size:1.15rem;max-width:620px;line-height:1.4}
.bubble:before{content:"";position:absolute;left:-14px;top:40%;border:8px solid transparent;border-right:14px solid #fff}
.card{background:var(--card);border-radius:var(--rad);padding:1.2rem;box-shadow:0 6px 0 #0000000f}
.center{text-align:center}
.login{max-width:460px;margin:0 auto;display:flex;flex-direction:column;gap:.7rem;width:100%}
.login label{font-weight:700;font-size:1.1rem}
input.code{font-size:2rem;text-align:center;letter-spacing:.08em;padding:.6rem;border-radius:16px;border:3px solid #cfe3d6;font-family:ui-monospace,Menlo,monospace;text-transform:uppercase;-webkit-user-select:text;user-select:text}
.btn{border:0;border-radius:16px;padding:.7rem 1.2rem;font:inherit;font-weight:700;background:#e7efe9;color:var(--ink);cursor:pointer;min-height:52px;box-shadow:0 4px 0 #0002;touch-action:manipulation}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #0002}
.btn.primary{background:var(--o);color:#fff}.btn.big{font-size:1.3rem}.btn.huge{font-size:1.6rem;padding:1.1rem 2rem;align-self:center;min-width:300px}
.btn.link{background:none;box-shadow:none;text-decoration:underline;color:var(--g);min-height:44px}
.btn:disabled{opacity:.5}
.msg{min-height:1.2em;color:var(--r);font-weight:700;text-align:center}
.meter{height:16px;background:#e5ece7;border-radius:9px;overflow:hidden;margin:1rem auto;max-width:360px}.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--g2),var(--y));transition:width .08s}
.worlds{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.world{border:0;border-radius:var(--rad);padding:1rem;min-height:150px;font:inherit;color:#fff;font-weight:700;font-size:1.15rem;cursor:pointer;box-shadow:0 6px 0 #0002;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;position:relative}
.world .em{font-size:3rem}.world small{font-weight:400;opacity:.9}
.world .wst{position:absolute;top:.5rem;right:.7rem;font-size:.9rem;background:#0002;border-radius:99px;padding:.1rem .5rem}
.mode-note{text-align:center;color:#56715f;font-size:.9rem}
.exhead{display:flex;align-items:center;gap:.8rem}.exhead .bubble{flex:1;max-width:none}
.speak{background:var(--g);color:#fff}
.progress{display:flex;gap:.4rem;justify-content:center}.progress i{width:16px;height:16px;border-radius:50%;background:#d5e3d9}.progress i.done{background:var(--y)}.progress i.cur{background:var(--o);transform:scale(1.25)}
.exbody{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;padding-bottom:1rem}
.bigemo{font-size:7rem;line-height:1}
.opts{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.opt{min-width:120px;min-height:96px;font-size:2.4rem;border-radius:20px;border:4px solid #d6e6dc;background:#fff;cursor:pointer;font-family:inherit;font-weight:700;color:var(--ink);box-shadow:0 5px 0 #0001;padding:.3rem 1rem}
.opt.word{font-size:2rem}.opt.pic{font-size:4rem}
.opt.ok{border-color:var(--g2);background:#e2f6ea}.opt.no{border-color:#f2b9a7;background:#fff3ee;opacity:.75}
.letters{font-size:4.2rem;letter-spacing:.06em;min-height:5rem;font-weight:700}
.letters span{display:inline-block;animation:pop .35s}@keyframes pop{0%{transform:scale(.3);opacity:0}}
.wordlist{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;justify-content:center;font-size:3rem;font-weight:700;max-width:900px}
.wordlist .w{padding:.2rem .5rem;border-radius:12px}
.syl{display:inline-block;position:relative;padding-bottom:.25em}
.syl:after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:.28em;border:4px solid currentColor;border-top:0;border-radius:0 0 50% 50%/0 0 100% 100%;opacity:.55}
.syl.s1{color:var(--s1)}.syl.s2{color:var(--s2)}
.flash{font-size:4.5rem;font-weight:700;min-height:6rem;display:flex;align-items:center}
.sentence{font-size:2.2rem;line-height:1.5;text-align:center;max-width:900px;font-weight:700}
.sentence .tw{display:inline-block;padding:.1rem .35rem;margin:.15rem;border-radius:12px;border:3px solid transparent;cursor:pointer}
.sentence .tw.sel{border-color:var(--o);background:#fff2df}
.yesno{display:flex;gap:1.5rem}.yesno .btn{font-size:1.6rem;min-width:220px;min-height:90px}
.story{background:#fffdf5;border-radius:var(--rad);padding:1.2rem 1.6rem;font-size:1.65rem;line-height:1.75;max-width:900px;box-shadow:0 4px 0 #0001;-webkit-user-select:none}
.story h3{margin:.1rem 0 .6rem;color:var(--g)}
.story.k1{font-size:2.1rem;line-height:1.9}.story.k2{font-size:1.9rem}
.story .w{border-radius:8px;padding:0 .1rem}
.w.st-ok{background:#d6f3e1}.w.st-close{background:#e9f7d0}.w.st-sub{background:#ffe0d3}.w.st-omit{background:#ffe0d3;text-decoration:line-through wavy #e8603c66}
.question{font-size:1.6rem;font-weight:700;text-align:center}
.recbar{display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap}
.recbtn{width:120px;height:120px;border-radius:50%;border:0;background:var(--r);color:#fff;font-size:3rem;box-shadow:0 6px 0 #0003;cursor:pointer}
.recbtn.on{animation:pulse 1s infinite;background:#c0392b}@keyframes pulse{50%{box-shadow:0 0 0 18px #e8603c33}}
.timer{font-size:1.4rem;font-weight:700;min-width:4ch}
.thinking{font-size:1.3rem;color:#56715f}
.judge{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;max-width:900px}
.judge .w{font-size:1.5rem;padding:.4rem .7rem;border-radius:12px;border:3px solid #cde3d4;background:#fff;cursor:pointer;font-weight:700}
.judge .w.bad{border-color:var(--r);background:#ffe8df;text-decoration:line-through}
.tnote{font-size:.95rem;color:#56715f;text-align:center;max-width:700px}
.why{background:#fff;border:2px dashed #9cc6ad;border-radius:16px;padding:.6rem 1rem;font-size:.9rem;color:#33503f}
.why b{color:var(--g)}
.reward{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;margin-top:2rem}
.reward h1{font-size:2.6rem;margin:0;color:var(--g)}.rwstars{font-size:3.5rem;letter-spacing:.2em}
.rwstars span{display:inline-block;animation:pop .5s backwards}
dialog{border:0;border-radius:24px;max-width:640px;width:94%;padding:0;box-shadow:0 20px 60px #0004}
.tpanel{padding:1.2rem 1.4rem;display:flex;flex-direction:column;gap:.7rem}.tpanel h2{margin:0}.tpanel select{font:inherit;padding:.4rem;border-radius:10px;margin-left:.5rem}
.tpanel .row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.chk{display:flex;gap:.5rem;align-items:center}
.small{font-size:.85rem}.muted{color:#667}
.tprofile .bar{display:grid;grid-template-columns:13rem 1fr 3rem;gap:.5rem;align-items:center;font-size:.8rem;margin:.15rem 0}
.tprofile .bar div{height:12px;background:#eef3ef;border-radius:6px;position:relative}.tprofile .bar div i{position:absolute;top:0;bottom:0;background:#9fd4b5;border-radius:6px}.tprofile .bar div b{position:absolute;top:-2px;bottom:-2px;width:4px;background:var(--g);border-radius:2px}
#toast{position:fixed;left:50%;bottom:calc(1.2rem + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(150%);background:var(--ink);color:#fff;padding:.8rem 1.2rem;border-radius:14px;transition:transform .3s;z-index:9;max-width:90%}
#toast.show{transform:translateX(-50%)}
@media (max-width:760px){.worlds{grid-template-columns:repeat(2,1fr)}.wordlist{font-size:2.2rem}.btn.huge{min-width:0;width:100%}.bruno.big{width:130px;height:130px}.story{font-size:1.35rem}}
@media (orientation:landscape) and (max-height:820px){.hero{margin-top:0}.bruno.big{width:150px;height:150px}}

.teppich{display:flex;flex-direction:column;gap:1rem;font-size:2.8rem;font-weight:700}.teppich .trow{display:flex;gap:1.6rem;justify-content:center}.teppich .syl:after{display:none}
.m-sinnschritte .phrase{white-space:nowrap}.pbreak{color:#e8603c;font-weight:700;padding:0 .2rem}
.m-theater .speech{background:#fff2c8;border-radius:10px;padding:0 .15rem}