:root{
  --green:#58cc02;--green-d:#58a700;--blue:#1cb0f6;--blue-d:#1899d6;--red:#ff4b4b;--red-d:#ea2b2b;
  --gold:#ffc800;--gold-d:#e5a500;--orange:#ff9600;--purple:#ce82ff;
  --bg:#fff;--soft:#f7f7f7;--line:#e5e5e5;--text:#4b4b4b;--muted:#777;--head:#3c3c3c;
  --blue-l:#ddf4ff;--blue-b:#84d8ff;--blue-t:#1899d6;
  --green-l:#d7ffb8;--green-t:#58a700;--red-l:#ffdfe0;--red-t:#ea2b2b;--warn-l:#fff3cd;--warn-t:#946200;
  --gray-d:#afafaf;--lock:#e5e5e5;--lock-d:#b7b7b7;--shadow:rgba(0,0,0,.08);
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
}
:root[data-theme=dark]{
  --bg:#131f24;--soft:#1b2b33;--line:#2f414b;--text:#dce6ec;--muted:#8fa4af;--head:#f1f7fb;
  --blue-l:#1a3a4d;--blue-b:#2b7ba3;--blue-t:#49c0f8;
  --green-l:#1d3b14;--green-t:#79d93a;--red-l:#3b1a1d;--red-t:#ff7b7b;--warn-l:#3d3213;--warn-t:#ffd666;
  --gray-d:#6d8591;--lock:#2b3d47;--lock-d:#1f2e36;--shadow:rgba(0,0,0,.4);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{overflow-x:hidden;max-width:100vw}
:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}
html.noscroll,html.noscroll body{overflow:hidden;overscroll-behavior:none}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:'Nunito',-apple-system,'Segoe UI',system-ui,sans-serif;font-weight:700;transition:background .25s,color .25s}
body{-webkit-font-smoothing:antialiased;-webkit-touch-callout:none}
button,.btn,.opt,.chip,.node,.nav-i{touch-action:manipulation;-webkit-user-select:none;user-select:none}
button{font-family:inherit;cursor:pointer;color:inherit}
input,textarea{font-family:inherit;-webkit-user-select:text;user-select:text}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:12px}
.ic{display:inline-block;vertical-align:middle;flex:none}
mark{background:none;border-radius:4px;padding:0 1px;font-weight:900}
mark.x{color:var(--red-t);background:rgba(255,75,75,.2)}
mark.m{color:var(--green-t);background:rgba(88,204,2,.18)}

