:root{--bg:#F7F8FC;--bg2:#F7F8FC;--paper:#fff;--ink:#2A1660;--muted:#7D7499;--sun:#FFC933;--sky:#7C4DFF;--coral:#FF6B6B;--leaf:#22C55E;--line:#E4DCFB;--lav:#F1ECFF;--violet:#7C4DFF;--violet2:#9C7BFF;--shadow:0 8px 24px rgba(91,60,190,.10);
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
:root[data-theme="dark"]{--bg:#17122B;--bg2:#17122B;--paper:#231C40;--ink:#F4F0FF;--muted:#ABA2CC;--line:#3A3066;--lav:#2E2554;--shadow:0 10px 30px rgba(0,0,0,.35)}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}*{box-sizing:border-box}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:700;-webkit-font-smoothing:antialiased}
.app{max-width:480px;margin:0 auto;padding:16px 16px 96px;min-height:100vh;display:flex;flex-direction:column;position:relative}
h1{font-weight:900;font-size:28px;margin:8px 0 2px;letter-spacing:-.01em}h2{font-size:20px;margin:18px 0 10px;font-weight:900}
.sub{color:var(--muted);margin:0 0 16px;font-size:15px}
button{font:inherit;cursor:pointer;border:0;border-radius:18px;color:inherit;background:none}
button:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.tabs{position:fixed;left:0;right:0;bottom:0;background:var(--paper);border-top:0;box-shadow:0 -6px 24px rgba(43,45,66,.08);display:flex;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
.tabs button{flex:1;padding:8px 4px;font-size:12px;color:var(--muted);border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:2px}
.tabs button span{font-size:22px;display:flex}.tabs button svg{width:24px;height:24px}.tabs button.on{color:var(--violet);background:var(--lav)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tile{background:var(--paper);padding:18px 16px;text-align:left;border:0;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;transition:transform .12s;border-radius:26px}
.tile:active{transform:scale(.97)}.tile .glyph{font-size:44px;font-weight:900;line-height:1;color:var(--sky)}.tile .name{font-size:15px}
.tile .stars{color:var(--sun);font-size:14px;letter-spacing:2px}.tile .stars.none{color:var(--line)}
.modes{display:flex;gap:10px;margin-bottom:14px}.modes button{flex:1;background:var(--paper);border:3px solid var(--line);padding:12px;font-size:15px;border-radius:16px}.modes button.on{border-color:var(--sky);color:var(--sky)}
.top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.back{background:var(--paper);width:44px;height:44px;border-radius:14px;font-size:20px;border:3px solid var(--line);flex:none}
.track{flex:1;height:14px;background:var(--paper);border-radius:99px;border:3px solid var(--line);overflow:hidden}.track i{display:block;height:100%;background:var(--leaf);width:0;transition:width .35s}
.card{background:var(--paper);border-radius:32px;padding:26px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:0;box-shadow:var(--shadow);min-height:340px}
.pic{font-size:110px;line-height:1;margin-bottom:6px;user-select:none}.word{font-size:38px;font-weight:900;letter-spacing:.02em;color:var(--violet)}.word b{color:#FF9F1C}
.hint{color:var(--muted);font-size:15px;min-height:22px;margin:0}.heard{font-size:15px;color:var(--muted);min-height:22px}
.actions{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.mic{background:linear-gradient(90deg,var(--violet2),var(--violet));color:#fff;font-size:19px;font-weight:800;padding:18px;border-radius:999px;box-shadow:0 8px 20px rgba(124,77,255,.30);transition:transform .08s,box-shadow .08s}
.mic:active,.mic.on{transform:scale(.98)}
.mic.blue{background:var(--violet)}
.row{display:flex;gap:12px}.row button{flex:1;padding:14px;font-size:16px;background:var(--paper);border:3px solid var(--line)}.row .ok{border-color:var(--leaf);color:var(--leaf)}.row .listen{border-color:var(--sky);color:var(--sky)}
.warm .pic{font-size:90px}.warm p{font-size:18px;margin:4px 0 0;max-width:30ch}.warm .count{font-size:60px;font-weight:900;color:var(--sky);line-height:1}
.card.good{border-color:var(--leaf);animation:pop .4s}.card.again{border-color:var(--sun)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
.burst{position:fixed;left:0;top:0;z-index:70;pointer-events:none;width:100%;height:100%;overflow:hidden}.burst span{position:absolute;font-size:26px;animation:fall 1.2s ease-out forwards}
.burst span.rain{top:-50px;animation:rain 1.9s ease-in forwards}
@keyframes rain{from{transform:translateY(0) rotate(0);opacity:1}85%{opacity:1}to{transform:translateY(115vh) rotate(300deg);opacity:0}}
.burst .lvstar{position:absolute;left:50%;top:40%;font-size:130px;line-height:1;transform:translate(-50%,-50%) scale(0);filter:drop-shadow(0 6px 18px rgba(255,190,0,.55));animation:lvpop 1.5s ease-out forwards}
@keyframes lvpop{0%{transform:translate(-50%,-50%) scale(0) rotate(-40deg);opacity:0}25%{transform:translate(-50%,-50%) scale(1.2) rotate(10deg);opacity:1}45%{transform:translate(-50%,-50%) scale(1) rotate(0)}75%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.4);opacity:0}}
@keyframes fall{from{transform:translateY(-10px) rotate(0);opacity:1}to{transform:translateY(60vh) rotate(180deg);opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* feed game */
.beast{font-size:96px;line-height:1;transition:transform .3s}.beast.eat{transform:scale(1.25)}
.plate{display:flex;gap:10px;width:100%;margin-top:8px}.plate button{flex:1;background:var(--bg);border:3px solid var(--line);border-radius:20px;padding:12px 4px;font-size:44px;display:flex;flex-direction:column;align-items:center;gap:4px}
.plate button small{font-size:13px}.plate button.no{opacity:.35}
.big{font-size:84px;line-height:1}.total{font-size:22px;margin:6px 0 0}
.parent{margin-top:20px;background:var(--paper);border:3px solid var(--line);border-radius:22px;padding:16px 18px;font-size:14px;color:var(--muted)}.parent b{color:var(--ink)}.parent ul{margin:8px 0 0;padding-left:18px}
/* therapists */
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px}.chips button{flex:none;padding:8px 14px;border-radius:99px;background:var(--paper);border:3px solid var(--line);font-size:14px}.chips button.on{border-color:var(--sky);color:var(--sky)}
.list{display:flex;flex-direction:column;gap:12px}
.t{background:var(--paper);border:3px solid var(--line);border-radius:22px;padding:14px;display:flex;gap:12px;text-align:left;align-items:center}
.t .av{font-size:44px;width:58px;height:58px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;flex:none}
.t .nm{font-size:16px;font-weight:900}.t .meta{font-size:13px;color:var(--muted);margin-top:2px}.t .price{font-size:17px;font-weight:900;color:var(--leaf);white-space:nowrap}.t .price small{display:block;font-size:12px;color:var(--muted);font-weight:700}
.prof{background:var(--paper);border:3px solid var(--line);border-radius:28px;padding:22px 18px;text-align:center}
.prof .av{font-size:72px}.prof .nm{font-size:22px;font-weight:900;margin-top:6px}.prof p{color:var(--muted);font-size:14px;margin:8px 0}
.tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0}.tags span{background:var(--bg);border-radius:99px;padding:4px 10px;font-size:13px}
.slots{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px}.slots button{background:var(--bg);border:3px solid var(--line);border-radius:14px;padding:10px 4px;font-size:14px}.slots button.on{border-color:var(--leaf);color:var(--leaf)}
.box{background:var(--paper);border:3px solid var(--line);border-radius:22px;padding:16px 18px;margin-bottom:12px}.box .k{font-size:13px;color:var(--muted)}.box .v{font-size:18px;font-weight:900}
.tasks{display:flex;flex-direction:column;gap:8px}.task{display:flex;gap:10px;align-items:center;background:var(--bg);border-radius:14px;padding:10px 12px;font-size:14px}.task .st{margin-left:auto;color:var(--leaf);font-weight:900;white-space:nowrap}
.bar{height:10px;background:var(--bg);border-radius:99px;overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;background:var(--sun)}
.note{margin-top:auto;padding-top:20px;font-size:13px;color:var(--muted);text-align:center}
.demo{display:inline-block;background:var(--sun);color:#1E2A44;border-radius:8px;padding:1px 7px;font-size:11px;margin-left:6px;vertical-align:middle}
.hidden{display:none}
.svgface{display:inline-block;vertical-align:middle}.svgface svg{width:100%;height:100%;display:block}
.host{display:flex;align-items:center;gap:10px;margin:6px 0 14px}.host .face{font-size:64px;line-height:1;flex:none;transform-origin:bottom center}
@keyframes bob{from{transform:rotate(-6deg) translateY(0)}to{transform:rotate(6deg) translateY(-6px)}}
.bubble{background:var(--paper);border:2px solid var(--line);box-shadow:var(--shadow);border-radius:26px;border-bottom-left-radius:6px;padding:12px 16px;font-size:21px;font-weight:800;flex:1;min-width:0;overflow-wrap:break-word;min-height:56px;display:flex;align-items:center}
.big-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}.big-tiles .tile{align-items:center;padding:22px 10px}.big-tiles .glyph{font-size:56px}.big-tiles .mas{font-size:48px;line-height:1}
.mode2{display:flex;gap:12px;margin-bottom:14px}.mode2 button{flex:1;background:var(--paper);border:3px solid transparent;box-shadow:var(--shadow);border-radius:24px;padding:14px;font-size:40px;line-height:1}.mode2 button.on{border-color:var(--violet);background:var(--lav)}.mode2 small{display:block;font-size:13px;margin-top:4px;color:var(--muted)}
.ear{font-size:56px;line-height:1;min-height:60px}.ear.on{animation:pulse .8s ease-in-out infinite}@keyframes pulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.25);opacity:1}}
.mark{font-size:64px;line-height:1;min-height:70px}
.gear{position:absolute;left:16px;top:calc(16px + env(safe-area-inset-top,0px));width:40px;height:40px;border-radius:12px;background:var(--paper);border:3px solid var(--line);font-size:18px;opacity:.6}
.starsrow{display:flex;gap:4px;justify-content:center;font-size:22px;letter-spacing:2px;margin-bottom:6px}
.pics{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.pics div{font-size:44px;line-height:1;position:relative}.pics div i{position:absolute;right:-6px;bottom:-6px;font-size:20px;font-style:normal}
.in{width:100%;font:inherit;font-size:16px;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:var(--paper);color:var(--ink);margin-top:10px;font-weight:600}
.in:focus{outline:none;border-color:var(--sky)}textarea.in{resize:vertical}
.in.tm{width:auto;margin:0 4px;padding:6px 8px}
.chipbtn{padding:8px 12px;border-radius:12px;background:var(--bg);border:2px solid var(--line);font-size:14px}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:10px}
.wd{background:var(--bg);border-radius:12px;padding:6px 2px;text-align:center;font-size:12px;display:flex;flex-direction:column;align-items:center;gap:2px}
.wd b{font-size:11px;color:var(--muted)}.wd span{font-size:16px}.wd i{font-style:normal;font-size:14px}
.wd.done{background:#E8F9EF}
.vroom{position:fixed;inset:0;background:#0B0F1A;z-index:50}
.vroom #rv{width:100%;height:100%;object-fit:cover}
.vroom #lv{position:absolute;right:12px;top:calc(12px + env(safe-area-inset-top,0px));width:28vw;max-width:160px;border-radius:14px;border:2px solid #fff;transform:scaleX(-1);background:#222}
.vstat{position:absolute;left:0;right:0;top:40%;text-align:center;color:#fff;font-size:18px;padding:0 20px}
.vbar{position:absolute;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;gap:14px}
.vbar button{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.18);font-size:24px;color:#fff}
.vbar button.off{background:rgba(255,90,95,.6)}.vbar button.end{background:#FF3B30}
.vbar{flex-wrap:wrap;gap:12px;padding:0 10px}.vbar button{width:52px;height:52px;font-size:22px}
.vbar button.on{background:#2E8BFF}.vbar button.ok{background:#FFC400}
.vroom [hidden]{display:none!important}
.vroom #rv.fit{object-fit:contain}.vroom #lv.scr{transform:none;object-fit:contain}
.vbig{display:none}
.vroom.mini{inset:auto;right:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:34vw;max-width:200px;aspect-ratio:3/4;border-radius:18px;overflow:hidden;border:3px solid #fff;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:60;touch-action:none;cursor:grab}
.vroom.mini #lv,.vroom.mini .vbar,.vroom.mini .vpanel,.vroom.mini .vpick,.vroom.mini .vstat{display:none!important}
.vroom.mini .vbig{display:block;position:absolute;right:6px;top:6px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;font-size:16px;pointer-events:none}
.vpanel{position:absolute;left:12px;right:12px;bottom:calc(150px + env(safe-area-inset-bottom,0px));max-width:440px;margin:0 auto;background:rgba(15,20,35,.88);color:#fff;border-radius:16px;padding:10px 12px;font-size:14px;max-height:34vh;overflow:auto}
.vph{display:flex;gap:8px;align-items:center}.vph b{flex:1;font-size:15px}
.vph button{background:rgba(255,255,255,.18);color:#fff;border-radius:10px;padding:6px 10px;font-size:13px}
.vfeed{margin-top:6px}.vfeed div{padding:3px 0;border-top:1px solid rgba(255,255,255,.08)}
.vroom .mut{color:rgba(255,255,255,.65);font-size:13px;border:0}
.vpick{position:absolute;left:12px;right:12px;top:calc(12px + env(safe-area-inset-top,0px));bottom:calc(150px + env(safe-area-inset-bottom,0px));max-width:460px;margin:0 auto;background:rgba(15,20,35,.95);color:#fff;border-radius:18px;padding:12px;overflow:auto;z-index:2}
.vpick p{margin:6px 0 0}
.vpick [data-k]{display:block;width:100%;text-align:left;padding:12px;margin-top:6px;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;font-size:16px}
.vsec{margin-top:14px;font-size:12px;opacity:.7;text-transform:uppercase;letter-spacing:.04em}
.vpraise{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);z-index:80;background:#FFC400;color:#3A2A00;font-size:34px;font-weight:800;padding:18px 28px;border-radius:24px;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:vpop 1.8s ease both;pointer-events:none}
@keyframes vpop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
body.inlesson #mirror{display:none!important}

/* ===== Дизайн Toti (материалы 04.10.2026) ===== */
.hdr{display:flex;align-items:center;justify-content:center;min-height:44px;margin:-82px 0 40px;padding:0 56px;position:relative}
.hdr h1{margin:0;font-size:24px;text-align:center}
.lead{text-align:center;margin:-6px 0 14px;font-size:17px;color:var(--ink);font-weight:700}
.starpill{position:absolute;right:0;top:0;height:44px;padding:0 12px 0 8px;border-radius:16px;background:var(--lav);display:flex;align-items:center;gap:4px;font-size:18px;font-weight:900;color:var(--ink)}
.starpill img{width:28px;height:28px;object-fit:contain}
.cta{width:100%;background:linear-gradient(90deg,var(--violet2),var(--violet));color:#fff;font-size:21px;font-weight:900;padding:17px;border-radius:999px;box-shadow:0 8px 20px rgba(124,77,255,.30)}
.cta:active{transform:scale(.98)}.cta:disabled{opacity:.45;box-shadow:none}
.linkbtn{font-size:15px;color:var(--violet);padding:10px;display:flex;align-items:center;justify-content:center;gap:6px}
.linkbtn .mini{width:28px;height:28px;object-fit:contain}
.himg{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
/* ведущий */
.host .face{width:96px;height:96px;flex:none}
/* выбор героя */
.hgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.htile{background:var(--paper);border:2px solid var(--line);border-radius:22px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;transition:transform .12s}
.htile .himg{height:auto;aspect-ratio:1}.htile span{font-size:15px;font-weight:900}
.htile.on{border:3px solid var(--violet);background:var(--lav)}
.htile.on::after{content:'✓';position:absolute;right:6px;top:6px;width:26px;height:26px;border-radius:50%;background:var(--violet);color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center}
.htile:active{transform:scale(.96)}
/* карта */
.map{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:3/2;background:#8CCB6A}
.mapimg{width:100%;height:100%;object-fit:cover;display:block}
.node{position:absolute;transform:translate(-50%,-50%);width:58px;height:58px;padding:0;border-radius:50%;border:3px solid #fff;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.node>img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.node.on{border-color:var(--violet);box-shadow:0 0 0 4px rgba(255,255,255,.8),0 0 22px 6px rgba(255,201,51,.9)}
.node .ok{position:absolute;right:-6px;top:-6px;width:22px;height:22px;border-radius:50%;background:var(--leaf);color:#fff;font-style:normal;font-size:13px;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.node .tag{position:absolute;left:50%;top:100%;transform:translate(-50%,4px);background:#fff;color:#2A1660;border-radius:99px;padding:2px 9px;font-size:12px;font-weight:900;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.seg{display:flex;gap:6px;margin:14px 0 10px;background:var(--lav);padding:4px;border-radius:99px}
.seg button{flex:1;padding:10px 6px;border-radius:99px;font-size:13.5px;line-height:1.15;color:var(--muted);min-width:0}
.seg button.on{background:var(--paper);color:var(--violet);box-shadow:var(--shadow)}
.selcard{background:var(--paper);border-radius:22px;padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow)}
.selcard img{width:58px;height:58px;object-fit:contain;flex:none}
.selcard b{display:block;font-size:20px;font-weight:900}.selcard span{color:var(--muted);font-size:15px}
/* занятие */
.ltop{text-align:center;margin:-82px 0 36px;padding:0 56px}
.ltop .ttl{font-size:22px;font-weight:900;line-height:1.1;min-height:44px;display:flex;align-items:center;justify-content:center}
.node .gl{display:none}.node .tag em{font-style:normal}
.map8 .node{width:44px;height:44px}.map8 .node .tag{font-size:10.5px;padding:1px 7px}.map8 .node .tag em{display:none}
.map8 .node .gl{display:flex;position:absolute;left:-7px;top:-7px;width:22px;height:22px;border-radius:50%;background:var(--violet,#7B4DFF);color:#fff;font-style:normal;font-size:12px;font-weight:900;align-items:center;justify-content:center;border:2px solid #fff}
.prog{height:10px;background:var(--lav);border-radius:99px;overflow:hidden}.prog i{display:block;height:100%;background:var(--violet);border-radius:99px;transition:width .35s}
.wcard{min-height:0;border:3px solid var(--line);box-shadow:none;padding:16px 16px 12px;gap:4px}
.wcard .wimg{width:min(58vw,230px);height:min(58vw,230px);object-fit:contain}
.wcard .himg.big{width:200px;height:200px}
.wcard .word{font-size:44px;line-height:1.1}
.wcard .mark{font-size:32px;min-height:0}.wcard .heard{min-height:0}
.wcard.good{border-color:var(--leaf)}.wcard.again{border-color:var(--sun)}
.count{text-align:center;color:var(--muted);font-size:14px;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:8px}
.again{width:36px;height:36px;border-radius:50%;background:var(--lav);font-size:16px}
/* сигналы очереди (TASK-07) */
.turn{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:10px;--lvl:0;--left:1}
.turn-lbl{font-size:22px;font-weight:900;min-height:28px;color:var(--ink)}
.turn-sub{font-size:14px;color:var(--muted);min-height:18px}
.micbig{position:relative;width:112px;height:112px;border-radius:50%;background:linear-gradient(160deg,var(--violet2),var(--violet));color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(124,77,255,.35);transition:transform .2s,background .2s,opacity .2s}
.micbig::before{content:'';position:absolute;inset:-14px;border-radius:50%;background:rgba(124,77,255,.14);transform:scale(calc(1 + var(--lvl)*.35));transition:transform .08s}
.micbig .ic-mic{width:46px;height:46px;position:relative}
.micbig .bars{display:none;gap:5px;align-items:center;height:46px;position:relative}
.micbig .bars i{display:block;width:6px;border-radius:3px;background:#fff;height:calc(10px + var(--lvl)*36px);transition:height .08s}
.micbig .bars i:nth-child(2),.micbig .bars i:nth-child(4){height:calc(14px + var(--lvl)*28px)}.micbig .bars i:nth-child(3){height:calc(18px + var(--lvl)*30px)}
.micbig .ring{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);transform:rotate(-90deg);display:none;overflow:visible}
.micbig .ring circle{fill:none;stroke:var(--violet);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:295.3;stroke-dashoffset:calc(295.3 * (1 - var(--left)))}
.turn[data-st="speak"] .micbig{transform:scale(.72);background:#C9C3DB;box-shadow:none}
.turn[data-st="idle"] .micbig{transform:scale(.8);opacity:.9}
.turn[data-st="speak"] .micbig::before,.turn[data-st="idle"] .micbig::before{display:none}
.turn[data-st="yourturn"] .micbig{animation:micpulse .9s ease-in-out infinite}
.turn[data-st="yourturn"] .micbig::before{animation:micring 1.2s ease-out infinite}
.turn[data-st="listen"] .ic-mic{display:none}.turn[data-st="listen"] .bars{display:flex}.turn[data-st="listen"] .ring{display:block}
.turn.quiet .micbig::before{opacity:.35}.turn.quiet .bars{opacity:.6}
@keyframes micpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes micring{from{transform:scale(1);opacity:1}to{transform:scale(1.45);opacity:0}}
body.glow::after{content:'';position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 60px 12px rgba(124,77,255,.45);z-index:60;animation:glowfade .6s ease-out forwards}
@keyframes glowfade{from{opacity:1}to{opacity:0}}
/* «Накорми зверя» */
img.beast{width:150px;height:150px;object-fit:contain}
.plate button{background:var(--paper);border:2px solid var(--line);font-size:13px;padding:8px 4px}
.plate button .wimg{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
/* завершение */
.done{text-align:center;display:flex;flex-direction:column;align-items:center}
.done h1{font-size:40px;margin:-50px 0 0}.done .lead{margin:2px 0 6px;font-size:20px;font-weight:900}
.joy{position:relative;width:210px;height:210px}
.spark{position:absolute;width:16px;height:6px;border-radius:3px;background:var(--sun)}
.spark.s1{left:-14px;top:30px;transform:rotate(-30deg)}.spark.s2{right:-14px;top:20px;background:var(--violet2);transform:rotate(25deg)}.spark.s3{left:-4px;bottom:30px;background:#5EE1D5;transform:rotate(20deg)}.spark.s4{right:-4px;bottom:40px;transform:rotate(-20deg)}
.reward{background:var(--lav);border-radius:24px;padding:12px 24px 14px;margin-top:6px;min-width:72%;display:flex;flex-direction:column;align-items:center;font-size:18px}
.reward img{width:96px;height:96px;object-fit:contain}.reward b{font-size:28px;font-weight:900}
.done .pics{margin-top:10px;gap:6px}.done .pics div{width:42px;height:42px}.done .pics .wimg{width:100%;height:100%;object-fit:contain}
.done .pics div i{font-size:12px;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:50%;background:var(--leaf);color:#fff;display:flex;align-items:center;justify-content:center}
.thanks{font-size:18px;font-weight:900;margin:12px 0 0}
/* награды */
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rtile{background:var(--paper);border:2px solid var(--line);border-radius:22px;padding:12px;text-align:center}
.rtile img{width:100%;height:100px;object-fit:contain}.rtile b{display:block;margin-top:4px}.rtile small{display:block;color:var(--muted);font-size:13px}
.rtile.locked img{filter:grayscale(1);opacity:.4}
@media (max-width:360px){.hdr h1{font-size:22px}.micbig{width:96px;height:96px}.wcard .word{font-size:36px}.node{width:48px;height:48px}}
.row .linkbtn{border:0;background:none;padding:10px}
.wcard .word b{color:inherit}
.done .pics div i.no{background:#C9C3DB}
.gear{display:none}
.nmin{font-size:30px;font-weight:900;text-align:center;color:var(--violet);border:3px solid var(--line);border-radius:18px;max-width:280px}
.nmin:focus{border-color:var(--violet)}
#say{background:var(--lav);color:var(--violet);box-shadow:none}
.bye{margin-top:40px}.bye h1{margin:0}
/* ---- Главный экран (hub) ---- */
.hubtop{display:flex;justify-content:center;gap:4px;margin:-84px 50px 42px;min-height:44px;align-items:center;flex-wrap:wrap}
.hubtop .chip{background:var(--paper);border:2px solid var(--line);border-radius:99px;padding:3px 7px;font-size:11.5px;font-weight:900;color:var(--ink);white-space:nowrap;box-shadow:var(--shadow)}
.hubtop .chip.on{background:var(--leaf);border-color:var(--leaf);color:#fff}
.hubstage{position:relative;border-radius:28px;background:#3c8f4a url(/img/hub-bg.webp) center 30%/cover;min-height:calc(100dvh - 215px);align-content:space-evenly;box-shadow:0 10px 30px rgba(43,45,66,.18);padding:18px 10px 16px;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"a b" "t t" "c d";gap:6px 8px;justify-items:center;overflow:hidden}
.hubstage:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,0) 40%,rgba(0,0,0,.08));pointer-events:none}
.hb{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;font-family:inherit;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.hb i{position:relative;width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:44px;color:#fff;border:5px solid #fff;box-shadow:0 8px 18px rgba(0,0,0,.25),inset 0 -8px 14px rgba(0,0,0,.15),inset 0 8px 14px rgba(255,255,255,.45);transition:transform .15s}
.hb:active i{transform:scale(.93)}
.hb span{background:#fff;border-radius:99px;padding:5px 12px;font-size:14px;font-weight:900;color:var(--ink);box-shadow:0 3px 8px rgba(0,0,0,.18);text-align:center;line-height:1.15;max-width:150px}
.hb-ex{grid-area:a}.hb-ex i{background:radial-gradient(circle at 35% 30%,#8FD3FF,#2E8BFF 70%)}
.hb-game{grid-area:b}.hb-game i{background:radial-gradient(circle at 35% 30%,#FF9BD0,#E8358F 70%);font-size:40px;padding-left:6px}
.hb-poem{grid-area:c}.hb-poem i{background:radial-gradient(circle at 35% 30%,#FFD88A,#FF9500 70%)}
.hb-par{grid-area:d}.hb-par i{background:radial-gradient(circle at 35% 30%,#9BE8B4,#1FA75A 70%);font-size:38px}
.hb .hok{position:absolute;top:0;right:12px;width:28px;height:28px;border-radius:50%;background:var(--leaf);color:#fff;font-style:normal;font-size:16px;font-weight:900;display:flex;align-items:center;justify-content:center;border:3px solid #fff;z-index:2}
.hb .soon{position:absolute;top:-2px;right:-4px;background:var(--coral);color:#fff;font-style:normal;font-size:11px;font-weight:900;padding:3px 8px;border-radius:99px;border:2px solid #fff;transform:rotate(8deg);z-index:2}
.hb-poem i{filter:saturate(.75)}
.hb .ring{position:absolute;inset:-5px;border-radius:50%;border:5px solid transparent}
.hb-par.holding .ring{border-color:#fff;border-top-color:var(--sun);animation:spin 1.5s linear}
@keyframes spin{to{transform:rotate(360deg)}}
.hubhost{grid-area:t;display:flex;flex-direction:column;align-items:center;margin:2px 0 4px;position:relative;z-index:1}
.hubhost .face{width:150px;height:150px;cursor:pointer;animation:hubbob 2.6s ease-in-out infinite alternate}
.hubhost .face img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.3))}
@keyframes hubbob{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-6px) rotate(2deg)}}
.hubhost .hbub{position:relative;background:#fff;border-radius:18px;padding:8px 14px;font-size:16px;font-weight:900;color:var(--violet);box-shadow:0 4px 12px rgba(0,0,0,.2);max-width:260px;text-align:center;margin-bottom:6px;min-height:0}
.hubhost .hbub:after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-8px;border:8px solid transparent;border-bottom:0;border-top-color:#fff}
.plist{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.pcard{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;column-gap:12px;text-align:left;background:var(--paper);border:3px solid var(--line);border-radius:20px;padding:14px;box-shadow:var(--shadow);font-family:inherit}
.pcard span{grid-row:1/3;font-size:38px;display:flex;align-items:center;justify-content:center}.pcard b{font-size:17px;color:var(--ink)}.pcard small{font-size:13px;color:var(--muted)}
.exl{display:flex;flex-direction:column;gap:10px}
.excard{display:flex;align-items:center;gap:12px;background:#FFF8EC;border:3px solid #F6E6C8;border-radius:20px;padding:10px 12px;font-family:inherit;text-align:left;box-shadow:var(--shadow)}
.excard .expic{width:56px;height:56px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:32px;flex:none}
.excard .ext{flex:1;display:flex;flex-direction:column}.excard b{font-size:17px;color:var(--ink)}.excard small{font-size:13px;color:var(--muted)}
.excard .explay{width:38px;height:38px;border-radius:50%;background:var(--violet);color:#fff;font-style:normal;display:flex;align-items:center;justify-content:center;font-size:15px;padding-left:3px;flex:none}
.excard1{display:flex;flex-direction:column;align-items:center;padding:18px}
.expic.big{font-size:110px;line-height:1}
.exsec{margin-top:10px;width:76px;height:76px;border-radius:50%;border:6px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:900;color:var(--violet)}
.exsec.run{border-color:var(--violet);animation:micpulse 1s ease-in-out infinite}
.mirv{display:none;margin-top:12px;width:100%;max-width:300px;border-radius:18px;transform:scaleX(-1);background:#000}
@media (max-width:360px){.hb i{width:82px;height:82px;font-size:38px}.hubhost .face{width:124px;height:124px}.hb span{font-size:12.5px}}

.hset{position:absolute;left:10px;top:10px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.92);border:0;font-size:22px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.25);z-index:3;padding:0;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hset .ring{position:absolute;inset:-3px;border-radius:50%;border:4px solid transparent}
.hset.holding .ring{border-color:#fff;border-top-color:var(--sun);animation:spin 1.5s linear}
.hb-par.holding .ring{border-color:#fff;border-top-color:var(--sun);animation:spin 1.5s linear}
.subbtn{width:100%;padding:14px;border-radius:99px;border:0;font-family:inherit;font-size:16px;font-weight:900;color:#fff;background:linear-gradient(90deg,#FF5FB0,#B04DFF);box-shadow:0 6px 16px rgba(176,77,255,.35)}

.extext{margin:10px 0 0;font-size:19px;font-weight:800;text-align:center;color:var(--ink);line-height:1.3}

.plate button.fly{animation:fly .7s ease-in forwards;z-index:5;position:relative}
@keyframes fly{to{transform:translate(var(--fx),var(--fy)) scale(.25) rotate(25deg);opacity:0}}

.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gtile{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px 14px;background:var(--paper);border:3px solid var(--line);border-radius:24px;box-shadow:var(--shadow);font-family:inherit;text-align:center}
.gtile i{width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),var(--c) 65%);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:38px;border:4px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.18)}
.gtile b{font-size:16px;color:var(--ink);line-height:1.15}.gtile small{font-size:12.5px;color:var(--muted)}
.gtile.soon{opacity:.75}.gtile.soon i{filter:saturate(.5)}
.gtile .soon{position:absolute;top:8px;right:8px;background:var(--coral);color:#fff;font-style:normal;font-size:11px;font-weight:900;padding:3px 8px;border-radius:99px}
.balsky{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:44px 10px;padding:22px 10px 48px;border-radius:28px;background:linear-gradient(#BFE6FF,#EAF6FF);overflow:hidden;justify-items:center}
.bal{position:relative;width:86px;height:104px;border:0;padding:0;border-radius:50% 50% 48% 48%/55% 55% 45% 45%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.7),var(--c) 45%);box-shadow:inset -8px -10px 16px rgba(0,0,0,.15),0 8px 14px rgba(0,0,0,.12);animation:balfloat 2.4s ease-in-out var(--d) infinite alternate;transform:scale(var(--s,1));transition:transform .08s;font-family:inherit}
.bal:after{content:"";position:absolute;left:50%;top:100%;width:2px;height:34px;background:#9aa7b8;transform:translateX(-50%)}
.bal b{font-size:40px;font-weight:900;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.25)}
.bal.on{outline:5px solid #fff;outline-offset:3px;box-shadow:0 0 0 9px rgba(124,77,255,.35),inset -8px -10px 16px rgba(0,0,0,.15)}
.bal.pop{animation:balpop .35s ease-out forwards}
@keyframes balfloat{from{translate:0 0}to{translate:0 -10px}}
@keyframes balpop{50%{transform:scale(1.4);opacity:.8}to{transform:scale(.1);opacity:0}}

.phgrp{display:flex;align-items:center;gap:8px;font-size:18px;margin:14px 4px 8px;color:var(--ink)}.phgrp img{width:36px;height:36px;object-fit:contain}
.excard .expic img{width:48px;height:48px;object-fit:contain}.phemo{font-size:32px}
.excard small.ru{font-size:11.5px;color:#a49cb8;font-style:italic}
.phcard{display:flex;flex-direction:column;align-items:center;padding:18px 16px;text-align:center}
.phimg img{width:150px;height:150px;object-fit:contain}.phimg .phemo{font-size:110px;line-height:1.2}
.phsyl{font-size:38px;font-weight:900;color:var(--violet);margin-top:6px}
.phtxt{font-size:24px;font-weight:900;color:var(--ink);margin-top:4px}
.phru{font-size:14px;color:var(--muted);margin-top:8px;font-style:italic}

.rwd .joy{margin-top:-6px}.rwd .joy .himg{width:180px;height:180px}
.rcard{background:var(--paper);border:3px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:34px 16px 18px;margin-top:-30px;position:relative;text-align:center}
.rstar{position:absolute;left:50%;top:-30px;transform:translateX(-50%);width:60px;height:60px;border-radius:50%;background:#fff;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;font-size:34px}
.rcard h1{margin:4px 0 2px;font-size:30px;color:var(--ink)}.rcard .lead{margin:0 0 14px}
.rstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rstats div{background:var(--lav);border-radius:18px;padding:10px 4px;display:flex;flex-direction:column;align-items:center}
.rstats i{font-style:normal;font-size:24px}.rstats b{font-size:22px;color:var(--ink)}.rstats small{font-size:12px;color:var(--muted)}
.outbtn{width:100%;padding:13px;border-radius:99px;border:3px solid var(--violet);background:var(--paper);color:var(--violet);font-family:inherit;font-size:16px;font-weight:900;margin-top:10px}
.pics[hidden]{display:none!important}
.pcab{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.pkid{display:flex;align-items:center;gap:12px;background:var(--paper);border:2px solid var(--line);border-radius:20px;padding:10px 14px;box-shadow:var(--shadow)}
.pkid span{width:46px;height:46px;border-radius:50%;background:var(--lav);display:flex;align-items:center;justify-content:center;overflow:hidden}.pkid .mini{width:42px;height:42px}
.pkid b{display:block;font-size:17px}.pkid small{color:var(--muted);font-size:13px}
.pall{position:relative;display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#E9F7FF,#F1ECFF);border-radius:24px;padding:16px;overflow:hidden}
.pall b{display:block;font-size:17px}.pall small{font-size:13px;color:var(--muted)}
.pring{flex:none;width:76px;height:76px;border-radius:50%;background:conic-gradient(var(--violet) calc(var(--p)*1%),#fff 0);display:flex;align-items:center;justify-content:center}
.pring b{width:58px;height:58px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--violet)}
.pall .pjoy{width:74px;height:74px;margin-left:auto;object-fit:contain}
.ph3{margin:6px 0 0;font-size:18px}
.pach{display:flex;align-items:center;gap:12px;background:var(--paper);border:2px solid var(--line);border-radius:18px;padding:10px 14px}
.pach span{font-size:28px}.pach b{display:block;font-size:15px}.pach small{font-size:12.5px;color:var(--muted)}
.pcab~h1,.pcab+h1{font-size:22px;margin-top:8px}
.progrow{display:flex;align-items:center;gap:8px}.progrow .prog{flex:1}.pnum{font-size:13px;color:var(--violet);min-width:34px;text-align:right}
.wcard .schip{align-self:center;background:var(--lav);color:var(--ink);border-radius:999px;padding:5px 14px;font-size:14px;font-weight:700;margin-bottom:4px}.wcard .schip b{color:var(--violet)}
.turn{position:relative}
.turn[data-st="yourturn"] .micbig::after,.turn[data-st="listen"] .micbig::after{content:'';position:absolute;inset:-22px;border-radius:50%;border:3px solid transparent;border-left-color:rgba(124,77,255,.35);border-right-color:rgba(124,77,255,.35);animation:micwave 1.4s ease-in-out infinite}
@keyframes micwave{0%,100%{transform:scale(.92);opacity:.5}50%{transform:scale(1.06);opacity:1}}
.spath{position:relative;display:flex;flex-direction:column;gap:2px;padding:14px 0;border-radius:24px;background:url(img/hub-bg.webp) center/cover;overflow:hidden}
.spath::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.35)}
.pnode{position:relative;align-self:flex-start;margin-left:calc(var(--x) - 38px);width:76px;display:flex;flex-direction:column;align-items:center;background:none;border:0;padding:0;font:inherit;color:var(--ink)}
.pnode span{position:relative;width:62px;height:62px;border-radius:50%;background:#fff;border:4px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.18);overflow:visible}
.pnode span img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.pnode span i{position:absolute;right:-6px;bottom:-4px;width:24px;height:24px;border-radius:50%;background:#2EC27E;color:#fff;font-style:normal;font-size:13px;display:flex;align-items:center;justify-content:center}
.pnode.lock span i{background:#fff;font-size:12px}.pnode.lock span img{filter:grayscale(.8);opacity:.6}
.pnode.cur span{border-color:var(--violet);animation:micpulse 1.2s ease-in-out infinite}
.pnode b{font-size:14px;background:#fff;border-radius:10px;padding:0 8px;margin-top:2px}.pnode small{font-size:11.5px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);min-height:14px}
/* Главная v2: спокойная, четыре раздела */
.hub2{display:flex;flex-direction:column;gap:10px;min-height:calc(100dvh - 180px)}
.h2top{display:flex;align-items:center;gap:8px;margin:-6px 0 0;min-height:48px}
.h2top h1{flex:1;margin:0;font-size:24px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h2top .hset{position:relative;left:auto;top:auto;flex:none;background:var(--paper);border:2px solid var(--line);box-shadow:var(--shadow)}
.h2star{flex:none;background:var(--paper);border:2px solid var(--line);border-radius:99px;padding:4px 10px;font-weight:900;font-size:14px}
.hub2 .hubhost{margin:auto 0}.hub2 .hubhost .hbub{box-shadow:var(--shadow);border:2px solid var(--line)}
.hub2 .hubhost .face{width:190px;height:190px}.hub2 .hubhost .face img{filter:drop-shadow(0 8px 10px rgba(80,60,160,.18))}
.h2grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hb2{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:138px;border:0;border-radius:26px;padding:14px 8px;font-family:inherit;color:#fff;box-shadow:0 8px 18px rgba(43,45,66,.14);cursor:pointer;transition:transform .15s}
.hb2:active{transform:scale(.96)}
.hb2 i{position:relative;font-style:normal;font-size:44px;width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center}
.hb2 b{font-size:17px;font-weight:900;line-height:1.15;text-align:center}
.hb2 .hok{position:absolute;top:10px;right:12px;width:26px;height:26px;border-radius:50%;background:#fff;color:#1FA75A;font-style:normal;font-weight:900;display:flex;align-items:center;justify-content:center}
.c-ex{background:linear-gradient(150deg,#6CC3FF,#2E8BFF)}.c-game{background:linear-gradient(150deg,#FF8CC6,#E8358F)}
.c-poem{background:linear-gradient(150deg,#FFC664,#FF8A00)}.c-par{background:linear-gradient(150deg,#7EDFA0,#1FA75A)}
.hb2 .ring{position:absolute;inset:-4px;border-radius:50%;border:4px solid transparent}
.c-par.holding .ring{border-color:#fff;border-top-color:var(--sun);animation:spin 1.5s linear}
@media (max-width:360px){.hb2{min-height:118px}.hb2 i{width:56px;height:56px;font-size:36px}.hb2 b{font-size:15px}.hub2 .hubhost .face{width:120px;height:120px}}
/* Звуки по ступеням */
.ladpick i{background:#fff!important;overflow:hidden}.ladpick i img{width:100%;height:100%;object-fit:cover}
.ladder{display:flex;flex-direction:column-reverse;gap:8px;margin:4px 0 8px}
.lstep{display:flex;align-items:center;gap:10px;width:100%;border:2px solid var(--line);background:var(--paper);border-radius:18px;padding:10px 14px;font-family:inherit;color:var(--ink);text-align:left;box-shadow:var(--shadow)}
.lstep:nth-child(odd){margin-left:0;width:92%}.lstep:nth-child(even){margin-left:8%;width:92%}
.lstep .lnum{flex:none;width:30px;height:30px;border-radius:50%;background:var(--lav);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;color:var(--violet)}
.lstep i{font-style:normal;font-size:24px}.lstep b{flex:1;font-size:16px}
.lstep .go{font-style:normal;font-weight:900;color:#fff;background:var(--violet);border-radius:99px;padding:4px 12px;font-size:13px}
.lstep.ok{background:#EAFBF1;border-color:#9BE8B4}.lstep.ok .lnum{background:#1FA75A;color:#fff}
.lstep.cur{border-color:var(--violet);box-shadow:0 6px 16px rgba(124,77,255,.25)}.lstep.cur .lnum{background:var(--violet);color:#fff}
.lstep.lock{opacity:.6}.lstep.soon{opacity:.55;border-style:dashed}
.drcard .phimg img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.drtxt{font-size:28px;font-weight:900;color:var(--ink);text-align:center;line-height:1.3;padding:6px 4px}
.drcard.syl .drtxt{font-size:52px;color:var(--violet);text-transform:uppercase;letter-spacing:2px}
.drcard.poem .drtxt,.drcard.chist .drtxt{font-size:22px}
/* Главная v3 (ТЗ): одна кнопка «Начать занятие», ниже Игры и Моя коллекция */
body.onhub #gback,body.onhub #gexit{display:none!important}
body.onhub #glang{top:calc(14px + env(safe-area-inset-top,0px))!important}
.hub3{display:flex;flex-direction:column;gap:14px;min-height:calc(100dvh - 110px);margin-top:-80px}
.h3top{display:flex;align-items:center;min-height:44px}
.hub3 .hubhost{margin:auto 0 0}.hub3 .hubhost .hbub{box-shadow:var(--shadow);border:2px solid var(--line)}
.hub3 .hubhost .face{width:200px;height:200px}.hub3 .hubhost .face img{filter:drop-shadow(0 8px 10px rgba(80,60,160,.18))}
.h3go{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;border:0;border-radius:28px;padding:18px 16px;font-family:inherit;color:#fff;background:linear-gradient(135deg,var(--violet2),var(--violet));box-shadow:0 10px 24px rgba(124,77,255,.35);cursor:pointer}
.h3go b{font-size:24px;font-weight:900}.h3go small{font-size:14px;font-weight:700;opacity:.9}
.h3go:active{transform:scale(.97)}
.h3row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.h3row .hb2{min-height:118px}.c-coll{background:linear-gradient(150deg,#FFC664,#FF8A00)}
.h3par{position:relative;align-self:center;display:flex;align-items:center;gap:8px;border:0;background:none;font-family:inherit;font-size:14px;font-weight:700;color:var(--muted);padding:6px 10px;margin-bottom:auto}
.h3par span{position:relative;width:34px;height:34px;border-radius:50%;background:var(--lav);display:flex;align-items:center;justify-content:center;font-size:18px}
.h3par .ring{position:absolute;inset:-3px;border-radius:50%;border:3px solid transparent}
.h3par.holding .ring{border-color:var(--line);border-top-color:var(--violet);animation:spin 1.5s linear}
/* Живая шкала громкости под микрофоном во время записи */
.turn::after{content:'';display:block;width:min(220px,70%);height:8px;margin:8px auto 0;border-radius:4px;background:linear-gradient(90deg,var(--violet) calc(var(--lvl,0)*100%),var(--lav) 0);opacity:0;transition:opacity .2s}
.turn[data-st="listen"]::after{opacity:1}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* Стартовый экран и анкета для родителей */
.welcome{position:relative;display:flex;flex-direction:column;align-items:center;min-height:100dvh;box-sizing:border-box;margin:-94px -16px -40px;padding:78px 16px 24px;background:linear-gradient(#BFE6FF,#E9F6FF 45%,#F3FBEF);overflow:hidden}
.welcome::after{content:'';position:absolute;left:0;right:0;bottom:0;height:42%;background:url(/img/hub-bg.webp) center 70%/cover;opacity:.55;-webkit-mask-image:linear-gradient(transparent,#000 40%);mask-image:linear-gradient(transparent,#000 40%)}
.welcome>*{position:relative;z-index:1}
.wlogo{display:flex;flex-direction:column;align-items:center;line-height:.95}
.wlogo b{position:relative;font-size:78px;font-weight:900;color:#FFC93C;-webkit-text-stroke:5px #5B2BC9;paint-order:stroke fill;letter-spacing:1px}
.wlogo b i{position:absolute;right:-22px;top:-4px;font-style:normal;font-size:30px;-webkit-text-stroke:2px #5B2BC9}
.wlogo span{font-size:36px;font-weight:900;color:#fff;-webkit-text-stroke:4px #5B2BC9;paint-order:stroke fill}
.wslog{margin:14px 0 0;font-size:20px;font-weight:800;color:var(--ink)}
.wtoti{flex:1;display:flex;align-items:center;justify-content:center;min-height:240px}.wtoti .himg{width:min(280px,72vw);height:auto;filter:drop-shadow(0 12px 18px rgba(40,80,40,.25));animation:hubbob 2.6s ease-in-out infinite alternate}
.wcardb{width:100%;background:rgba(255,255,255,.92);border-radius:28px;padding:18px 16px 14px;box-shadow:0 10px 30px rgba(43,45,66,.15);text-align:center}
.wcardb .cta{width:100%}.wcardb p{margin:10px 0 0;font-size:14px;color:var(--muted)}
.pform{min-height:0;align-items:stretch;text-align:left;gap:8px}
.pform label{font-weight:800;font-size:15px;margin-top:6px}
.pform .in{width:100%;box-sizing:border-box}
.pchips{display:flex;flex-wrap:wrap;gap:8px}
.pchips button{flex:1 1 0;min-width:48px;padding:10px 12px;border-radius:14px;border:2px solid var(--line);background:var(--paper);font-family:inherit;font-weight:800;font-size:15px;color:var(--ink)}
.pchips button.on{background:var(--violet);border-color:var(--violet);color:#fff}
.pagree{display:flex!important;gap:10px;align-items:flex-start;font-weight:600!important;font-size:12.5px!important;color:var(--muted);margin-top:10px!important}
.pagree input{width:22px;height:22px;flex:none;margin-top:2px}.pagree a{color:var(--sky)}
.ptt{font-size:12px;color:var(--muted);max-height:140px;overflow:auto;border:2px solid var(--line);border-radius:14px;padding:10px}
#pok:disabled{opacity:.5}
.drcard .phimg.big img.drpic{width:min(220px,58vw);height:min(220px,58vw);border-radius:22px;object-fit:cover}
.warmrow{margin:0 0 10px}.warmrow>b{display:block;font-size:15px;margin:0 0 6px 4px}
.warmrow>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.warmrow button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:16px;border:2px solid var(--line);background:var(--paper);font-family:inherit;font-weight:800;font-size:13px;color:var(--ink);box-shadow:var(--shadow)}
.warmrow button i{font-style:normal;font-size:26px}.warmrow button.ok{background:#EAFBF1;border-color:#9BE8B4}
.drcard .phemo{font-size:110px;line-height:1}
.blowcard{min-height:0;gap:10px}.blowobj{font-size:110px;line-height:1.1;transition:transform .8s,opacity .8s}.blowobj.blown{transform:translate(60px,-40px) rotate(25deg) scale(.7);opacity:.35}
.blowbar{position:relative;width:86%;height:26px;border-radius:13px;background:#E6DEFF;box-shadow:inset 0 2px 4px rgba(60,30,140,.18);overflow:hidden;margin:4px auto}.blowbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4FC3FF,#7B4DFF);border-radius:13px;transition:width .1s}.blowbar b{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:16px;line-height:1}.blowbar.live{box-shadow:inset 0 2px 4px rgba(60,30,140,.18),0 0 0 3px rgba(79,195,255,.45)}
.drwho{font-size:18px;font-weight:800;color:var(--muted)}
/* Стартовый экран точь-в-точь по макету: картинка неба, логотипа и Тоти, слоган и карточка поверх */
.wcard2{margin:0 14px calc(18px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.94);border-radius:30px;padding:20px 18px 18px;box-shadow:0 -4px 24px rgba(43,45,66,.12);text-align:center}
.wcard2 button{position:relative;width:100%;height:56px;border:0;border-radius:99px;background:linear-gradient(90deg,#7A4DE0,#6A3FD4);color:#fff;font-family:inherit;font-size:18px;font-weight:700;box-shadow:0 6px 16px rgba(106,63,212,.35);cursor:pointer}
.wcard2 button b{position:absolute;right:22px;top:50%;transform:translateY(-52%);font-size:26px;font-weight:400}
.wcard2 p{margin:14px 0 0;font-size:15px;line-height:1.35;color:#4B4A6E}
/* Экран «говори» как в макете */
body.onsay #gback,body.onsay #gexit,body.onsay #glang{display:none!important}
body.onsay .app{padding-top:calc(10px + env(safe-area-inset-top,0px))!important;padding-bottom:20px}
.say2{display:flex;flex-direction:column;min-height:calc(100vh - 40px);min-height:calc(100dvh - 40px)}
.s2top{display:flex;align-items:center;justify-content:space-between;height:40px}
.s2back{background:none;border:0;padding:6px 4px;font:inherit;font-size:17px;font-weight:800;color:var(--muted);display:flex;align-items:center;gap:4px}
.s2back:active{opacity:.6}
.s2n{background:none;border:0;font:inherit;font-size:16px;font-weight:900;color:var(--muted);padding:6px 2px;display:flex;align-items:center;gap:6px}
.s2n i{font-style:normal;font-size:15px;color:var(--violet);background:var(--lav);border-radius:99px;padding:9px 12px}
.s2prog{position:relative;height:10px;border-radius:99px;background:#E9E6F3;margin:6px 0 20px}
.s2prog i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#7C5CFF,#6A4BEF);transition:width .4s}
.s2prog i::after{content:'';position:absolute;right:-6px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#FFA62B;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.s2t{font-size:30px;line-height:1.1;font-weight:900;margin:0;color:var(--ink);letter-spacing:-.3px}
.s2sub{font-size:17px;font-weight:700;color:var(--muted);margin-top:6px}
.s2stage{position:relative;display:flex;align-items:flex-end;justify-content:flex-start;min-height:250px;margin:14px 0 0;flex:1}
.s2stage .face{width:62%;max-width:270px;height:auto;flex:none;align-self:flex-end}
.s2stage .himg{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 18px rgba(91,60,190,.14))}
.s2bub{position:absolute;right:0;top:0;max-width:56%;min-width:128px;background:#fff;border-radius:26px;padding:16px 18px 34px;box-shadow:0 10px 28px rgba(91,60,190,.13);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;transition:box-shadow .3s}
.s2bub::after{content:'';position:absolute;left:-12px;bottom:22px;border:12px solid transparent;border-right-color:#fff;border-left:0;filter:drop-shadow(-3px 3px 3px rgba(91,60,190,.06))}
.s2bub.good{box-shadow:0 0 0 4px rgba(34,197,94,.35),0 10px 28px rgba(91,60,190,.13)}
.s2word{font-size:34px;font-weight:900;color:var(--ink);line-height:1.15;overflow-wrap:anywhere}
.s2word b{color:var(--violet)}
.s2word.long{font-size:21px}.s2word.xl{font-size:16px;line-height:1.3}
.s2word small{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-top:4px}
.s2pic{width:110px;height:110px;object-fit:contain;display:block}
.s2pic.big{width:100%;height:auto;max-height:150px;border-radius:14px;object-fit:cover}
.s2emo{font-size:64px;line-height:1}
.s2snd{position:absolute;right:12px;bottom:8px;width:34px;height:28px;border:0;background:none;color:var(--violet);padding:0;display:flex;align-items:center;justify-content:center}
.s2bub .mark{position:absolute;left:-10px;top:-12px;font-size:30px;line-height:1}
.s2bub .mark:empty,.s2bub .heard{display:none}
.s2bub .bubble{all:unset;display:block;font-size:13px;font-weight:800;color:var(--muted);min-height:0}
.s2bub .bubble:empty{display:none}
.s2mic{display:flex;align-items:center;justify-content:center;gap:4px;margin:10px 0 4px}
.s2mic .turn{margin:0;gap:4px}
.s2mic .turn-lbl{font-size:16px;min-height:20px;color:var(--violet)}
.s2mic .turn-sub{font-size:12px;min-height:14px}
.s2mic .micbig{width:124px;height:124px;background:linear-gradient(160deg,#7C5CFF,#5B3FE0);box-shadow:0 0 0 12px #fff,0 0 0 14px #ECE8F8,0 14px 30px rgba(91,63,224,.35)}
.s2mic .micbig .ic-mic{width:50px;height:50px}
.s2mic .turn[data-st="speak"] .micbig{transform:scale(.86);background:#C9C3DB;box-shadow:0 0 0 12px #fff,0 0 0 14px #ECE8F8}
.s2mic .turn[data-st="idle"] .micbig{transform:scale(.9)}
.wv{width:36px;height:66px;flex:none;fill:none;stroke-width:6;stroke-linecap:round;transition:opacity .3s}
.wv.l{transform:scaleX(-1)}
.wv path{transform-origin:0 50%;transform-box:view-box}
.s2mic:has(.turn[data-st="speak"]) .wv,.s2mic:has(.turn[data-st="idle"]) .wv{opacity:.25;filter:grayscale(1)}
.s2mic:has(.turn[data-st="yourturn"]) .wv path,.s2mic:has(.turn[data-st="listen"]) .wv path{animation:wvp 1.2s ease-in-out infinite}
.wv path:nth-child(2){animation-delay:.15s!important}.wv path:nth-child(3){animation-delay:.3s!important}
@keyframes wvp{0%,100%{opacity:1}50%{opacity:.35}}
.s2hint{display:flex;align-items:center;gap:14px;background:#F1EFF8;border-radius:22px;padding:16px 20px;margin-top:12px;color:var(--ink);font-size:15px;font-weight:700;line-height:1.35}
.s2hint .ic-mic{width:30px;height:30px;flex:none;color:var(--violet)}
@media (max-height:700px){.s2stage{min-height:200px}.s2stage .face{width:50%}.s2mic .micbig{width:104px;height:104px}.s2t{font-size:26px}}
@media (prefers-reduced-motion:reduce){.wv path{animation:none!important}}
.s2mic .turn-lbl{margin-bottom:22px}.s2mic .turn-sub{margin-top:20px}.s2mic .turn::after{margin-top:4px}
.s2mic .micbig::after{display:none}
.s2stage{min-height:220px}.s2stage .face{width:54%}
.s2stage{align-items:flex-start}.s2stage .face{align-self:flex-end;margin-top:40px}
.s2bub{position:relative;right:auto;top:auto;flex:1;max-width:none;margin:0 0 60px -6%;z-index:1}
@media (max-height:700px){.s2pic{width:80px;height:80px}.s2pic.big{max-height:96px}.s2word{font-size:28px}.s2stage .face{width:44%;margin-top:20px}.s2bub{margin-bottom:30px}.s2sub{font-size:15px}.s2top{height:34px}.s2prog{margin-bottom:14px}}
/* «Выбери задание» */
.exm{display:flex;flex-direction:column}
.exh{font-size:28px;font-weight:900;margin:4px 0 14px;color:var(--ink)}
.exchips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;margin:0 -16px 10px;padding-left:16px;padding-right:16px;scrollbar-width:none}
.exchips::-webkit-scrollbar{display:none}
.exchip{flex:none;border:0;border-radius:99px;padding:10px 18px;font:inherit;font-size:15px;font-weight:800;background:#EEEBF7;color:#5D5680}
.exchip.on{background:linear-gradient(160deg,#7C5CFF,#5B3FE0);color:#fff;box-shadow:0 6px 14px rgba(91,63,224,.25)}
.exlist{display:flex;flex-direction:column;gap:12px}
.excard{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;border-radius:22px;padding:12px 16px 12px 12px;font:inherit;background:color-mix(in srgb,var(--c) 11%,#fff);box-shadow:0 4px 14px color-mix(in srgb,var(--c) 14%,transparent)}
.excard:active{transform:scale(.98)}
.excard i{flex:none;width:58px;height:58px;border-radius:16px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 75%,#fff),var(--c));color:#fff;font-style:normal;font-size:30px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px color-mix(in srgb,var(--c) 35%,transparent)}
.excard span{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.excard b{font-size:18px;font-weight:900;color:var(--ink)}
.excard small{font-size:13px;font-weight:700;color:var(--muted)}
.excard em{font-style:normal;font-size:28px;font-weight:700;color:var(--c);line-height:1}
.exnone{color:var(--muted);text-align:center;margin-top:30px}
/* Главная по макету: привет + язык, Тоти с облачком, миссия дня, три плитки, нижнее меню */
body:has(.hub4) #glang{display:none!important}
.hub4{gap:14px;padding-bottom:92px;margin-top:-80px;min-height:0}
.h4top{display:flex;align-items:center;gap:12px;padding-top:4px}
.h4ava{flex:none;width:56px;height:56px;border-radius:50%;background:linear-gradient(150deg,#FFB86B,#FF7A59);color:#fff;font-size:26px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px #fff,0 4px 12px rgba(255,122,89,.35)}
.h4hi{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.h4hi b{font-size:19px;font-weight:900;color:var(--ink)}
.h4hi small{font-size:13px;font-weight:700;color:var(--muted);line-height:1.3}
.h4lang{flex:none;align-self:flex-start;border:0;border-radius:99px;background:var(--paper);box-shadow:var(--shadow);padding:8px 12px;font:inherit;font-size:13px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:4px}
.h4lang i{font-style:normal;color:var(--muted)}
.h4host{position:relative;display:flex;align-items:flex-start;min-height:190px}
.h4host .face{position:absolute;right:-6px;top:-6px;width:200px;height:200px;cursor:pointer;animation:hubbob 2.6s ease-in-out infinite alternate}
.h4host .face img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(80,60,160,.2))}
.h4bub{position:relative;z-index:1;margin-top:34px;max-width:52%;background:linear-gradient(150deg,#8B6CFF,#6A4BEF);color:#fff;border-radius:22px;padding:14px 18px;font-size:17px;font-weight:800;line-height:1.3;box-shadow:0 10px 22px rgba(106,75,239,.3)}
.h4bub::after{content:'';position:absolute;right:-10px;bottom:16px;border:10px solid transparent;border-left-color:#6A4BEF;border-right:0}
.h4mis{position:relative;z-index:2;background:linear-gradient(160deg,#F2F0FF,#E9F3FF);border-radius:26px;padding:18px;box-shadow:0 10px 26px rgba(91,60,190,.12);display:flex;flex-direction:column;gap:14px;margin-top:-18px}
.h4mt{display:flex;gap:14px;align-items:flex-start}
.h4mt>span{font-size:40px;line-height:1;filter:drop-shadow(0 3px 4px rgba(255,170,0,.35))}
.h4mt div{display:flex;flex-direction:column;gap:3px}
.h4mt small{font-size:13px;font-weight:800;color:var(--muted)}
.h4mt b{font-size:22px;font-weight:900;color:var(--ink)}
.h4mt em{font-style:normal;font-size:13px;font-weight:700;color:var(--muted)}
.h4go{position:relative;width:100%;border:0;border-radius:99px;padding:15px;font:inherit;font-size:18px;font-weight:900;color:#fff;background:linear-gradient(90deg,#7C5CFF,#5B3FE0);box-shadow:0 8px 18px rgba(91,63,224,.35)}
.h4go i{position:absolute;right:22px;top:50%;transform:translateY(-52%);font-style:normal;font-size:26px}
.h4go:active,.h4t:active{transform:scale(.97)}
.h4row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.h4t{border:0;border-radius:22px;padding:16px 6px 14px;font:inherit;font-size:15px;font-weight:800;color:var(--ink);line-height:1.25;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:0 6px 16px rgba(91,60,190,.08)}
.h4t i{font-style:normal;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px}
.h4t.c1{background:#E3F6F8}.h4t.c1 i{background:linear-gradient(160deg,#4FC3F7,#1E88E5)}
.h4t.c2{background:#EEEAFB}.h4t.c2 i{background:linear-gradient(160deg,#9C7BFF,#6A4BEF)}
.h4t.c3{background:#FFF4DC}.h4t.c3 i{background:linear-gradient(160deg,#FFE08A,#FFC233)}
.h4nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:480px;display:flex;justify-content:space-around;background:var(--paper);border-radius:24px 24px 0 0;box-shadow:0 -6px 20px rgba(91,60,190,.08);padding:10px 6px calc(10px + env(safe-area-inset-bottom,0px));z-index:30}
.h4nav button{position:relative;flex:1;border:0;background:none;font:inherit;font-size:12px;font-weight:800;color:#A39CBD;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0}
.h4nav button.on{color:var(--violet)}
.h4nav .ring{position:absolute;top:-2px;left:50%;width:34px;height:34px;margin-left:-17px;border-radius:50%;border:3px solid transparent}
.h4nav .h4par.holding .ring{border-color:var(--line);border-top-color:var(--violet);animation:spin 1.5s linear}
@media (max-width:360px){.h4host .face{width:160px;height:160px}.h4bub{font-size:15px}.h4t{font-size:13px}.h4t i{width:48px;height:48px;font-size:24px}}
.h4host{min-height:170px}.h4host .face{width:180px;height:180px}.h4mt b{font-size:21px}
@media (max-height:700px){.h4host{min-height:130px}.h4host .face{width:140px;height:140px}.h4bub{margin-top:20px;font-size:15px;padding:10px 14px}.h4mis{padding:14px;gap:10px}.h4go{padding:12px}.h4t{padding:10px 4px;gap:6px}.h4t i{width:44px;height:44px;font-size:22px}}
.gsec{font-size:19px;font-weight:900;color:var(--ink);margin:14px 2px 10px}
/* «Мой прогресс»: островки */
.mp{display:flex;flex-direction:column}
.mptop{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.mptop h1{flex:1;font-size:24px;font-weight:900;margin:0;color:var(--ink)}
.mptop .h4ava{width:48px;height:48px;font-size:22px}
.mpstar{flex:none;background:linear-gradient(160deg,#7C5CFF,#5B3FE0);color:#fff;font-weight:900;font-size:15px;border-radius:99px;padding:7px 14px}
.mpmap{position:relative;border-radius:28px;overflow:hidden;background:radial-gradient(120% 40% at 0% 100%,#BFE6A8 0 30%,transparent 31%),radial-gradient(90% 30% at 100% 100%,#CBEAB4 0 35%,transparent 36%),linear-gradient(180deg,#EAF3FF,#F4FAEE);box-shadow:var(--shadow)}
.mppath{position:absolute;inset:0;width:100%;height:100%}
.mppath path{fill:none;stroke:#8A93B8;stroke-width:4;stroke-linecap:round;stroke-dasharray:2 12;opacity:.7}
.isl{position:absolute;transform:translate(-50%,-50%);width:150px;border:0;background:none;padding:0;font:inherit;display:flex;flex-direction:column;align-items:center}
.isl .disc{display:flex;align-items:center;justify-content:center;width:130px;height:46px;border-radius:50%;font-style:normal;font-size:20px;font-weight:900;color:#fff;background:radial-gradient(ellipse at 50% 35%,#C9CDD8,#9AA0B2);box-shadow:0 8px 0 #7D8396,0 14px 18px rgba(60,60,90,.18)}
.isl b{margin-top:14px;font-size:14px;font-weight:900;color:#5E6480;background:rgba(255,255,255,.85);padding:3px 10px;border-radius:99px}
.isl small{font-size:12px;font-weight:800;color:var(--muted);margin-top:3px}
.isl.done .disc{background:radial-gradient(ellipse at 50% 35%,#7FD36B,#3FA34D);box-shadow:0 8px 0 #2E7D3A,0 14px 18px rgba(40,120,60,.25)}
.isl.done b{color:#2E7D3A}
.isl.cur .disc{background:radial-gradient(ellipse at 50% 35%,#FFE57A,#FFB938);box-shadow:0 8px 0 #E09412,0 0 0 6px rgba(255,214,90,.35),0 14px 22px rgba(240,160,20,.35)}
.isl.cur b{color:#B66A00}
.isl.cur img{position:absolute;bottom:52px;width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.15));animation:hubbob 2.6s ease-in-out infinite alternate}
.isl.cur{padding-top:0}
.isl.lock .disc{font-size:22px;filter:grayscale(1)}
.mplist{display:flex;flex-direction:column;gap:12px}
.mprow{display:flex;align-items:center;gap:14px;border:0;border-radius:22px;padding:12px 16px 12px 12px;font:inherit;text-align:left;background:var(--paper);box-shadow:var(--shadow)}
.mprow i{flex:none;width:54px;height:54px;border-radius:16px;background:linear-gradient(160deg,#9C7BFF,#6A4BEF);color:#fff;font-style:normal;font-size:28px;font-weight:900;display:flex;align-items:center;justify-content:center}
.mprow span{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.mprow b{font-size:16px;font-weight:900;color:var(--ink)}
.mprow small{font-size:12px;font-weight:700;color:var(--muted)}
.mpbar{display:block;height:8px;border-radius:99px;background:var(--lav)}.mpbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#7C5CFF,#FFA62B)}
@media (prefers-reduced-motion:reduce){.isl.cur img{animation:none}}
body:has(.mp) #gback,body:has(.mp) #gexit,body:has(.mp) #glang{display:none!important}
body:has(.mp) .app{padding-top:calc(10px + env(safe-area-inset-top,0px))!important}
.mp .s2back{align-self:flex-start;margin-bottom:6px}
.mprow .mpbar{display:block;height:8px;border-radius:99px;background:var(--lav)}.mprow .mpbar>div{height:100%;border-radius:99px;background:linear-gradient(90deg,#7C5CFF,#FFA62B)}
/* Экран «говори» v2: крупная картинка по центру, текст под ней; ведущий маленький со строкой; ясно, чья очередь */
.say2 .s2card{position:relative;background:var(--paper);border-radius:28px;padding:16px 16px 18px;margin-top:14px;box-shadow:0 10px 28px rgba(91,60,190,.12);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;transition:box-shadow .3s}
.say2 .s2card.good{box-shadow:0 0 0 4px rgba(34,197,94,.45),0 10px 28px rgba(91,60,190,.12)}
.s2card .s2pic{width:auto;max-width:100%;height:clamp(150px,30vh,280px);object-fit:contain;border-radius:18px;display:block}
.s2card .s2pic.big{width:100%;height:clamp(150px,30vh,280px);max-height:none;object-fit:cover}
.s2card .s2emo{font-size:96px}
.s2card .s2word{font-size:32px}.s2card .s2word.long{font-size:23px}.s2card .s2word.xl{font-size:18px}
.s2card .s2snd{right:14px;bottom:12px;width:40px;height:40px;border-radius:50%;background:var(--lav)}
.s2card .mark{position:absolute;left:10px;top:8px;font-size:34px}.s2card .mark:empty,.s2card .heard{display:none}
.s2host{display:flex;align-items:center;gap:10px;margin:12px 0 0;min-height:56px}
.s2host .face{flex:none;width:56px;height:56px}
.s2host .himg{width:100%;height:100%;object-fit:contain}
.s2host .bubble{flex:1;min-height:0;font-size:16px;padding:10px 14px;border-radius:18px;border-bottom-left-radius:6px;background:var(--paper);border:2px solid var(--line);box-shadow:none}
.s2host .bubble:empty{visibility:hidden}
.s2mic{margin-top:auto;padding-top:8px}
.s2mic .turn-lbl{font-size:17px;font-weight:900;min-height:0;padding:8px 16px;border-radius:99px;margin-bottom:22px;transition:background .25s,color .25s}
.s2mic .turn-lbl:empty{visibility:hidden}
.s2mic .turn[data-st="speak"] .turn-lbl{background:#ECE8F8;color:#6B6390}
.s2mic .turn[data-st="yourturn"] .turn-lbl,.s2mic .turn[data-st="listen"] .turn-lbl{background:#22C55E;color:#fff;box-shadow:0 6px 16px rgba(34,197,94,.35);font-size:19px}
.s2mic .turn[data-st="speak"] .micbig{transform:scale(.78);background:#D5D0E4;box-shadow:0 0 0 10px #fff,0 0 0 12px #ECE8F8;opacity:.75}
.s2mic .turn[data-st="yourturn"] .micbig,.s2mic .turn[data-st="listen"] .micbig{background:linear-gradient(160deg,#8B6CFF,#5B3FE0);box-shadow:0 0 0 10px #fff,0 0 0 14px #22C55E,0 0 34px 10px rgba(124,92,255,.45)}
@media (max-height:700px){.s2card .s2pic,.s2card .s2pic.big{height:clamp(110px,24vh,180px)}.s2host{margin-top:8px}.s2host .face{width:44px;height:44px}}
.s2mic .turn{width:170px}.s2mic .turn-lbl{white-space:nowrap}
/* Стартовый экран: картинка целиком над карточкой (карточка не закрывает Тоти) */
/* Режим «сам с ребёнком» */
.s2self{margin-top:auto;padding-top:14px;text-align:center}
.s2self p{margin:0 0 12px;font-size:15px;font-weight:800;color:var(--muted)}
.s2self div{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.s2b{border:0;border-radius:22px;padding:18px 10px;font:inherit;font-size:19px;font-weight:900}
.s2b.rep{background:var(--lav);color:var(--violet)}
.s2b.ok{background:linear-gradient(160deg,#34D27A,#1FA75A);color:#fff;box-shadow:0 8px 18px rgba(31,167,90,.3)}
.s2b:active{transform:scale(.97)}
.s2card.bump{animation:s2bump .5s}
@keyframes s2bump{30%{transform:scale(1.03)}}
.say2.self .s2host{display:none}
.say2.self .s2card .s2pic,.say2.self .s2card .s2pic.big{height:clamp(190px,40vh,380px)}
.say2.self .s2card .s2word{font-size:40px}.say2.self .s2card .s2word.long{font-size:28px}.say2.self .s2card .s2word.xl{font-size:21px}
/* Картинки чистоговорок и предложений — целиком, без обрезки */
.s2card .s2pic.big{object-fit:contain;background:#fff}
.s2card .s2snd{top:12px;bottom:auto;z-index:1;box-shadow:0 2px 8px rgba(91,60,190,.15)}

/* Стартовый экран: фон, логотип и Тоти отдельными слоями (картинки Nur, img/start) */
.welcome.w2{position:fixed;inset:0;margin:0;padding:calc(54px + env(safe-area-inset-top,0px)) 0 0;z-index:20;justify-content:flex-start;align-items:center;background:#8fd0f5 url(/img/start/bg.webp) center 72%/cover no-repeat}
.welcome.w2::after{display:none}
.wlogo{flex:none;width:100%;text-align:center}
.wlogo img{display:block;width:min(60vw,320px,34dvh);height:auto;margin:0 auto;filter:drop-shadow(0 4px 10px rgba(43,42,94,.18))}
.wslog2{margin-top:4px;font-size:clamp(16px,4.6vw,21px);font-weight:800;color:#2B2A5E;letter-spacing:.2px;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.welcome.w2 .whero{flex:1;min-height:0;width:100%;max-width:520px;display:flex;justify-content:center;align-items:flex-end;padding:6px 16px 0;box-sizing:border-box}
.whero img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 10px 14px rgba(30,60,30,.22))}
.welcome.w2 .wcard2{flex:none;width:calc(100% - 28px);max-width:452px;margin:10px auto calc(18px + env(safe-area-inset-bottom,0px))}
/* Одуванчик в «Дыхательной гимнастике» */
.dand{position:relative;width:min(40vw,160px);aspect-ratio:443/560;margin:0 auto}
.dand img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.dand .dfull{transition:opacity .25s}
.dand .seeds{position:absolute;inset:0;pointer-events:none;overflow:visible}
.dand .seeds i{position:absolute;width:16px;height:24px;margin:-12px 0 0 -8px;animation:seedfly var(--t) ease-out forwards;filter:drop-shadow(0 1px 1px rgba(90,80,140,.35))}
.dand .seeds svg{display:block;width:100%;height:100%}
@keyframes seedfly{0%{transform:translate(0,0) rotate(0) scale(var(--s));opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(var(--s));opacity:0}}
.blowcard{overflow:visible}

/* «На главную» на экранах занятий и прогресса, «Выход» на главной */
.s2r{display:flex;align-items:center;gap:8px}
.s2home{width:40px;height:40px;border-radius:13px;border:2px solid var(--line);background:var(--paper);color:var(--violet);display:flex;align-items:center;justify-content:center;padding:0;box-shadow:var(--shadow)}
.s2home:active{transform:scale(.94)}
.mp .s2top{margin-bottom:6px}
.h4exit{flex:none;align-self:flex-start;border:0;border-radius:99px;background:var(--paper);box-shadow:var(--shadow);padding:8px 10px;font:inherit;font-size:13px;font-weight:800;color:var(--muted);display:flex;align-items:center;gap:5px}
.h4exit:active{transform:scale(.95)}
.h4top .h4lang{padding:8px 10px}

/* «Вперёд ›» рядом с «‹ Назад» */
#gfwd{position:fixed;left:62px;top:calc(12px + env(safe-area-inset-top,0px));z-index:40;width:44px;height:44px;border-radius:14px;background:var(--paper);border:3px solid var(--line);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;color:var(--violet);padding:0;transition:opacity .2s}
#gfwd.off{opacity:.35;pointer-events:none}
body.onhub #gfwd,body.onsay #gfwd,body:has(.mp) #gfwd,body:has(.hub4) #gfwd,body.byebye #gfwd{display:none!important}
/* Заголовок не заезжает под пару стрелок «‹ ›» слева и домик справа */
.hdr,.ltop{padding:0 88px}
.hdr h1{font-size:21px;line-height:1.15}
.ltop .ttl{font-size:20px}
/* ===== Главная v5 (макет Nur): фон с холмами, логотип, миссия с персонажем, три плитки, прогресс ===== */
body:has(.hub5){background:#9ED6F7 url(/img/start/bg.webp) center 70%/cover fixed}
.hub5{gap:14px;margin-top:-82px;padding-bottom:104px}
.h5top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.h5logo{width:min(30vw,130px);height:auto;filter:drop-shadow(0 3px 6px rgba(43,42,94,.18))}
.h5r{display:flex;gap:8px;align-items:center;margin-top:6px}
.h5lang,.h5exit{border:0;border-radius:99px;background:rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(43,60,120,.14);font:inherit;font-size:14px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:6px;padding:10px 14px}
.h5lang i{font-style:normal;color:var(--muted)}
.h5exit{padding:10px;color:var(--muted)}
.h5hi{display:flex;align-items:center;gap:12px}
.h5hi .h4ava{position:relative;width:64px;height:64px;font-size:28px;box-shadow:0 0 0 4px #fff,0 6px 14px rgba(43,60,120,.2)}
.h5hi .h4ava i{position:absolute;right:-4px;bottom:-4px;font-style:normal;font-size:18px;background:#fff;border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center}
.h5hi b{display:block;font-size:22px;font-weight:900;color:#fff;text-shadow:0 2px 6px rgba(30,60,120,.35)}
.h5hi small{display:block;font-size:14px;font-weight:700;color:#fff;line-height:1.3;text-shadow:0 1px 4px rgba(30,60,120,.4)}
.h5mis{position:relative;display:flex;min-height:200px;background:rgba(255,255,255,.88);backdrop-filter:blur(6px);border-radius:28px;padding:16px;box-shadow:0 12px 30px rgba(43,60,120,.16);margin-top:26px}
.h5ml{position:relative;z-index:2;flex:1.15;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.h5tag{background:#F1EEFF;border-radius:99px;padding:6px 12px;font-size:13px;font-weight:800;color:var(--ink)}
.h5ml h2{margin:2px 0 0;font-size:24px;line-height:1.15;font-weight:900;color:var(--ink)}
.h5ml em{font-style:normal;font-size:14px;font-weight:700;color:var(--muted)}
.h5go{position:relative;margin-top:auto;width:100%;max-width:220px;border:0;border-radius:99px;padding:13px 40px 13px 20px;font:inherit;font-size:17px;font-weight:900;color:#fff;background:linear-gradient(90deg,#8B6CFF,#5B3FE0);box-shadow:0 8px 18px rgba(91,63,224,.35);text-align:center}
.h5go i{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-style:normal}
.h5host{position:relative;flex:1;cursor:pointer}
.h5host img{position:absolute;right:-12px;bottom:-16px;width:118%;max-width:220px;height:auto;filter:drop-shadow(0 10px 14px rgba(80,60,160,.22));animation:hubbob 2.6s ease-in-out infinite alternate}
.h5say{position:absolute;right:-6px;top:-34px;max-width:120px;background:#fff;border-radius:16px;padding:6px 10px;font-size:12px;font-weight:800;color:var(--violet);line-height:1.2;transform:rotate(-6deg);box-shadow:0 4px 12px rgba(91,60,190,.15)}
.h5row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.h5t{position:relative;border:0;border-radius:22px;padding:14px 8px 12px;font:inherit;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;box-shadow:0 8px 20px rgba(43,60,120,.12)}
.h5t i{font-style:normal;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px}
.h5t b{font-size:16px;font-weight:900;color:var(--ink);line-height:1.15}
.h5t small{font-size:11.5px;font-weight:700;color:var(--muted);line-height:1.3}
.h5t u{text-decoration:none;margin-top:auto;width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--violet);font-weight:900}
.h5t.c1{background:rgba(227,246,252,.95)}.h5t.c1 i{background:linear-gradient(160deg,#4FC3F7,#1E88E5)}
.h5t.c2{background:rgba(238,234,251,.95)}.h5t.c2 i{background:linear-gradient(160deg,#9C7BFF,#6A4BEF)}
.h5t.c3{background:rgba(255,246,222,.95)}.h5t.c3 i{background:linear-gradient(160deg,#FFE08A,#FFC233)}
.h5t:active,.h5go:active{transform:scale(.97)}
.h5prog{background:rgba(255,255,255,.9);border-radius:24px;padding:14px;box-shadow:0 8px 22px rgba(43,60,120,.12)}
.h5ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.h5ph b{font-size:17px;font-weight:900;color:var(--ink)}
.h5ph button{border:0;border-radius:99px;background:#EEF4FF;padding:7px 12px;font:inherit;font-size:13px;font-weight:800;color:var(--ink)}
.h5stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.h5stats>div{border-radius:16px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;text-align:center}
.h5stats i{font-style:normal;font-size:22px}
.h5stats b{font-size:20px;font-weight:900;color:var(--ink)}
.h5stats small{font-size:11px;font-weight:700;color:var(--muted);line-height:1.2}
.h5stats .s1{background:#E8F7EF}.h5stats .s2{background:#F1ECFF}.h5stats .s3{background:#FFF6DC}
.h5stats .s4{position:relative;background:#EAF6FF;justify-content:flex-end;overflow:hidden}
.h5stats .s4 img{width:72px;height:72px;object-fit:contain}
.h5stats .s4 span{position:absolute;top:4px;right:4px;font-size:10px;font-weight:800;color:var(--violet);transform:rotate(-6deg)}
.h5nav{max-width:460px;bottom:10px;width:calc(100% - 24px);border-radius:24px;background:rgba(255,255,255,.95);box-shadow:0 8px 24px rgba(43,60,120,.18)}
.excard.done{opacity:.7}.excard.done .explay{background:#36B37E}
@media (max-width:370px){.h5ml h2{font-size:21px}.h5t b{font-size:14px}.h5t small{display:none}.h5stats small{font-size:10px}}
/* подгонка главной v5 */
.h5tag{white-space:nowrap;font-size:12px}
.h5ml h2{font-size:22px}
.h5mis{min-height:0;padding:14px}
/* Герой ниже облачка: голова не прячется под подсказкой (высота героя = высота карточки минус место под облачко) */
.h5host img{right:-14px;bottom:-14px;width:auto;height:calc(100% + 2px);min-height:150px;max-height:205px;max-width:none}
.h5say{top:-38px;right:-4px;max-width:150px;z-index:3}
.h5say::after{content:'';position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-top-color:#fff;border-bottom:0}
.h5t{padding:12px 6px 10px;gap:5px}
.h5t i{width:52px;height:52px;font-size:26px}
.h5t b{font-size:15px}
.h5t small{font-size:11px}
.h5t u{width:28px;height:28px}
.h5nav button{font-size:11px;letter-spacing:-.2px;min-width:0}
.h5hi b{font-size:21px}
.h5row{grid-template-columns:repeat(3,minmax(0,1fr))}
.h5t b,.h5ml h2{overflow-wrap:anywhere;hyphens:auto}
.h5ml{flex:0 0 60%;min-width:0}
.h5host{flex:0 0 40%}
.mouth{width:100%;max-width:280px;height:auto;display:block}
.mouth .mtxt{font:900 20px Nunito,sans-serif;fill:var(--violet);text-anchor:end}
.mouth .mtxt.l{text-anchor:start}
/* Раздел «Игры»: группы, «смотри и проверь», нейроигры */
.gbox{display:flex;flex-direction:column;align-items:center;gap:12px}
.gbox .mouth{width:min(100%,280px);height:auto}
.onobig{width:180px;height:180px;border-radius:32px;background:var(--paper);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;overflow:hidden}
.onobig img{width:100%;height:100%;object-fit:contain;background:#fff;padding:6px;box-sizing:border-box}.onobig span{font-size:110px}
.gch{display:grid;gap:10px;width:100%}
.gch.pics,.gch.hands{grid-template-columns:repeat(3,minmax(0,1fr))}.gch.words{grid-template-columns:1fr}
.gch button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;background:var(--paper);border:3px solid var(--line);border-radius:22px;box-shadow:var(--shadow);font-family:inherit;transition:transform .15s}
.gch button img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:16px;padding:4px;box-sizing:border-box}.gch button span{font-size:56px;line-height:1.2}
.gch button b{font-size:15px;color:var(--ink);overflow-wrap:normal;word-break:normal;hyphens:auto}.gch.words button{padding:14px;font-size:18px}
.gch button.ok{border-color:var(--leaf,#22A55B);background:#E9F9EF}
.gch button.no{border-color:var(--coral,#FF5C5C);animation:gshake .5s}
.gch button:disabled{opacity:.6}
@keyframes gshake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.gscore{font-size:30px;font-weight:900;color:var(--ink)}
.hbig{width:200px;height:200px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#E9E2FF);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center}
.hbig.pop{animation:hpop .35s}@keyframes hpop{0%{transform:scale(.85)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
.hpose{display:inline-block;font-size:110px;line-height:1}.hpose.edge{transform:rotate(-90deg)}
.gch.hands .hpose,.hrow .hpose{font-size:52px}
.hrow{display:flex;gap:10px;justify-content:center}
.hrow .slot{width:76px;height:76px;border-radius:20px;border:3px dashed var(--line);display:flex;align-items:center;justify-content:center;font-style:normal;background:var(--paper)}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(100%,340px)}
.mgrid button{aspect-ratio:1;padding:0;border-radius:50%;border:5px solid #fff;background:#fff;box-shadow:var(--shadow);overflow:hidden;transition:transform .15s,box-shadow .15s}
.mgrid button img{width:100%;height:100%;object-fit:cover;display:block}
.mgrid button.lit{transform:scale(1.08);box-shadow:0 0 0 6px #FFC933,0 0 28px 8px rgba(255,201,51,.9)}
.mgrid button.no{animation:gshake .5s}
.s2p{padding-right:0}
.gstep{flex-direction:row;justify-content:center;gap:10px}.gstep .cta{flex:1;max-width:200px}
.cta.ghost{background:#fff;color:var(--violet);border:3px solid var(--lav);box-shadow:none}

@media (max-width:360px){.gch button b{font-size:12.5px}.gch button{padding:8px 4px}}

.bkrow{display:flex;align-items:flex-end;justify-content:center;gap:4px}.basket{font-size:64px;line-height:1;transition:transform .3s}.basket.eat{transform:scale(1.3) rotate(-8deg)}
body.onhub #gmute{top:calc(14px + env(safe-area-inset-top,0px))!important}
body:has(.hub4) #gmute{display:none!important}
body:has(.mp) #gmute{top:calc(22px + env(safe-area-inset-top,0px))!important;right:76px}
body.onsay #gmute{display:none!important}
.mptree{margin:6px 0 10px;background:linear-gradient(#EAF6FF,#F6FBEF);border-radius:24px;padding:8px 8px 10px;text-align:center}
.mptree svg{width:100%;max-width:340px;height:auto;display:block;margin:0 auto}
.mptree p{margin:2px 0 0;font-size:14px;font-weight:800;color:var(--ink)}
.tfr{cursor:pointer}.tgl{font:900 17px Nunito,system-ui,sans-serif;fill:#fff;text-anchor:middle}.tfl{font:800 11px Nunito,system-ui,sans-serif;fill:#9a8fb3;text-anchor:middle}
.tfr.done circle:first-child{animation:tpop .5s ease-out}@keyframes tpop{from{transform:scale(.2)}}
.hpose.himg{width:130px;height:130px;object-fit:contain}.gch.hands .hpose.himg,.hrow .hpose.himg{width:60px;height:60px}
.wbig .h2{display:flex;gap:6px;font-size:76px;line-height:1}.wbig .h2 b{font-weight:400}.wbig .h1{font-size:110px;line-height:1}
.rhand{width:150px;height:170px}.rhand .fg{fill:none;stroke-linecap:round}.rhand .sk .fg{stroke:#D99A73;stroke-width:24}.rhand .fl .fg{stroke:#F6C9A6;stroke-width:18}.rhand .fl .fg.on{stroke:#FFB27A}.rhand .sk rect{fill:#D99A73;stroke:#D99A73;stroke-width:6}.rhand .fl rect{fill:#F6C9A6}.rhand .ring{fill:none;stroke:var(--violet);stroke-width:5}
.rdots{display:flex;gap:22px;justify-content:center;min-height:40px;margin:6px 0 10px}.rdots span{display:flex;gap:8px}.rdots i{width:26px;height:26px;border-radius:50%;background:var(--lav);transition:transform .15s,background .15s}.rdots i.on{background:#FFC933;transform:scale(1.35)}.rdots i.done{background:var(--violet)}
.rdrum{width:170px;height:170px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#fff,#E9E2FF);box-shadow:var(--shadow);font-size:96px;line-height:1;cursor:pointer}.rdrum.hit{animation:hpop .25s}
.peekbox{position:relative;width:min(70vw,250px);height:min(70vw,250px);border:0;padding:0;border-radius:28px;background:linear-gradient(#DDF1FF,#F2FBEA);overflow:hidden;box-shadow:var(--shadow);cursor:pointer}
.pkimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform:translateY(var(--y,62%));transition:transform .6s cubic-bezier(.3,1.4,.5,1)}.pkpic{width:82%;height:82%;object-fit:contain}
.peekbox .bush{position:absolute;left:-6%;right:-6%;bottom:-14%;font-size:min(22vw,82px);line-height:1;white-space:nowrap;text-align:center;letter-spacing:-12px;transition:transform .6s}.peekbox.open .bush{transform:translateY(80%)}
.pkw{min-height:40px;color:var(--violet)}
.trpic{display:flex;flex-direction:column;align-items:center;gap:2px}.trimg{width:min(46vw,170px);height:min(46vw,170px);object-fit:contain}.trpic b{font-size:30px;color:var(--ink)}
.train{display:flex;align-items:flex-end;gap:6px;justify-content:center;width:100%}.loco{font-size:54px;line-height:1}
.wag{flex:1;max-width:96px;border:0;border-radius:16px 16px 10px 10px;background:#FF9F43;box-shadow:inset 0 -8px 0 rgba(0,0,0,.12),var(--shadow);padding:10px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;position:relative}
.wag:nth-child(3){background:#2E8BFF}.wag:nth-child(4){background:#22A55B}.wag i{font-style:normal;width:46px;height:46px;border-radius:12px;background:#fff;font-size:28px;font-weight:900;color:var(--violet);display:flex;align-items:center;justify-content:center}
.wag small{color:#fff;font-weight:800;font-size:12px}.wag.ok{outline:4px solid #FFC933}.wag.no{animation:shake .4s}
.wtrack{position:relative;width:100%;height:120px;border-radius:24px;background:linear-gradient(#E6F6FF,#EAF7DF);overflow:hidden}.wwho{position:absolute;left:0;bottom:6px;width:96px;height:96px;object-fit:contain;transition:left .12s linear}.wgoal{position:absolute;right:10px;bottom:16px;font-size:58px;line-height:1}
#whold{margin-top:4px;font-size:13px;touch-action:none}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
/* Нижнее меню на всех экранах */
.gnav{z-index:45}.gnav.hide{display:none}.app .h5nav{display:none}
body.gnav .app{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}
body.gnav .say2{min-height:calc(100dvh - 120px)}
@media (max-width:360px){.gnav button{font-size:9.5px;letter-spacing:-.3px}}
/* ---- Словарик: карточки слов по темам ---- */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;width:100%;max-width:640px;margin:0 auto}
.vcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px 12px;background:var(--paper);border:3px solid var(--line);border-radius:22px;box-shadow:var(--shadow);font-family:inherit;cursor:pointer;transition:transform .12s,border-color .2s}
.vcard:active{transform:scale(.96)}.vcard.on{border-color:var(--sky);transform:scale(1.04)}.vcard.got{border-color:var(--leaf)}
.vpic{width:96px;height:96px;object-fit:contain;display:flex;align-items:center;justify-content:center}.vemo{font-size:68px;line-height:1}
.vw{font-size:22px;font-weight:800;color:var(--ink)}.vw b{font-weight:900}
.vcard em{position:absolute;top:6px;right:8px;font-style:normal;font-size:20px;opacity:0;transform:scale(.4);transition:all .3s}.vcard.got em{opacity:1;transform:scale(1)}
.vcol{width:78px;height:78px;margin:9px;border-radius:50%;background:var(--k);border:3px solid rgba(0,0,0,.12);box-shadow:inset 0 -8px 14px rgba(0,0,0,.15)}
.vnum{font-size:72px;font-weight:900;color:var(--sky);line-height:1}
/* Игры словарика */
.vpairs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:460px;margin:0 auto}
.vpc{position:relative;aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;perspective:600px}
.vpc>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:18px;border:3px solid var(--line);box-shadow:var(--shadow);backface-visibility:hidden;transition:transform .35s}
.vpc .vback{background:linear-gradient(135deg,var(--violet),var(--violet2));font-size:40px;border-color:#fff}
.vpc .vface{background:var(--paper);transform:rotateY(180deg)}.vpc .vface .vpic{width:78%;height:78%}.vpc .vface .vemo{font-size:52px}
.vpc.up .vback{transform:rotateY(180deg)}.vpc.up .vface{transform:rotateY(0)}.vpc.got .vface{border-color:var(--leaf)}
.vgone{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;transition:filter .3s,opacity .3s}#vgg.shut .vgone{filter:blur(14px);opacity:.3}
.vgc{width:96px;display:flex;flex-direction:column;align-items:center;padding:8px 4px;background:var(--paper);border:3px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.vgc .vpic{width:72px;height:72px}.vgc .vemo{font-size:52px}.vgc .vw{font-size:15px}.vgc.empty{font-size:44px;justify-content:center;min-height:100px;border-style:dashed}
.vopt{width:100%;aspect-ratio:1;object-fit:contain;display:flex;align-items:center;justify-content:center}
.vsent{display:flex;justify-content:center;gap:8px;margin:4px 0 10px}
.vsc{width:104px;min-height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 4px;background:var(--paper);border:3px solid var(--leaf);border-radius:18px;box-shadow:var(--shadow)}
.vsc .vpic{width:72px;height:72px}.vsc .vemo{font-size:50px}.vsc .vw{font-size:15px}.vsc.empty{border:3px dashed var(--line);color:var(--muted);font-weight:800;font-size:14px}
.gch.odd{grid-template-columns:repeat(2,minmax(0,1fr));max-width:290px;margin:0 auto}
/* Игры: яркие цветные карточки с крупной картинкой */
.tgrid .gtile{height:140px;display:block;padding:14px;border:0;border-radius:26px;text-align:left;overflow:hidden;color:#fff;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 62%,#fff),var(--c));box-shadow:0 7px 0 color-mix(in srgb,var(--c) 70%,#000),0 12px 18px rgba(0,0,0,.12);margin-bottom:7px;transition:transform .12s}
.tgrid .gtile:active{transform:translateY(4px);box-shadow:0 3px 0 color-mix(in srgb,var(--c) 70%,#000)}
.tgrid .gtile b{position:relative;z-index:2;display:block;max-width:72%;color:#fff;font-size:18px;font-weight:900;line-height:1.12;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.tgrid .gtile img{position:absolute;right:-10px;bottom:-8px;width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25));z-index:1}
.tgrid .gtile i{position:absolute;right:8px;bottom:8px;width:auto;height:auto;border:0;box-shadow:none;background:none;font-size:62px;filter:drop-shadow(0 5px 6px rgba(0,0,0,.25))}
.tgrid .gtile u{position:absolute;left:-34px;bottom:-44px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.18)}
.tgrid .gtile:last-child:nth-child(odd){grid-column:span 2;height:120px}.tgrid .gtile:last-child:nth-child(odd) img{width:116px;height:116px;right:10px}
.tgrid .gtile.soon{opacity:1;filter:saturate(.55)}.tgrid .gtile em.soon{z-index:3;top:auto;bottom:12px;left:14px;right:auto;background:rgba(0,0,0,.25)}
@media (max-width:360px){.tgrid .gtile{height:124px}.tgrid .gtile b{font-size:16px}.tgrid .gtile img{width:80px;height:80px}.tgrid .gtile i{font-size:50px}}
.tgrid .gtile .gcount{position:relative;z-index:2;display:inline-block;margin-top:6px;background:rgba(255,255,255,.28);color:#fff;font-weight:900;font-size:12px;border-radius:99px;padding:3px 9px}
.gsecs .gtile{height:150px}
/* Для родителей: анкета и мини-проверка звуков (check.js) */
.cknote{background:var(--lav);border-radius:16px;padding:12px 14px;font-size:13px;color:var(--muted);margin-bottom:12px;line-height:1.4}
.ckthanks{color:var(--ink);font-size:15px;font-weight:800}
.ckagree label{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--muted);line-height:1.4}.ckagree input{width:22px;height:22px;flex:none;margin-top:2px}
.ckdone{color:var(--leaf)!important;font-weight:800}
.ckdel{color:var(--coral)}
.ckform .box .k{font-weight:800;color:var(--ink);font-size:15px;margin-bottom:10px}.ckform .box .k i{font-weight:400;color:var(--muted);font-size:12px;font-style:normal}
.ckopts{display:flex;flex-wrap:wrap;gap:8px}.ckopts .chipbtn{background:var(--paper);color:var(--ink);font-family:inherit}.chipbtn.on{border-color:var(--violet);background:var(--lav);color:var(--violet);font-weight:800}
.ckform textarea{width:100%;box-sizing:border-box;border:2px solid var(--line);border-radius:12px;padding:10px;font:inherit;font-size:14px;background:var(--bg);color:var(--ink);resize:vertical}
.ckhow ol{margin:8px 0;padding-left:20px;font-size:15px;line-height:1.5}.ckhow p{margin:6px 0 0;font-size:13px;color:var(--muted)}
.ckbar{height:8px;border-radius:4px;background:var(--lav);margin:-20px 90px 14px 0;overflow:hidden}.ckbar i{display:block;height:100%;background:var(--violet);transition:width .3s}
.ckcard{min-height:0;padding:18px}.ckcard .wimg{max-height:200px}.ckword{font-size:30px}
.ckrow{display:flex;gap:8px;justify-content:center;margin:12px 0 4px}.ckrow .chipbtn{background:var(--paper);color:var(--ink);font-family:inherit}.ckrow .chipbtn:disabled{opacity:.4}
.ckparent{text-align:center;font-size:13px;color:var(--muted);margin:10px 0 8px}
.ckmarks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ckmarks button{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--paper);border:3px solid var(--line);border-radius:18px;padding:12px 6px;font-size:26px;font-family:inherit}
.ckmarks button b{font-size:13px;color:var(--ink);line-height:1.2}.ckmarks button:active{transform:scale(.96);border-color:var(--violet)}
.ckfoot{flex-direction:row;justify-content:space-between;margin-top:8px}
.ckres{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:start;padding:10px 0;border-top:2px solid var(--line)}.box .k+.ckres{border-top:0}
.ckres .ckg{font-size:28px;font-weight:900;color:var(--violet);text-align:center}.ckres small{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.ckpill{display:inline-block;font-size:12px;font-weight:800;padding:3px 10px;border-radius:99px}
.ck-ok{background:#DCFCE7;color:#15803D}.ck-watch{background:#FEF3C7;color:#B45309}.ck-train{background:#FFE4E6;color:#BE123C}.ck-skip{background:var(--lav);color:var(--muted)}
.ckres .ckyoung{color:var(--violet)}
.ckplan{margin:8px 0 4px;font-size:16px;line-height:1.6}.cksub{margin:6px 0 0;font-size:13px;color:var(--muted)}
.ckflag{border-color:#FDBA74}.ckflag p{margin:6px 0 0;font-size:14px;line-height:1.4}
/* Несколько детей (kids.js) */
.kbar{display:flex;gap:10px;justify-content:flex-start;margin:4px 0 10px;flex-wrap:wrap;position:relative;z-index:2}
.kav{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;border-radius:18px;background:rgba(255,255,255,.75);border:3px solid transparent;font-family:inherit;min-width:64px}
.kav img{width:46px;height:46px;object-fit:contain;border-radius:50%;background:var(--lav)}.kav b{font-size:13px;color:var(--ink)}
.kav.on{border-color:var(--violet);background:#fff}.kav:not(.on){opacity:.75}
.kidrow span img{width:46px;height:46px;object-fit:contain;border-radius:50%;background:var(--lav)}.kidrow.on{border-color:var(--violet)}
.kidrow small{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px}.kidrow .chipbtn{font-family:inherit;color:var(--violet);background:var(--paper)}.kidrow .kdel{color:var(--coral)}
.gage{position:absolute;bottom:14px;left:14px;z-index:2;font-style:normal;font-size:11px;font-weight:800;color:#fff;background:var(--leaf);padding:2px 8px;border-radius:99px;border:2px solid #fff}
/* «Практика»: карта миров на весь экран, листается вбок; плитки чистоговорок и стихов как яркие карточки игр */
.exmap .exchips{margin-bottom:8px}
.mapfull{position:relative;margin:0 -16px;height:calc(100dvh - 236px);min-height:400px}
.mapscroll{height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mapscroll::-webkit-scrollbar{display:none}
.mapfull .map{height:100%;width:auto;aspect-ratio:3/2;border-radius:0;box-shadow:none}
.mapfull .mapimg{filter:saturate(1.35) contrast(1.06) brightness(1.05)}
.mapfull .node{width:92px;height:92px;border-width:4px}
.mapfull .map8 .node{width:70px;height:70px}
.mapfull .node .tag{font-size:15px;padding:3px 12px}.mapfull .map8 .node .tag{font-size:13px}
.mapfull .node .ok{width:28px;height:28px;font-size:16px}
.mapfull .node:active{transform:translate(-50%,-50%) scale(.94)}
.mapfull .node.on{animation:nodebob 2.2s ease-in-out infinite}
@keyframes nodebob{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-56%)}}
.maphint{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:#fff;color:#2A1660;padding:8px 18px;border-radius:99px;font-weight:900;font-size:17px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.2);pointer-events:none}
.exgrid .gtile small.gcount{color:#fff}
.mapar{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#5B3FE0;font:inherit;font-size:30px;font-weight:900;line-height:1;padding-bottom:4px;box-shadow:0 4px 12px rgba(0,0,0,.25);transition:opacity .2s}
.mapar.l{left:10px}.mapar.r{right:10px}.mapar.off{opacity:0;pointer-events:none}
.exgrid .gtile i{font-size:64px;font-weight:900;color:rgba(255,255,255,.9);text-shadow:0 4px 0 rgba(0,0,0,.15);right:14px;bottom:4px;filter:none}
.exgrid .gtile .gcount{position:relative;z-index:2;margin-top:8px}
.exgrid .gtile i{font-size:76px;bottom:0}
.exgrid .gtile{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}
.exgrid .gtile i{top:2px;bottom:auto;right:14px;font-size:64px;line-height:1}
.exgrid .gtile b{max-width:100%}
/* Выбор друга: Айша и Али бесплатно, остальные по подписке */
.htile em{position:absolute;left:50%;top:6px;transform:translateX(-50%);font-style:normal;font-size:10.5px;font-weight:900;padding:2px 8px;border-radius:99px;white-space:nowrap}
.htile .hfree{background:#22A55B;color:#fff}
.htile .hplus{background:linear-gradient(160deg,#FFC93C,#FF9500);color:#5A2E00}
.htile.on .hfree,.htile.on .hplus{left:8px;transform:none}
/* Картинки вместо эмодзи: кусты в «Прятках», паровозик, цели «Ветерка», предметы «Подуй!» */
.peekbox .bush{display:flex;justify-content:center;letter-spacing:0}.peekbox .bush img{width:44%;margin:0 -7%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.18))}
img.loco{width:96px;height:72px;object-fit:contain;flex:none}
img.wgoal{width:70px;height:70px;object-fit:contain}
.blowobj img{width:150px;height:150px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.18))}
/* «Дорожка жестов» */
.htrack{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;margin:6px 0}
.hcell{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:20px;background:var(--paper);border:3px solid var(--line);transition:transform .2s,background .2s,border-color .2s}
.hcell .hpose{font-size:46px}.hcell .hpose.himg{width:78%;height:78%}
.hcell.on{transform:scale(1.12);border-color:var(--violet);background:#F1EBFF;box-shadow:0 0 0 4px rgba(124,77,255,.18),0 8px 18px rgba(124,77,255,.25);z-index:1}
.hcell.done{opacity:.4}
.hpose.mir{transform:scaleX(-1)}.hpose.edge.mir{transform:scaleX(-1) rotate(-90deg)}
.plusbadge{align-self:center;background:linear-gradient(160deg,#FFC93C,#FF9500);color:#5A2E00;font-weight:900;font-size:13px;padding:4px 12px;border-radius:99px;margin-bottom:4px}
/* Реалистичные руки: правая из набора, левая зеркально */
.h2img{display:flex;gap:4px;align-items:flex-end}.h2img .hpose.himg{width:140px;height:140px}
.hpose.himg.mir{transform:scaleX(-1)}
.hbig .hpose.himg{width:190px;height:190px}
@media (max-width:360px){.h2img .hpose.himg{width:120px;height:120px}}
/* Игры голосом: «Принеси!», «С или Ш?», «Через речку» */
.wemo{font-size:64px;line-height:1.1;display:flex;align-items:center;justify-content:center}
.ffield{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:min(26vw,110px) 12px;width:min(100%,360px);padding:6px;border-radius:28px;background:radial-gradient(circle at 50% 50%,#E9F9EE 0,#CDEFD8 100%)}
.fslot{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px 6px;background:var(--paper);border:3px solid var(--line);border-radius:22px;box-shadow:var(--shadow);font-family:inherit;transition:transform .3s,opacity .3s}
.fslot .wimg{width:78%;aspect-ratio:1;height:auto;object-fit:contain}.fslot b{font-size:17px;color:var(--violet)}.fslot .wemo{height:78px}
.fslot.taken{transform:scale(.2);opacity:0}.fslot.empty{visibility:hidden}
.fdog{position:absolute;left:50%;top:50%;width:min(28vw,112px);aspect-ratio:1;margin:calc(min(28vw,112px)/-2) 0 0 calc(min(28vw,112px)/-2);border-radius:50%;background:#fff;padding:6px;box-sizing:border-box;box-shadow:0 6px 18px rgba(0,0,0,.14);transition:transform .6s cubic-bezier(.4,1.4,.5,1);z-index:3}
.fdog .wimg{width:100%;height:100%;object-fit:contain}.fdog.run{transform:translate(var(--tx),var(--ty)) scale(.9)}
.fbag{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;min-height:46px}
.fbag span{width:44px;height:44px;border-radius:12px;background:var(--paper);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;overflow:hidden}
.fbag span .wimg{width:38px;height:38px;object-fit:contain}.fbag span .wemo{font-size:30px}.fbag span.no{opacity:.5}
.fbag.fin span{width:64px;height:64px}.fbag.fin span .wimg{width:56px;height:56px}
.spairs{display:flex;flex-direction:column;gap:14px;margin:6px 0 12px}
.spair{position:relative;display:flex;align-items:center;justify-content:space-around;padding:14px 10px;background:var(--paper);border:3px solid var(--line);border-radius:26px;box-shadow:var(--shadow);font-family:inherit}
.spair span{display:flex;flex-direction:column;align-items:center;gap:2px}.spair img{width:84px;height:84px;object-fit:contain}.spair span>span{font-size:62px;line-height:84px}
.spair b{font-size:26px;white-space:nowrap;font-weight:900;color:var(--violet);line-height:1}.spair i{font-style:normal;font-weight:800;color:var(--muted)}
.spair.soon{filter:saturate(.4);opacity:.75}.spair em.soon{position:absolute;top:8px;left:50%;transform:translateX(-50%)}
.scard{width:min(52vw,200px);background:var(--paper);border:3px solid var(--line);border-radius:26px;padding:8px 8px 4px;display:flex;flex-direction:column;align-items:center;box-shadow:var(--shadow);transition:transform .6s ease-in,opacity .6s}
.scard .wimg{width:90%;aspect-ratio:1;height:auto;object-fit:contain}.scard .wemo{font-size:110px;height:170px}.scard b{font-size:28px;color:var(--violet)}
.scard.fly{transform:translate(var(--tx),var(--ty)) scale(.25);opacity:0}
.sbins{display:flex;gap:12px;width:100%}
.sbin{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;background:var(--lav);border:3px solid var(--line);border-radius:24px;font-family:inherit;transition:transform .2s}
.sbin img{width:84px;height:84px;object-fit:contain;border-radius:50%;background:#fff;padding:4px}.sbin span{font-size:60px;line-height:92px}
.sbin b{font-size:32px;font-weight:900;color:var(--violet);line-height:1;white-space:nowrap}.sbin.got{transform:scale(1.08)}.sbin.hl{transform:scale(1.08);border-color:var(--violet);background:#fff}.sbin.no{animation:gshake .5s}
.griver{position:relative;width:100%;height:min(64vw,270px);border-radius:24px;overflow:hidden;background:#7DD3FC}
.gwater{position:absolute;inset:0 10%;background:repeating-linear-gradient(170deg,#38BDF8 0 18px,#5CCBFA 18px 34px);background-size:100% 200%;animation:gflow 3s linear infinite}
@keyframes gflow{to{background-position:0 68px}}
.gbank{position:absolute;top:0;bottom:0;width:13%;background:linear-gradient(90deg,#4ADE80,#22C55E);z-index:1}
.gbank.l{left:0;border-radius:0 40% 40% 0}.gbank.r{right:0;border-radius:40% 0 0 40%;background:linear-gradient(270deg,#4ADE80,#22C55E)}
.gprize{position:absolute;right:12%;top:14%;width:60%;max-width:40px}
.gstone{position:absolute;width:17%;aspect-ratio:1.25;transform:translate(-50%,-50%);border:0;padding:0;background:radial-gradient(ellipse at 40% 35%,#E5E7EB,#9CA3AF);border-radius:46% 54% 50% 50%;box-shadow:0 5px 0 rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;z-index:2;font-family:inherit;transition:transform .2s}
.gstone b{font-size:clamp(15px,4.6vw,22px);font-weight:900;color:#3B2A7A;text-transform:uppercase}
.gstone.next{background:radial-gradient(ellipse at 40% 35%,#FEF3C7,#FBBF24);transform:translate(-50%,-50%) scale(1.12);animation:gglow 1.2s ease-in-out infinite}
.gstone.past b{opacity:.45}
@keyframes gglow{50%{box-shadow:0 5px 0 rgba(0,0,0,.18),0 0 0 6px rgba(251,191,36,.45)}}
.ghop{position:absolute;width:15%;aspect-ratio:1;transform:translate(-50%,-78%);border-radius:50%;background:#fff;padding:3px;box-sizing:border-box;box-shadow:0 4px 10px rgba(0,0,0,.18);transition:left .55s ease-out,top .55s ease-out;z-index:3;pointer-events:none}
.ghop img{width:100%;height:100%;object-fit:contain}.ghop.jump{animation:ghopa .55s ease-out}
@keyframes ghopa{50%{transform:translate(-50%,-150%) scale(1.08)}}
.gsyls{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.gsyls span{background:var(--paper);border:3px solid var(--line);border-radius:14px;padding:6px 10px;font-size:22px;font-weight:900;color:var(--violet);text-transform:uppercase}

/* «Кулак, ребро, ладонь»: две руки на столе */
.hdesk{position:relative;display:flex;flex-direction:column;align-items:center;width:min(300px,80vw);margin:0 auto}
.hdhands{display:flex;justify-content:center;gap:6px;position:relative;z-index:1;margin-bottom:-18px}
.hdesk .hpose.himg{width:min(130px,36vw);height:min(130px,36vw)}
.hdtable{display:block;width:100%;height:46px;border-radius:14px;background:linear-gradient(180deg,#E7B97E 0,#D49A5A 55%,#B97B3E 100%);box-shadow:0 8px 14px rgba(120,70,20,.22),inset 0 3px 0 rgba(255,255,255,.35)}
#hbig .hdesk{animation:none}#hbig.pop .hdhands{animation:hpop .35s}
.hhow{display:flex;flex-direction:column;gap:10px;width:100%;max-width:420px;margin:6px auto}
.hhrow{display:flex;align-items:center;gap:10px;background:#fff;border-radius:18px;padding:8px 12px;box-shadow:var(--shadow)}
.hhrow .hdesk{width:120px;flex:none;margin:0}.hhrow .hpose.himg{width:52px;height:52px}.hhrow .hdtable{height:20px;border-radius:8px}.hhrow .hdhands{margin-bottom:-8px;gap:2px}
.hhrow b{display:block;font-size:17px}.hhrow span{font-size:14px;color:#555;line-height:1.3}
/* «Прятки»: кнопка микрофона */
.pkmic{display:flex;align-items:center;gap:10px;margin:0 auto;padding:10px 22px 10px 10px;border:0;border-radius:99px;background:linear-gradient(160deg,#9B7BFF,#6C3BFF);color:#fff;font:900 18px Nunito,system-ui,sans-serif;box-shadow:0 6px 0 #4A23C8,0 10px 16px rgba(0,0,0,.12);cursor:pointer}
.pkmic i{font-style:normal;width:48px;height:48px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:26px}
.pkmic.on{background:linear-gradient(160deg,#FF7A9A,#E8358F);box-shadow:0 6px 0 #B21E68,0 0 0 8px rgba(232,53,143,.25);animation:pkpulse 1s ease-in-out infinite}
@keyframes pkpulse{50%{box-shadow:0 6px 0 #B21E68,0 0 0 14px rgba(232,53,143,.12)}}
.rdrum img{width:86%;height:86%;object-fit:contain;pointer-events:none}

/* «Ухо и нос»: мальчик показывает позу */
.hbig .hpose.himg.enimg{width:210px;height:250px;object-fit:contain}.hbig:has(.enimg){border-radius:28px;width:230px;height:260px;overflow:hidden;align-items:flex-end}

/* Реалистичный рот для упражнений с язычком */
.mouthimg{display:block;width:min(260px,70vw);height:auto;aspect-ratio:1;margin:0 auto;border-radius:32px;background:#FFE9DC;box-shadow:var(--shadow);object-fit:cover;animation:mouthbob 2.4s ease-in-out infinite alternate}
@keyframes mouthbob{from{transform:scale(1)}to{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){.mouthimg{animation:none}}
.rdrum img{width:78%;height:auto;display:block;margin:auto;pointer-events:none}
/* Библиотека: рабочие тетради PDF */
.wbh{margin:14px 4px 8px;font-size:17px;color:var(--ink)}
.wbgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.wbcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--paper);border:3px solid var(--line);border-radius:20px;padding:12px 8px;box-shadow:var(--shadow);font-family:inherit;color:var(--ink)}
.wbcard img{width:72px;height:72px;object-fit:contain}
.wbcard i{position:absolute;top:8px;left:10px;font-style:normal;font-weight:900;font-size:20px;color:#fff;background:var(--violet);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center}
.wbcard b{font-size:17px}
.wbcard small{font-size:12px;color:var(--muted)}
.wbcard em{font-style:normal;font-weight:800;font-size:13px;margin-top:4px;padding:3px 10px;border-radius:999px;background:var(--leaf);color:#fff}
.wbcard.locked em{background:var(--lav);color:var(--muted)}
.wbcard.locked img{opacity:.55}
#vgg{position:relative}.vcurt{position:absolute;inset:-6px;display:flex;align-items:center;justify-content:center;font-size:64px;border-radius:22px;background:linear-gradient(135deg,var(--violet),var(--violet2));opacity:0;transform:translateY(-30%);pointer-events:none;transition:all .4s}
#vgg.shut .vcurt{opacity:1;transform:none}#vgg.shut .vgone{filter:none;opacity:1}
.vgc.empty{border-color:var(--coral);animation:vpulse 1s infinite}.vgc.empty span{font-size:52px}
@keyframes vpulse{50%{transform:scale(1.06)}}

/* ===== UI/UX: светлая тема всегда (тёмная тема системы делала белый текст на светлых карточках) ===== */
:root{color-scheme:light}
/* Нижнее меню прижато к низу экрана, без щели: под ним ничего не просвечивает */
.gnav.h5nav{bottom:0;width:100%;max-width:480px;border-radius:24px 24px 0 0;background:#fff;padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 20px rgba(43,60,120,.14)}
/* Главная кнопка экрана («Начать», «Далее») всегда видна над меню, даже если экран не помещается */
body.gnav .app>.actions:last-child:has(>.cta:only-child){position:sticky;bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:6;margin-top:auto;padding-top:8px}
body.gnav .app>.actions:last-child:has(>.cta:only-child) .cta{box-shadow:0 8px 20px rgba(91,60,190,.28)}
/* Прокрутка к элементу останавливается над меню, а не под ним */
body.gnav{scroll-padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
.lstep{scroll-margin-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
/* «Выбери друга» на невысоком экране (ноутбук, телефон боком): все 9 героев и «Начать» помещаются */
@media (max-height:760px) and (min-width:420px){.hgrid{grid-template-columns:repeat(3,minmax(0,150px));justify-content:center}.htile .himg{max-height:84px;width:auto}.hgrid+.actions,.lead+.hgrid{margin-top:8px}}
.htile{padding-top:20px}
.h5hi>div{min-width:0}
/* Знакомство: вместо руки большой Тоти */
.nmtoti{width:150px;height:150px;object-fit:contain;margin-bottom:4px;animation:hubbob 2.6s ease-in-out infinite alternate}
/* Карта «Тренируй речь» на весь экран, без пустого низа */
html,body{overflow-x:clip}
.mapfull{min-height:0;width:100vw;margin:0 calc(50% - 50vw);overflow:hidden;background:#7CC35A}
.mapfull::before{content:'';position:absolute;inset:-30px;background:url(/img/map.webp) center/cover;filter:blur(22px) saturate(1.35) brightness(1.04)}
.mapfull .mapscroll{position:relative}
.mapfull .map{margin:0 auto}
/* Слоги: крупно, по центру карточки, в одну строку */
.s2card.syl{min-height:clamp(170px,32vh,320px);justify-content:center}
.s2card.syl .s2word{font-size:clamp(64px,19vw,120px);line-height:1;white-space:nowrap;letter-spacing:1px}
/* Нажатие без задержки на телефоне (без ожидания двойного касания) */
button,a,[onclick]{touch-action:manipulation}

/* «Кулак, ребро, ладонь»: две руки на столе */
.hdesk{position:relative;display:flex;flex-direction:column;align-items:center;width:min(300px,80vw);margin:0 auto}
.hdhands{display:flex;justify-content:center;gap:6px;position:relative;z-index:1;margin-bottom:-18px}
.hdesk .hpose.himg{width:min(130px,36vw);height:min(130px,36vw)}
.hdtable{display:block;width:100%;height:46px;border-radius:14px;background:linear-gradient(180deg,#E7B97E 0,#D49A5A 55%,#B97B3E 100%);box-shadow:0 8px 14px rgba(120,70,20,.22),inset 0 3px 0 rgba(255,255,255,.35)}
#hbig .hdesk{animation:none}#hbig.pop .hdhands{animation:hpop .35s}
.hhow{display:flex;flex-direction:column;gap:10px;width:100%;max-width:420px;margin:6px auto}
.hhrow{display:flex;align-items:center;gap:10px;background:#fff;border-radius:18px;padding:8px 12px;box-shadow:var(--shadow)}
.hhrow .hdesk{width:120px;flex:none;margin:0}.hhrow .hpose.himg{width:52px;height:52px}.hhrow .hdtable{height:20px;border-radius:8px}.hhrow .hdhands{margin-bottom:-8px;gap:2px}
.hhrow b{display:block;font-size:17px}.hhrow span{font-size:14px;color:#555;line-height:1.3}

/* «Ухо и нос»: мальчик показывает позу */
.hbig .hpose.himg.enimg{width:210px;height:250px;object-fit:contain}.hbig:has(.enimg){border-radius:28px;width:230px;height:260px;overflow:hidden;align-items:flex-end}

/* Реалистичный рот для упражнений с язычком */
.mouthimg{display:block;width:min(260px,70vw);height:auto;aspect-ratio:1;margin:0 auto;border-radius:32px;background:#FFE9DC;box-shadow:var(--shadow);object-fit:cover;animation:mouthbob 2.4s ease-in-out infinite alternate}
@keyframes mouthbob{from{transform:scale(1)}to{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){.mouthimg{animation:none}}
/* «Звуки по ступеням»: зверёк звука виден на плитке, счётчик ступеней читается на фиолетовом */
.tgrid .ladpick i{top:10px;right:10px;bottom:auto;width:64px;height:64px;border-radius:50%;background:#fff;border:3px solid #fff;overflow:hidden;filter:none;box-shadow:0 6px 14px rgba(0,0,0,.2)}
.tgrid .ladpick i img{width:100%;height:100%;object-fit:cover}
.tgrid .ladpick small{color:#fff;font-weight:800;opacity:.95;position:relative;z-index:1}
.tgrid .ladpick{justify-content:flex-end}

/* Иконки разделов для взрослых (img/ui) */
.pcard span .uiic{width:52px;height:52px;object-fit:contain}
/* Зарядка: группы упражнений и проверка в зеркале (face.js) */
.exgrp{margin:10px 4px 0;font-size:15px;font-weight:900;color:var(--violet);letter-spacing:.2px}
.exgrp:first-child{margin-top:0}
.exsec.run.wait{border-color:#F2B233;animation:none}
.facechk{margin-top:10px;width:100%;max-width:300px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.facechk[hidden]{display:none}
.facechk .fbar{display:block;width:100%;height:12px;border-radius:8px;background:#ECEEF6;overflow:hidden}
.facechk .fbar b{display:block;height:100%;width:0;border-radius:8px;background:#F2B233;transition:width .25s}
.facechk.ok .fbar b{background:#22A55B}
.facechk span{font-weight:900;font-size:17px;color:#5A5F7A}
.facechk.ok span{color:#1C8B4B}
.facechk small{font-size:11.5px;line-height:1.35;color:#8A8FA8;font-weight:700}
/* С зеркалом картинка рта меньше, чтобы ребёнок видел и пример, и себя без прокрутки */
.excard1.mir .mouthimg,.excard1.mir svg.mouth{width:min(150px,40vw);max-width:150px;border-radius:24px}
.excard1.mir .extext{font-size:15px;margin:8px 0 0}
.excard1.mir .exsec{width:56px;height:56px;font-size:24px;border-width:5px;margin-top:6px}
.excard1.mir .mirv{max-width:240px;margin-top:8px}
.fturn{margin-top:0;gap:2px}.fturn .micbig{width:84px;height:84px}.fturn .turn-lbl{font-size:18px;min-height:22px}.fturn .ic-mic{width:38px;height:38px}
.ffield{gap:min(20vw,84px) 10px}.fslot .wimg{width:60%}.fslot .wemo{height:60px;font-size:48px}
/* «Найди упражнение»: варианты — картинки рта */
.gch.mouths button{padding:6px 6px 8px}
.gch.mouths .mouthimg,.gch.mouths svg.mouth{width:100%;max-width:none;border-radius:16px;box-shadow:none;animation:none;padding:0}
.gch.mouths button b{font-size:12px;color:var(--muted)}
.gch.pics.mouths{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px;margin:0 auto}
.gch.mouths button:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 6px)}
/* «Взрослым»: замочек на кнопке и подсказка «держите» с полоской заполнения */
.gated{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.h4nav .h4par.gated::after{content:'🔒';position:absolute;top:0;left:50%;margin-left:8px;font-size:11px;line-height:1}
#gtip{position:fixed;z-index:9999;background:#2B2350;color:#fff;border-radius:14px;padding:9px 12px 10px;font-size:14px;font-weight:800;text-align:center;box-shadow:0 8px 22px rgba(30,20,70,.3);opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .15s,transform .15s}
#gtip.on{opacity:1;transform:none}
#gtip i{display:none;height:6px;margin-top:7px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden}
#gtip.fill i{display:block}
#gtip i b{display:block;height:100%;width:0;background:#FFC93C;border-radius:3px}
#gtip.go i b{width:100%;transition:width 1.5s linear}

/* Помощник логопеда */
.hlog{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow-y:auto;padding:4px 2px 8px}
.hmsg{padding:12px 14px;border-radius:18px;font-size:15px;line-height:1.45;max-width:88%;color:var(--ink)}
.hmsg.me{align-self:flex-end;background:var(--violet);color:#fff;border-bottom-right-radius:6px}
.hmsg.ai{align-self:flex-start;background:var(--paper);border:2px solid var(--line);border-bottom-left-radius:6px}
.hopen{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.hopen .linkbtn{padding:6px 10px;border:2px solid var(--line);border-radius:999px;font-size:14px}
.htips{display:flex;flex-direction:column;gap:8px;margin:6px 0}
.htip{text-align:left;background:var(--paper);border:2px dashed var(--line);border-radius:14px;padding:10px 12px;font:inherit;font-size:14px;color:var(--ink)}
.hbox{background:var(--paper);border:3px solid var(--line);border-radius:22px;padding:14px;margin-bottom:12px}

.htime{font-size:11px;opacity:.65;margin-top:4px;text-align:right}
.vsay{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;padding:8px;border-radius:12px;background:rgba(255,196,0,.18)}
.vsay span{flex:1 1 100%;font-weight:700}.vsay button{flex:1;padding:10px;border-radius:10px;font-size:15px;color:#fff;background:#22A55B}.vsay #vno{background:rgba(255,255,255,.2)}
/* Фото рта вместо эмодзи (задания, зарядка, «Язычок»): круглые в списках, скруглённые на плитках игр */
.excard .expic img[src*="/mouth/"]{width:56px;height:56px;border-radius:50%;object-fit:cover}
.tgrid .gtile img[src*="/mouth/"]{border-radius:24px;object-fit:cover;right:-6px;bottom:-6px}
/* «Повторяшка»: ведущий крупно, качается, пока повторяет за ребёнком */
.prthost{flex-direction:column;text-align:center}.prthost .face{width:180px;height:180px;transition:transform .2s}.prthost .bubble{max-width:100%}
.prthost.bob .face{animation:prtbob .32s ease-in-out infinite alternate}
@keyframes prtbob{from{transform:rotate(-4deg) scale(1)}to{transform:rotate(4deg) scale(1.06)}}
.prtp{text-align:center;font-size:13px;opacity:.7;margin-top:6px}
/* Стартовый экран: выбор роли (ребёнок / родитель / логопед) */
.wcard2 .wask{margin:-4px 0 10px;font-size:17px;font-weight:800;color:#3B2A7A}
.wroles{display:flex;gap:10px;margin-top:10px}
.wcard2 .wroles button{flex:1;height:52px;display:flex;align-items:center;justify-content:center;gap:6px;background:#fff;color:#5B2BC9;border:2px solid #D9CCF7;box-shadow:none;font-size:15px;padding:0 6px}
.wcard2 .wroles button i{font-style:normal;font-size:20px}
.wcard2 .wroles button.holding{background:#F1EAFF}
/* Форма регистрации: ошибки под полем, глазок пароля, вход через Google и Apple */
.authf .fwrap{position:relative}
.authf .ferr{display:block;min-height:0;margin:4px 4px 0;font-size:13px;font-weight:700;color:var(--coral)}
.authf .ferr:empty{display:none}
.authf .in.bad{border-color:var(--coral)}
.authf .fpw .in{padding-right:48px}
.authf .peye{position:absolute;right:6px;top:16px;width:40px;height:36px;border:0;background:none;font-size:18px;opacity:.45;padding:0;cursor:pointer}
.authf .peye.on{opacity:1}
.authf .socials{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:4px 0 6px}
.authf .gbtn{display:flex;justify-content:center;min-height:44px}
.authf .abtn{height:44px;border-radius:99px;border:0;background:#000;color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.authf .ordiv{display:flex;align-items:center;gap:10px;margin:8px 0 2px;color:var(--muted);font-size:13px}
.authf .ordiv::before,.authf .ordiv::after{content:'';flex:1;height:2px;background:var(--line)}

/* Старое нижнее меню прячем, когда показано общее: на широком экране их было видно оба */
body.gnav #tabs{display:none!important}

/* ---- Видеоурок: раскладки экрана у ребёнка, громкость, пульт логопеда ---- */
.vlay{position:fixed;left:50%;transform:translateX(-50%);top:calc(8px + env(safe-area-inset-top,0px));z-index:80;display:flex;gap:4px;padding:4px;background:rgba(15,20,35,.82);border-radius:18px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.vlay button{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:58px;padding:6px 8px;border-radius:14px;color:#fff;font-size:18px;line-height:1}
.vlay button span{font-size:11px;font-weight:800;opacity:.9}
.vlay button.on{background:#6C5CE7}
.vtoast{position:fixed;left:50%;top:calc(76px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:81;background:rgba(15,20,35,.9);color:#fff;padding:8px 14px;border-radius:14px;font-size:14px;font-weight:700;pointer-events:none}
body.vl-video .vroom{padding-top:0}
body.vl-video .vroom .vstat{top:45%}
/* 50/50: видео сверху (или слева, если телефон лёжа), урок в другой половине */
body.vl-split .vroom{inset:0 0 auto 0;height:50vh;height:50dvh}
body.vl-split .vroom .vbar{bottom:8px}body.vl-split .vroom .vbar button{width:44px;height:44px;font-size:19px}
body.vl-split .vroom #lv{width:22vw;max-width:110px}
body.vl-split #app{position:fixed;left:0;right:0;top:50vh;top:50dvh;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;margin-top:0;min-height:0}
@media (orientation:landscape){body.vl-split .vroom{inset:0 auto 0 0;width:50vw;height:100vh;height:100dvh}body.vl-split #app{top:0;left:50vw;margin-top:60px}}
/* только урок: окно видео прячем, звук звонка идёт */
body.vl-lesson .vroom{visibility:hidden;pointer-events:none}
body.inlesson #app{margin-top:60px}
body.inlesson .vroom:not(.tl-split) #lv{top:calc(74px + env(safe-area-inset-top,0px))}
/* пульт логопеда */
.tctl{position:absolute;left:10px;top:calc(10px + env(safe-area-inset-top,0px));width:min(400px,calc(100% - 20px));max-height:calc(100% - 130px);overflow:auto;background:rgba(15,20,35,.9);color:#fff;border-radius:16px;padding:8px 10px;z-index:3}
.tch{display:flex;align-items:center;justify-content:space-between}.tch b{font-size:15px}.tch button{color:#fff;font-size:18px;width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.12)}
.tctl.fold .tcb{display:none}
.tcg{margin-top:8px}.tcg small{display:block;font-size:12px;color:rgba(255,255,255,.7);margin-bottom:4px}
.tcr{display:flex;flex-wrap:wrap;gap:6px}.tcr button{flex:1 1 auto;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;font-size:14px;font-weight:700}
.tcr button.on{background:#6C5CE7}
.vroom.tl-split #rv{height:50%}body.inlesson .vroom:has(.tctl):not(.tl-split) #lv{top:auto;bottom:calc(150px + env(safe-area-inset-bottom,0px))}.vroom.tl-split #lv{position:absolute;left:0;right:0;top:50%;width:100%;max-width:none;height:50%;border:0;border-radius:0;object-fit:cover}
.vroom.tl-noself #lv{display:none}
.vroom .tctl~.vstat{top:55%}