/* ---------- кнопки ---------- */
.btn{border:2px solid var(--green-d);border-bottom-width:4px;border-radius:16px;padding:13px 18px;min-height:50px;font-weight:900;font-size:15px;
  text-transform:uppercase;letter-spacing:.8px;color:#fff;background:var(--green);transition:filter .1s,transform .06s}
.btn:active{transform:translateY(3px);border-bottom-width:1px;margin-bottom:3px}
.btn.blue{background:var(--blue);border-color:var(--blue-d)}
.btn.red{background:var(--red);border-color:var(--red-d)}
.btn.ghost{background:var(--bg);color:var(--blue-t);border-color:var(--line)}
.btn.sm{padding:9px 14px;font-size:13px;min-height:42px}
.btn[disabled]{background:var(--line);border-color:var(--line);color:var(--gray-d);cursor:not-allowed;filter:none;transform:none;margin:0}
@media(hover:hover){.btn:hover{filter:brightness(1.07)}.nav-i:hover{background:var(--soft)}.opt:hover,.chip:hover,.lt:hover{background:var(--soft)}.gcard:hover{filter:brightness(1.05)}}

/* ---------- каркас ---------- */
.shell{display:flex;min-height:100vh;min-height:100dvh}
nav.side{position:fixed;z-index:20;background:var(--bg);display:flex;gap:4px}
.logo{font-size:28px;font-weight:900;color:var(--green);letter-spacing:-.5px;padding:8px 12px 20px;display:none;align-items:center;gap:8px}
.nav-i{display:flex;align-items:center;gap:16px;padding:10px 14px;border:2px solid transparent;border-radius:14px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;font-size:15px;color:var(--muted);background:none}
.nav-i.on{background:var(--blue-l);border-color:var(--blue-b);color:var(--blue-t)}
.ic-w{position:relative;display:grid;place-items:center}
.badge-n{position:absolute;top:-6px;right:-10px;background:var(--red);color:#fff;font-style:normal;font-size:11px;font-weight:900;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px;border:2px solid var(--bg)}
main{flex:1;min-width:0}
.col{max-width:600px;margin:0 auto;padding:0 16px calc(120px + var(--sab));overflow-x:clip}
aside.right{display:none}
.view{animation:fadeUp .35s both}
@media(max-width:999px){
  nav.side{left:0;right:0;bottom:0;justify-content:space-around;border-top:2px solid var(--line);padding:6px calc(4px + var(--sar)) calc(6px + var(--sab)) calc(4px + var(--sal))}
  .nav-i{flex:1;flex-direction:column;gap:2px;padding:6px 2px;font-size:11px;letter-spacing:.2px;text-transform:none;min-width:0;border-radius:12px}
  .nav-i .nt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
}
@media(min-width:1000px){
  nav.side{top:0;bottom:0;left:0;width:256px;flex-direction:column;border-right:2px solid var(--line);padding:16px 14px}
  .logo{display:flex}
  main{margin-left:256px}
  .col{padding-bottom:60px}
}
@media(min-width:1240px){
  aside.right{display:block;width:380px;padding:24px 24px 0 0;flex:none}
  .rcard{position:sticky;top:24px}
}

/* ---------- верхняя панель ---------- */
.topbar{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--bg);z-index:12;border-bottom:2px solid var(--line);margin:0 -16px;padding:calc(10px + var(--sat)) calc(18px + var(--sar)) 10px calc(18px + var(--sal))}
.topbar .logo{display:flex;padding:0;font-size:22px}
.stats{display:flex;gap:14px;font-weight:900;font-size:17px;align-items:center}
.stats .s,.s{display:flex;gap:5px;align-items:center}
.s.flame{color:var(--orange)}.s.xp{color:var(--gold-d)}.s.hh{color:var(--red)}
.s.off{color:var(--gray-d)}
@media(min-width:1240px){.topbar{display:none}}

/* ---------- путь ---------- */
section.unit{margin-top:6px}
.unit-h{margin:20px 0 6px;border-radius:18px;padding:14px 18px;color:#fff;background:var(--c);box-shadow:0 5px 0 var(--d);position:sticky;top:calc(58px + var(--sat));z-index:5}
@media(min-width:1240px){.unit-h{top:8px}}
.unit-h small{display:block;font-size:12px;font-weight:900;letter-spacing:1px;text-transform:uppercase;opacity:.85}
.unit-h h2{font-size:20px;font-weight:900;margin-top:2px}
.unit-h p{margin-top:3px;opacity:.95;font-size:14px;line-height:1.3}
.path{display:flex;flex-direction:column;align-items:center;padding:14px 0 10px}
.path.first-cur{padding-top:60px}
.node-w{position:relative;height:118px;width:calc(100% - 130px);display:flex;flex-direction:column;align-items:center;left:var(--x);animation:pop .5s both;animation-delay:calc(var(--i)*35ms)}
.node{width:76px;height:68px;border-radius:50%;border:0;background:var(--c);box-shadow:0 8px 0 var(--d);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .08s,box-shadow .08s;position:relative;margin-top:8px}
.node:active{transform:translateY(6px);box-shadow:0 2px 0 var(--d)}
.node.done{background:var(--gold);box-shadow:0 8px 0 var(--gold-d)}
.node.done:active{box-shadow:0 2px 0 var(--gold-d)}
.node.locked{background:var(--lock);box-shadow:0 8px 0 var(--lock-d);color:var(--gray-d)}
.node.locked:active{transform:none;box-shadow:0 8px 0 var(--lock-d)}
.node.cur::before{content:'';position:absolute;inset:-10px;border-radius:50%;border:5px solid var(--line);border-top-color:var(--c);border-right-color:var(--c);transform:rotate(-25deg);animation:ring 2.4s linear infinite}
.lbl{margin-top:16px;font-size:13px;font-weight:800;color:var(--muted);white-space:nowrap}
.start{position:absolute;top:-52px;left:50%;transform:translateX(-50%);background:var(--bg);color:var(--c);border:2px solid var(--line);border-radius:12px;padding:6px 14px;font-weight:900;font-size:14px;letter-spacing:.8px;animation:bob 1.3s ease-in-out infinite;white-space:nowrap;z-index:2}
.start::after{content:'';position:absolute;bottom:-8px;left:50%;width:12px;height:12px;background:var(--bg);border-right:2px solid var(--line);border-bottom:2px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.buddy{position:absolute;left:calc(50% + 62px);top:0;display:none}
@media(min-width:520px){.buddy{display:block}}
.shake{animation:shake .38s}

/* ---------- карточки ---------- */
.card{border:2px solid var(--line);border-radius:18px;padding:16px;margin:14px 0;background:var(--bg);position:relative}
.card h3{font-size:18px;font-weight:900;color:var(--head);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.card.note{background:linear-gradient(135deg,rgba(255,111,181,.14),transparent);border-color:rgba(255,111,181,.45)}
.card.install{border-color:var(--blue-b);background:var(--blue-l);padding:12px 40px 12px 14px;margin:10px 0}
.card.install h3{font-size:15px;margin-bottom:4px}
.x2{position:absolute;top:6px;right:6px;background:none;border:0;color:var(--muted);padding:6px;line-height:0}
.row{display:flex;gap:14px;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{border:2px solid var(--line);border-radius:16px;padding:12px 14px}
.stat b{display:flex;align-items:center;gap:6px;font-size:22px;font-weight:900;color:var(--head)}
.stat small{color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.5px;font-size:11px}
.page-t{font-size:26px;font-weight:900;margin:20px 0 6px;color:var(--head)}
.sub{color:var(--muted);margin:0 0 14px;line-height:1.45}
.tiny{font-size:13px;color:var(--muted);line-height:1.4;margin-top:6px}
.bar{height:14px;background:var(--line);border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--green);border-radius:99px;transition:width .6s cubic-bezier(.2,.8,.2,1);position:relative}
.bar>i::after{content:'';position:absolute;left:8px;right:8px;top:4px;height:4px;border-radius:4px;background:rgba(255,255,255,.35)}
.bar.blue>i{background:var(--blue)}.bar.gold>i{background:var(--gold)}
.ringbox{position:relative;display:inline-grid;place-items:center}
.ringbox>.in{position:absolute;display:grid;place-items:center;font-weight:900}
.week{display:flex;justify-content:space-between;gap:6px}
.wd{flex:1;text-align:center;font-size:12px;color:var(--muted);font-weight:800}
.wd i{display:grid;place-items:center;width:32px;height:32px;margin:6px auto 0;border-radius:50%;background:var(--line);color:#fff;font-style:normal}
.wd.on i{background:var(--orange)}
.wd.today i{outline:3px solid var(--blue-b);outline-offset:2px}

/* ---------- игры (хаб) ---------- */
.gcards{display:grid;gap:12px;margin-top:6px}
.gcard{display:flex;align-items:center;gap:14px;text-align:left;border:0;border-bottom:5px solid rgba(0,0,0,.22);border-radius:18px;padding:14px 16px;min-height:76px;color:#fff;background:var(--c);transition:transform .08s,border-width .08s,filter .15s}
.gcard:active{transform:translateY(4px);border-bottom-width:1px}
.gcard.off{filter:grayscale(.9);opacity:.55}
.gcard .gi{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.22);display:grid;place-items:center;flex:none}
.gcard .gt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.gcard b{font-size:18px;font-weight:900}
.gcard small{font-size:13px;opacity:.95;font-weight:700;line-height:1.3}
@media(min-width:520px){.gcards{grid-template-columns:1fr 1fr}.gcard.big{grid-column:1/-1}}

/* ---------- мои ошибки ---------- */
.vl{display:grid;gap:10px}
.mi{border:2px solid var(--line);border-radius:16px;padding:12px 14px;animation:fadeUp .3s both}
.mi-h{display:flex;align-items:center;gap:10px}
.mi-t{flex:1;min-width:0}.mi-t b{display:block;color:var(--head);font-size:18px}.mi-t span{color:var(--muted);font-size:14px}
.mi-b{margin-top:8px;font-size:14px;line-height:1.5;display:grid;gap:4px}
.mi-b .why{color:var(--warn-t);background:var(--warn-l);border-radius:10px;padding:5px 10px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mi-f{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.why-r{display:grid;grid-template-columns:minmax(0,1.2fr) 1fr 28px;gap:10px;align-items:center;margin:8px 0;font-size:14px}
.why-r b{text-align:right}

/* ---------- словарь ---------- */
.vi{display:flex;align-items:center;gap:12px;border:2px solid var(--line);border-radius:16px;padding:10px 12px}
.vi .emo{font-size:26px;width:34px;text-align:center}
.vi .tx{flex:1;min-width:0}.vi .tx b{display:block;color:var(--head)}.vi .tx span{color:var(--muted);font-size:14px}
.dots{display:flex;gap:3px}
.dots i{width:7px;height:18px;border-radius:4px;background:var(--line)}
.dots i.f{background:var(--green)}.dots i.w{background:var(--orange)}
.sp{width:42px;height:42px;border-radius:12px;border:2px solid var(--line);background:var(--bg);color:var(--blue-t);display:grid;place-items:center;flex:none}
.search{display:flex;align-items:center;gap:10px;border:2px solid var(--line);border-radius:16px;padding:0 14px;margin-bottom:14px;background:var(--soft);color:var(--muted)}
.search input{flex:1;border:0;background:none;outline:none;font-size:16px;font-weight:700;padding:13px 0;color:var(--text);min-width:0}
.letters{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.lt{border:2px solid var(--line);border-bottom-width:4px;border-radius:16px;padding:12px;background:var(--bg);text-align:left;transition:transform .08s}
.lt:active{transform:translateY(2px);border-bottom-width:2px}
.lt .big{font-size:28px;font-weight:900;color:var(--blue-t)}
.lt .rus{font-size:13px;color:var(--muted);margin-top:2px;line-height:1.3}
.lt .ex{font-size:14px;margin-top:6px;display:flex;gap:6px;align-items:center}
.lt.sp{border-color:var(--blue-b);background:var(--blue-l)}

/* ---------- профиль ---------- */
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.ach{border:2px solid var(--line);border-radius:16px;padding:12px 8px;text-align:center}
.ach .ai{width:54px;height:54px;border-radius:50%;margin:0 auto 8px;display:grid;place-items:center;background:var(--line);color:var(--gray-d)}
.ach.got .ai{background:var(--gold);color:#fff;box-shadow:0 4px 0 var(--gold-d)}
.ach b{display:block;font-size:14px;color:var(--head)}.ach span{font-size:12px;color:var(--muted)}
.ach:not(.got){opacity:.65}
.set{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:2px solid var(--line)}
.set:first-of-type{border-top:0}
.set span{color:var(--head)}
.seg{display:flex;border:2px solid var(--line);border-radius:12px;overflow:hidden}
.seg button{border:0;background:var(--bg);padding:9px 12px;font-weight:800;font-size:13px;color:var(--muted);min-height:40px}
.seg button.on{background:var(--blue-l);color:var(--blue-t)}
.seg.wide{margin-bottom:14px}.seg.wide button{flex:1;font-size:15px}
.sw{width:54px;height:32px;border-radius:99px;background:var(--line);border:0;position:relative;transition:background .2s;flex:none}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sw.on{background:var(--green)}.sw.on::after{transform:translateX(22px)}
.tin{width:100%;font:inherit;font-size:18px;font-weight:700;padding:13px 16px;border:2px solid var(--line);border-radius:16px;background:var(--soft);outline:none;color:var(--text);min-height:52px}
.tin:focus{border-color:var(--blue-b);background:var(--bg)}
textarea.tin{font-size:16px;font-family:ui-monospace,Consolas,monospace;resize:vertical;min-height:84px;word-break:break-all}

/* ---------- слои: урок и игры ---------- */
.layer{position:fixed;left:0;right:0;top:var(--vvt,0px);height:var(--vvh,100vh);background:var(--bg);z-index:50;display:none;flex-direction:column;overflow:hidden}
.layer.on{display:flex;animation:slideUp .35s cubic-bezier(.2,.8,.2,1)}
.l-top{display:flex;align-items:center;gap:14px;max-width:900px;width:100%;margin:0 auto;padding:calc(14px + var(--sat)) calc(16px + var(--sar)) 8px calc(16px + var(--sal));flex:none}
.x{background:none;border:0;color:var(--gray-d);line-height:0;padding:6px;border-radius:10px}
.pbar{flex:1;height:16px;background:var(--line);border-radius:99px;overflow:hidden}
.pfill{height:100%;width:0;background:var(--green);border-radius:99px;transition:width .45s cubic-bezier(.2,.8,.2,1);position:relative}
.pfill::after{content:'';position:absolute;left:8px;right:8px;top:4px;height:4px;border-radius:4px;background:rgba(255,255,255,.35)}
.hearts{color:var(--red);font-weight:900;font-size:18px;display:flex;gap:5px;align-items:center}
.hearts.break{animation:shake .45s}.hearts.break .ic{animation:beat .45s}
.combo{display:none;align-items:center;gap:3px;color:var(--orange);font-weight:900;font-size:16px}
.combo.on{display:flex;animation:pop .35s}
.l-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:flex;justify-content:center;padding:6px calc(16px + var(--sar)) 24px calc(16px + var(--sal))}
#exbox,#gbox{width:100%;max-width:600px;margin:0 0 auto}
#gbox{padding-top:8px}
#exbox.enter>*,#gbox.enter>*{animation:slideIn .35s both}
.gtitle{flex:1;font-weight:900;font-size:19px;color:var(--head);text-align:center}
.gstat{min-width:70px;justify-content:flex-end;font-size:16px;gap:10px}
.gtip{text-align:center;color:var(--muted);margin-bottom:14px}
.q{font-size:24px;font-weight:900;margin:10px 0 18px;color:var(--head);line-height:1.2}
.say{display:flex;align-items:center;gap:12px;margin-bottom:20px}
#mas{flex:none}
.bcol{display:grid;gap:8px;min-width:0;flex:1;justify-items:start}
.bigemo{font-size:56px;line-height:1;font-style:normal;margin-bottom:2px}
.bubble{border:2px solid var(--line);border-radius:16px;padding:10px 14px;display:inline-flex;align-items:center;gap:12px;position:relative;font-size:20px;font-weight:700;color:var(--head);max-width:100%}
.bubble.alt{background:var(--soft);font-size:18px}
.bubble::before{content:'';position:absolute;left:-9px;top:22px;width:14px;height:14px;background:var(--bg);border-left:2px solid var(--line);border-bottom:2px solid var(--line);transform:rotate(45deg)}
.bubble.alt::before{display:none}
.bubble span{min-width:0;overflow-wrap:anywhere}
.spk{width:44px;height:44px;border-radius:12px;border:0;background:var(--blue);box-shadow:0 4px 0 var(--blue-d);color:#fff;display:grid;place-items:center;flex:none}
.spk:active{transform:translateY(3px);box-shadow:none}
.spk.big{width:120px;height:100px;border-radius:20px;box-shadow:0 6px 0 var(--blue-d)}
.spk.slow{background:var(--bg);color:var(--blue-t);box-shadow:0 4px 0 var(--line);border:2px solid var(--line);width:64px;height:56px;font-size:15px;font-weight:900}
.lw{display:flex;gap:14px;align-items:center;justify-content:center;margin:16px 0 26px}
.lw .big.play{animation:pulse 1.2s ease-in-out 2}
.cloze{border:2px solid var(--line);border-radius:16px;padding:16px;margin-bottom:18px;background:var(--soft)}
.cl-t{font-size:22px;color:var(--head);line-height:1.5}
.blank{display:inline-block;min-width:72px;border-bottom:3px solid var(--blue);color:transparent;margin:0 2px}
.cl-r{margin-top:8px;color:var(--muted);font-size:15px}
.opts{display:grid;gap:10px}
.opts.grid{grid-template-columns:1fr 1fr}
.opts.tf{grid-template-columns:1fr 1fr}
.opts.tf .opt{justify-content:center;font-size:19px;padding:20px 10px}
.opts.tf .opt .key{display:none}
.opt{display:flex;align-items:center;gap:14px;text-align:left;background:var(--bg);border:2px solid var(--line);border-bottom-width:4px;border-radius:16px;padding:14px 16px;min-height:56px;font-size:18px;font-weight:700;color:var(--text);transition:transform .08s,background .15s}
.opt:active{transform:translateY(2px);border-bottom-width:2px}
.opt .key{width:28px;height:28px;border:2px solid var(--line);border-radius:8px;display:grid;place-items:center;font-size:13px;color:var(--muted);flex:none}
@media(pointer:coarse){.opt .key{display:none}.opt{justify-content:center;text-align:center}.opts:not(.grid):not(.tf) .opt{justify-content:flex-start;text-align:left}}
.opts.grid .opt{flex-direction:column;justify-content:center;gap:6px;font-size:54px;padding:16px 8px;position:relative;line-height:1.1}
.opts.grid .opt .key{position:absolute;top:8px;left:8px}
.opt.sel{background:var(--blue-l);border-color:var(--blue-b);color:var(--blue-t);animation:pop .22s}
.opt.sel .key{border-color:var(--blue-b);color:var(--blue-t)}
.opt.ok{background:var(--green-l);border-color:var(--green);color:var(--green-t);animation:pop .3s}
.opt.bad{background:var(--red-l);border-color:var(--red);color:var(--red-t);animation:shake .38s}
.opt.locked{pointer-events:none}
.ans{min-height:68px;border-top:2px solid var(--line);border-bottom:2px solid var(--line);padding:8px 0;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;align-content:flex-start;background:repeating-linear-gradient(transparent 0 56px,var(--line) 56px 58px)}
.ans.letters{background:none;border:0;justify-content:center;min-height:60px}
.bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{background:var(--bg);border:2px solid var(--line);border-bottom-width:4px;border-radius:14px;padding:10px 16px;min-height:46px;font-size:18px;font-weight:700;color:var(--text);transition:transform .08s}
.chip:active{transform:translateY(2px);border-bottom-width:2px}
.chip.ghost{background:var(--line);border-color:var(--line);color:transparent;pointer-events:none}
.ans .chip{animation:pop .18s}
.bank.letters .chip,.ans.letters .chip{min-width:46px;padding:10px 12px;font-size:22px;font-weight:900;text-align:center}
.sp-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.sp-row button{padding:8px 0;flex:1;min-width:40px;font-size:20px;border-radius:12px;border:2px solid var(--line);border-bottom-width:4px;background:var(--bg);font-weight:900;color:var(--blue-t);min-height:46px}
.mcols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mcols .opt{justify-content:center;text-align:center;padding:14px 6px;font-size:16px;transition:opacity .3s,transform .3s;overflow-wrap:anywhere}
.mcols .opt.done{opacity:0;transform:scale(.8);pointer-events:none}

/* ---------- объяснение перед уроком ---------- */
.intro{text-align:center}
.intro h2{font-size:26px;font-weight:900;color:var(--head);margin:4px 0}
.kicker{font-size:12px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:6px 0}
.tipbox{border:2px solid var(--blue-b);background:var(--blue-l);color:var(--blue-t);border-radius:16px;padding:14px 16px;text-align:left;margin:16px 0;line-height:1.5;font-size:16px}
.tipbox b{display:flex;align-items:center;gap:6px;font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px}
.sdots{display:flex;gap:5px;justify-content:center;margin:2px 0 14px;flex-wrap:wrap}
.sdots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.sdots i.ps{background:var(--green)}.sdots i.on{background:var(--blue);transform:scale(1.4)}
.nw{margin:10px 0 18px}
.nw-emo{font-size:84px;line-height:1.1;animation:pop .5s}
.nw-tr{display:inline-flex;align-items:center;gap:12px;background:none;border:0;font-size:38px;font-weight:900;color:var(--head);padding:6px 10px;border-radius:16px}
.nw-tr span{overflow-wrap:anywhere}
.nw-ru{font-size:22px;color:var(--muted);margin-top:2px}
.nw-ex{display:flex;gap:12px;align-items:center;text-align:left;border:2px solid var(--line);border-radius:16px;padding:12px 14px;margin-top:8px;line-height:1.4}
.skip{display:block;margin:18px auto 0;background:none;border:0;color:var(--muted);font-weight:800;font-size:14px;padding:10px;text-decoration:underline}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chips button{display:flex;gap:8px;align-items:center;border:2px solid var(--line);border-bottom-width:4px;border-radius:14px;padding:8px 12px;background:var(--bg);font-weight:800;color:var(--head)}
.chips button small{color:var(--muted);font-weight:700}

/* ---------- нижняя панель урока ---------- */
#bar{border-top:2px solid var(--line);padding:14px calc(16px + var(--sar)) calc(14px + var(--sab)) calc(16px + var(--sal));transition:background .2s;flex:none}
#bar.ok{background:var(--green-l);border-color:transparent;animation:barUp .3s}
#bar.bad{background:var(--red-l);border-color:transparent;animation:barUp .3s}
.bar-in{max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
#fb{display:flex;align-items:flex-start;gap:14px;flex:1;min-width:0}
#fb:empty{display:none}
#fb .t{font-size:21px;font-weight:900}
.fbx{min-width:0;flex:1;max-height:38vh;max-height:calc(var(--vvh,100vh) * .38);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;color:var(--text)}
.fbx .b{margin-top:6px;font-size:15px;line-height:1.45;font-weight:700}
.fbx .ln{margin:3px 0}.fbx .ln.good{color:var(--head)}
.fbx .ln.warn{color:var(--warn-t)}
.fbx .ln.hint{color:var(--blue-t);background:rgba(28,176,246,.12);border-radius:10px;padding:6px 10px;margin-top:8px}
.fbx .gl{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}
.fbx b{color:var(--head)}
#bar.ok .t{color:var(--green-t)}#bar.bad .t{color:var(--red-t)}
#fb .badge{width:52px;height:52px;border-radius:50%;background:var(--bg);display:grid;place-items:center;flex:none;animation:pop .4s}
#mainbtn{min-width:160px;align-self:flex-end}
#bar.bad #mainbtn{background:var(--red);border-color:var(--red-d)}
@media(max-width:600px){
  .bar-in{flex-direction:column;align-items:stretch;gap:12px}
  #mainbtn{width:100%;min-width:0;align-self:stretch}
  #fb .badge{width:40px;height:40px}#fb .badge .ic{width:26px;height:26px}
  .q{font-size:22px}
  .nw-tr{font-size:32px}
}

/* ---------- игры ---------- */
.mem{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;perspective:900px}
@media(min-width:520px){.mem{grid-template-columns:repeat(4,1fr)}}
.mc{position:relative;aspect-ratio:3/4;border:0;background:none;padding:0;transform-style:preserve-3d;transition:transform .45s}
.mc.flip{transform:rotateY(180deg)}
.mf{position:absolute;inset:0;border-radius:14px;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;text-align:center;padding:6px;overflow-wrap:anywhere}
.mf.front{background:linear-gradient(135deg,var(--blue),var(--purple));border-bottom:4px solid rgba(0,0,0,.2)}
.mf.back{transform:rotateY(180deg);background:var(--bg);border:2px solid var(--line);border-bottom-width:4px;font-size:clamp(14px,4.2vw,19px);font-weight:900;color:var(--head);align-content:center}
.mf.back.tr{color:var(--blue-t)}.mf.back i{display:block;font-style:normal;font-size:28px}
.mc.hit .mf.back{background:var(--green-l);border-color:var(--green);color:var(--green-t)}
.mc.hit{animation:pop .4s}
.tbar{height:12px;background:var(--line);border-radius:99px;overflow:hidden;margin-bottom:18px}
.tbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--orange),var(--red));border-radius:99px;transition:width .1s linear}
.sp-q{display:flex;align-items:center;justify-content:center;gap:12px;font-size:30px;font-weight:900;color:var(--head);margin:6px 0 20px;text-align:center}
.sp-q span{overflow-wrap:anywhere}
.gb-top{text-align:center;margin-bottom:10px}
.slots{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.slot{width:38px;height:48px;border-bottom:4px solid var(--line);display:grid;place-items:center;font-size:26px;font-weight:900;color:var(--head);background:var(--soft);border-radius:8px 8px 0 0}
.slot.f{border-color:var(--blue)}.slot.ok{border-color:var(--green);color:var(--green-t);animation:pop .3s}.slot.bad{border-color:var(--red);color:var(--red-t);animation:shake .38s}
.gb-act{display:flex;gap:10px;justify-content:center;margin-top:22px}
.fc{position:relative;width:100%;aspect-ratio:4/3;border:0;background:none;padding:0;perspective:900px;transform-style:preserve-3d;transition:transform .5s;display:block}
.fc.flip{transform:rotateY(180deg)}
.fcf{position:absolute;inset:0;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:16px;text-align:center}
.fcf.front{background:var(--bg);border:2px solid var(--line);border-bottom-width:6px}
.fcf.front b{font-size:36px;color:var(--head);overflow-wrap:anywhere}.fcf.front small{color:var(--muted)}
.fcf.back{transform:rotateY(180deg);background:var(--blue);color:#fff;border-bottom:6px solid var(--blue-d)}
.fcf.back>b{font-size:30px;overflow-wrap:anywhere}.fx{font-size:15px;line-height:1.4;opacity:.95}.fx b{color:#fff}
.fc-act{display:flex;justify-content:center;margin-top:18px;gap:12px}.fc-act.two .btn{flex:1}

/* ---------- финал / приветствие ---------- */
.full{position:fixed;left:0;right:0;top:var(--vvt,0px);height:var(--vvh,100vh);background:var(--bg);z-index:60;display:none;flex-direction:column;align-items:center;text-align:center;padding:calc(18px + var(--sat)) calc(18px + var(--sar)) calc(18px + var(--sab)) calc(18px + var(--sal));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.full.on{display:flex;animation:fade .3s}
.fin{margin:auto;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:460px}
.full h1{font-size:28px;font-weight:900;color:var(--gold-d);margin-top:4px;line-height:1.2}
.full h1 small{display:block;font-size:17px;color:var(--muted);margin-top:6px;font-weight:700}
.full.fail h1{color:var(--red)}
.fstats{display:flex;gap:10px;margin:10px 0 4px;flex-wrap:wrap;justify-content:center;width:100%}
.fs{border:2px solid;border-radius:16px;min-width:100px;flex:1;max-width:140px;overflow:hidden;font-weight:900;animation:pop .5s both}
.fs:nth-child(2){animation-delay:.12s}.fs:nth-child(3){animation-delay:.24s}
.fs div:first-child{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:#fff;padding:5px}
.fs div:last-child{padding:12px 6px;font-size:21px;background:var(--bg);display:flex;gap:6px;align-items:center;justify-content:center}
.fs.a{border-color:var(--gold)}.fs.a div:first-child{background:var(--gold)}.fs.a div:last-child{color:var(--gold-d)}
.fs.b{border-color:var(--blue)}.fs.b div:first-child{background:var(--blue)}.fs.b div:last-child{color:var(--blue-t)}
.fs.c{border-color:var(--green)}.fs.c div:first-child{background:var(--green)}.fs.c div:last-child{color:var(--green-t)}
.extra{display:grid;gap:10px;margin:4px 0;width:100%}
.ex-i{display:flex;align-items:center;gap:12px;border:2px solid var(--line);border-radius:16px;padding:10px 14px;text-align:left;animation:slideIn .4s both;color:var(--head)}
.ex-i.col{flex-direction:column;align-items:stretch;gap:6px}
.ex-i .ei{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.ex-i small{display:block;color:var(--muted);font-weight:700}
.ms{font-size:15px;line-height:1.4}.ms span{color:var(--red-t);font-weight:800}.ms small{display:block;color:var(--warn-t);font-size:12px}
.fbtns{display:grid;gap:10px;width:100%;margin-top:8px}
.full input{font:inherit;font-size:20px;font-weight:700;text-align:center;padding:14px;border:2px solid var(--line);border-radius:16px;width:min(320px,90vw);outline:none;background:var(--soft);color:var(--text)}
.full input:focus{border-color:var(--blue-b);background:var(--bg)}
.mascot{animation:hop 2.4s ease-in-out infinite}
.blink{animation:blink 4.2s infinite;transform-box:fill-box;transform-origin:center}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:80}

/* ---------- модалка, тосты, cookie ---------- */
#modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90;display:none;align-items:center;justify-content:center;padding:20px}
#modal.on{display:flex;animation:fade .2s}
.m-box{background:var(--bg);border-radius:20px;padding:22px;max-width:420px;width:100%;animation:pop .3s;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.m-box h3{font-size:21px;font-weight:900;color:var(--head);margin-bottom:8px}
.m-box p{line-height:1.5;margin-bottom:6px}
.m-act{display:flex;gap:10px;margin-top:16px}.m-act .btn{flex:1}
#toasts{position:fixed;left:0;right:0;bottom:calc(92px + var(--sab));display:flex;flex-direction:column;align-items:center;gap:8px;z-index:100;pointer-events:none;padding:0 16px}
.toast{background:#2b2b2b;color:#fff;padding:11px 18px;border-radius:14px;font-weight:800;font-size:14px;animation:slideUp .3s,fade .3s 2.2s reverse forwards;box-shadow:0 6px 20px rgba(0,0,0,.3);max-width:420px;text-align:center}
#cookie{position:fixed;left:16px;bottom:16px;z-index:40;max-width:360px;background:var(--bg);border:2px solid var(--line);border-radius:16px;padding:10px 12px 10px 14px;box-shadow:0 8px 30px var(--shadow);display:none;align-items:center;gap:12px;animation:slideUp .4s}
#cookie.on{display:flex}
#cookie p{font-size:12.5px;line-height:1.35;flex:1}
#cookie .btn{flex:none;min-height:38px;padding:6px 14px}
@media(max-width:999px){#cookie{bottom:calc(74px + var(--sab));left:10px;right:10px;max-width:none}}

/* ---------- анимации ---------- */
@keyframes fade{from{opacity:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}}
@keyframes slideUp{from{opacity:0;transform:translateY(40px)}}
@keyframes slideIn{from{opacity:0;transform:translateX(26px)}}
@keyframes barUp{from{transform:translateY(60px);opacity:.4}}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@keyframes bob{50%{transform:translateX(-50%) translateY(-6px)}}
@keyframes ring{to{transform:rotate(335deg)}}
@keyframes hop{50%{transform:translateY(-8px)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes beat{40%{transform:scale(1.5)}}
@keyframes pulse{50%{transform:scale(1.07)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}