@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700;800&family=Poppins:wght@600;700;800&display=swap');

:root{
  --ink:#2A2440; --muted:#8A8298; --paper:#FFFBF3;
  --pink:#C96E8C; --pink2:#E3AABF;
  --blue:#5D8A99; --blue2:#A9C7CE;
  --green:#7B9B6E; --green2:#B6C9A9;
  --sun:#D9A24C; --sun2:#E8C98D;
  --violet:#8B7A9C; --violet2:#C6B9CE;
  --red:#C15D4C;
  --sh:0 6px 0 rgba(0,0,0,.13); --sh-sm:0 3px 0 rgba(0,0,0,.10);
  --accent:var(--pink); --accent2:var(--pink2);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{
  font-family:'Nunito',system-ui,sans-serif;color:var(--ink);min-height:100vh;
  background:
    radial-gradient(circle at 12% 10%,rgba(201,110,140,.14) 0,transparent 42%),
    radial-gradient(circle at 90% 88%,rgba(123,155,110,.14) 0,transparent 42%),
    linear-gradient(180deg,#FFF8ED 0%,#FDF3E2 100%);
  overflow-x:hidden;position:relative;
}
/* декоративный слой: немного кружочков и звёздочек, лаконично */
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.6;
  background-repeat:no-repeat;
  background-size:14px 14px, 10px 10px, 30px 30px, 12px 12px, 24px 24px;
  background-position:6% 12%, 92% 9%, 90% 78%, 10% 88%, 4% 45%;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%23C96E8C'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%237B9B6E'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M15 2l3.5 8 8.5 1-6.5 6 2 8.5-7.5-4.5-7.5 4.5 2-8.5-6.5-6 8.5-1z' fill='%23D9A24C'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%238B7A9C'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.5 7 1-5 5 1.5 7-6.5-3.5-6.5 3.5 1.5-7-5-5 7-1z' fill='%23C96E8C'/%3E%3C/svg%3E");
  animation:driftbg 30s ease-in-out infinite alternate;
}
@keyframes driftbg{
  to{background-position:7% 14%, 90% 11%, 88% 76%, 12% 86%, 5% 47%}
}
.map,.top,.steps,.wrap,.fin{position:relative;z-index:1}
h1,h2,h3,.dis{font-family:'Baloo 2',cursive}

/* ===== ШАПКА ===== */
.top{max-width:1000px;margin:0 auto;padding:16px 16px 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btn-back{border:none;background:#fff;border-radius:14px;padding:10px 14px;font-weight:800;cursor:pointer;
  box-shadow:var(--sh-sm);font-size:15px;color:var(--ink)}
.btn-back:active{transform:translateY(2px)}
.lesson-name{font-family:'Baloo 2';font-weight:700;font-size:clamp(19px,4vw,27px);flex:1;line-height:1.1}
.lesson-name small{display:block;font-family:'Nunito';font-size:13px;color:var(--muted);font-weight:700}
.timer{background:#fff;border-radius:14px;padding:8px 14px;font-weight:800;box-shadow:var(--sh-sm);font-size:15px}

/* прогресс шагов */
.steps{max-width:1000px;margin:12px auto 0;padding:0 16px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.stp{height:9px;flex:1;min-width:26px;max-width:70px;border-radius:6px;background:#E8E1D2;transition:.3s}
.stp.now{background:var(--accent)}
.stp.ok{background:var(--green)}

/* ===== КАРТА УРОКА ===== */
.map{max-width:1000px;margin:0 auto;padding:22px 16px 60px;text-align:center}
.map h1{font-size:clamp(30px,7vw,54px);line-height:1.05;margin-bottom:4px;font-family:'Poppins';font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--ink),var(--pink));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.map .sub{color:var(--muted);font-weight:800;font-size:clamp(14px,3vw,18px);margin-bottom:6px}
.fam-row{display:flex;justify-content:center;gap:6px;margin:10px 0 18px;flex-wrap:wrap}
.fam-row .ch{height:150px;width:auto}
.stagelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:8px;text-align:left}
.scard{border:none;border-radius:24px;padding:18px 16px 16px;cursor:pointer;color:#fff;
  box-shadow:0 7px 0 rgba(0,0,0,.16), 0 12px 22px rgba(0,0,0,.10);
  position:relative;transition:transform .14s, box-shadow .14s;font-family:'Baloo 2';overflow:hidden;
  border-top:3px solid rgba(255,255,255,.55)}
.scard:before{content:"";position:absolute;top:-30px;right:-20px;width:90px;height:90px;border-radius:50%;
  background:rgba(255,255,255,.18)}
.scard:after{content:"";position:absolute;bottom:-26px;left:-16px;width:66px;height:66px;border-radius:50%;
  background:rgba(255,255,255,.12)}
.scard:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 10px 0 rgba(0,0,0,.16),0 16px 26px rgba(0,0,0,.13)}
.scard:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(0,0,0,.16)}
.scard .n{font-family:'Nunito';font-size:13px;font-weight:800;opacity:.95;letter-spacing:.08em;text-transform:uppercase;
  position:relative;z-index:2}
.scard .t{font-size:23px;font-weight:700;line-height:1.1;margin-top:3px;position:relative;z-index:2;
  text-shadow:0 2px 0 rgba(0,0,0,.12)}
.scard .ic{position:absolute;top:10px;right:12px;font-size:30px;z-index:2;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}
.scard .done-tick{position:absolute;bottom:10px;right:12px;font-size:19px;opacity:0;z-index:2}
.scard.done .done-tick{opacity:1}

/* ===== ЭКРАН ЗАДАНИЯ ===== */
.wrap{max-width:1000px;margin:14px auto 0;padding:0 16px 70px}
.card{background:var(--paper);border-radius:28px;box-shadow:0 10px 0 rgba(0,0,0,.06), 0 16px 36px rgba(0,0,0,.10);
  padding:24px 22px 26px;border:4px solid #fff;position:relative}
.card:before{content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;
  background:linear-gradient(180deg,var(--accent2) 0,transparent 16%);opacity:.22}
.card-h{display:flex;align-items:baseline;gap:10px;margin-bottom:3px;padding-right:80px;position:relative;z-index:1}
.card-h .badge{font-family:'Baloo 2';font-weight:700;font-size:14px;color:#fff;background:var(--accent);
  border-radius:12px;padding:3px 12px;box-shadow:0 3px 0 rgba(0,0,0,.14)}
.card-h h2{font-family:'Baloo 2';font-size:clamp(23px,5.4vw,34px);font-weight:700}
.tip{color:var(--muted);font-weight:700;font-size:18px;margin:2px 0 16px;position:relative;z-index:1}
#stBody{position:relative;z-index:1}

/* помощник Pear (настоящие иллюстрации, не нарисовано кодом) */
.buddy{position:absolute;top:-46px;right:12px;width:74px;height:90px;z-index:6}
.buddy-pose{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;object-position:bottom;
  opacity:0;transition:opacity .12s}
.buddy.idle .pose-idle,.buddy.happy .pose-happy,.buddy.sad .pose-sad{opacity:1}
.buddy.idle{animation:flo 3s ease-in-out infinite}
@keyframes flo{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-3deg)}}
.buddy.happy{animation:hap .6s ease}
@keyframes hap{0%{transform:scale(1)}30%{transform:scale(1.2) rotate(6deg)}60%{transform:scale(1.1) rotate(-6deg)}100%{transform:scale(1)}}
.buddy.sad{animation:sd .6s ease}
@keyframes sd{0%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(6px) rotate(-9deg)}
  50%{transform:translateY(8px) rotate(8deg)}80%{transform:translateY(6px) rotate(-6deg)}}
@media(max-width:560px){.buddy{width:58px;height:70px;top:-36px;right:8px}.card-h{padding-right:60px}}

/* ===== ПЕРСОНАЖИ ===== */
.ch{display:block;height:200px;width:auto}
.people{display:flex;justify-content:center;gap:clamp(6px,2vw,26px);flex-wrap:wrap;align-items:flex-end}
.person{background:none;border:none;cursor:pointer;padding:6px;border-radius:20px;transition:.15s;text-align:center}
.person:hover{background:#fff8;transform:translateY(-4px)}
.person .nm{font-family:'Baloo 2';font-weight:700;font-size:21px;margin-top:4px}
.person.sel{background:#fff;box-shadow:var(--sh-sm)}
.person.ok{background:#E6F6E4;box-shadow:var(--sh-sm)}
.speech{max-width:520px;margin:16px auto 0;background:#fff;border:3px solid var(--accent);border-radius:20px;
  padding:14px 18px;font-size:clamp(16px,3.6vw,21px);font-weight:800;text-align:center;position:relative}
.speech:after{content:"";position:absolute;top:-13px;left:50%;margin-left:-10px;border:10px solid transparent;border-bottom-color:var(--accent)}
.speech .ru{display:block;font-size:14px;color:var(--muted);font-weight:700;margin-top:5px}
.say-it{border:none;background:var(--accent);color:#fff;border-radius:14px;padding:9px 18px;font-family:'Baloo 2';
  font-weight:700;font-size:16px;cursor:pointer;margin-top:10px;box-shadow:var(--sh-sm)}
.say-it:active{transform:translateY(2px)}

/* ===== КАРТОЧКИ СЛОВ ===== */
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:13px}
.wcard{height:150px;background:none;border:none;padding:0;cursor:pointer;position:relative;border-radius:18px}
.wcard-in{position:relative;width:100%;height:100%}
.wface{position:absolute;inset:0;border-radius:18px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;box-shadow:var(--sh-sm);padding:8px;
  transition:opacity .2s ease, transform .2s ease}
.wfront{background:linear-gradient(160deg,var(--accent),var(--accent2));color:#fff;opacity:1;transform:scale(1);z-index:2}
.wfront .e{font-size:46px}
.wfront .w{font-family:'Baloo 2';font-weight:700;font-size:25px;text-align:center;line-height:1.05}
.wback{background:#fff;border:3px solid var(--accent);color:var(--ink);opacity:0;transform:scale(.92);z-index:1;pointer-events:none}
.wback .r{font-weight:800;font-size:21px}
.wcard.flip .wfront{opacity:0;transform:scale(.92);z-index:1;pointer-events:none}
.wcard.flip .wback{opacity:1;transform:scale(1);z-index:2;pointer-events:auto}
.wsay{border:none;background:#fff;color:var(--accent);border-radius:11px;padding:6px;font-weight:800;font-size:13px;
  cursor:pointer;box-shadow:var(--sh-sm);margin-top:6px;width:100%}

/* ===== СОРТИРОВКА В 2 КОЛОНКИ ===== */
.sortq{background:#fff;border:3px dashed var(--accent);border-radius:18px;padding:18px 14px;text-align:center;
  font-family:'Baloo 2';font-weight:700;font-size:clamp(19px,4.5vw,27px);margin-bottom:14px}
.sortq .hint2{font-family:'Nunito';display:block;font-size:13px;color:var(--muted);font-weight:700;margin-top:4px}
.bins2{display:flex;gap:13px;flex-wrap:wrap}
.bin2{flex:1;min-width:150px;min-height:130px;border-radius:20px;padding:12px;border:3px dashed #ccc;background:#fff9;transition:.15s}
.bin2.b-look{border-color:var(--blue)}
.bin2.b-like{border-color:var(--violet)}
.bin2.over{background:#fff;border-style:solid;transform:scale(1.02)}
.bin2 .bh{font-family:'Baloo 2';font-weight:700;font-size:21px;text-align:center;margin-bottom:8px;line-height:1.1}
.bin2.b-look .bh{color:var(--blue)} .bin2.b-like .bh{color:var(--violet)}
.bin2 .bh small{display:block;font-family:'Nunito';font-size:14px;color:var(--muted);font-weight:700}
.drops{display:flex;flex-direction:column;gap:7px}
.dchips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:16px;min-height:52px}
.dchip{background:linear-gradient(160deg,var(--sun),var(--sun2));color:#4a3608;border-radius:14px;padding:13px 17px;
  font-weight:800;font-size:20px;cursor:grab;box-shadow:var(--sh-sm);user-select:none;touch-action:none;font-family:'Nunito'}
.dchip.drag{opacity:.55;transform:scale(1.08)}
.dchip.set{cursor:default;font-size:14px;padding:8px 12px}

/* ===== ИГРА В ПРЯТКИ (сцена) ===== */
.scene-wrap{position:relative;border-radius:22px;overflow:hidden;border:4px solid #fff;box-shadow:var(--sh);
  background:#FCEFD8;touch-action:none}
.scene{position:relative;width:100%;aspect-ratio:16/10;min-height:260px}
.scene svg.bg{position:absolute;inset:0;width:100%;height:100%}
.movable{position:absolute;width:11.5%;min-width:52px;cursor:grab;transition:filter .15s;z-index:3;touch-action:none}
.movable .ch{height:auto;width:100%}
.movable.drag{cursor:grabbing;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3));z-index:9}
.zone-hint{position:absolute;border:3px dashed var(--green);border-radius:14px;opacity:0;transition:.2s;pointer-events:none;z-index:2}
.zone-hint.show{opacity:1;animation:zpulse 1.2s ease-in-out infinite}
@keyframes zpulse{0%,100%{opacity:.5}50%{opacity:1}}
.task-bar{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin:14px 0 6px;
  background:#fff;border-radius:18px;padding:12px 16px;box-shadow:var(--sh-sm)}
.task-bar .txt{font-family:'Baloo 2';font-weight:700;font-size:clamp(20px,4.6vw,28px)}
.prep-opts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.prep{border:3px solid var(--green);background:#fff;border-radius:15px;padding:13px 18px;font-weight:800;font-size:20px;
  cursor:pointer;font-family:'Nunito';transition:.12s}
.prep:hover{background:var(--green);color:#fff}
.prep.ok{background:var(--green);border-color:var(--green);color:#fff}
.prep.no{background:var(--red);border-color:var(--red);color:#fff;animation:shk .4s}
@keyframes shk{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

/* ===== ВИКТОРИНА / ВАРИАНТЫ ===== */
.qbox{background:#fff;border:3px dashed var(--accent);border-radius:20px;padding:22px 16px;text-align:center;
  font-family:'Baloo 2';font-weight:700;font-size:clamp(20px,5vw,30px);margin-bottom:14px}
.qbox .who{height:130px;margin-bottom:6px}
.opts{display:flex;flex-direction:column;gap:11px}
.opt{border:3px solid #E4DDCC;background:#fff;border-radius:16px;padding:18px;font-weight:800;font-size:22px;
  cursor:pointer;text-align:center;transition:.12s}
.opt:hover{border-color:var(--accent)}
.opt.ok{background:var(--green);border-color:var(--green);color:#fff;animation:pop .3s}
.opt.no{background:var(--red);border-color:var(--red);color:#fff;animation:shk .4s}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
.count{text-align:center;color:var(--muted);font-weight:800;margin-top:14px;font-size:17px}

/* ===== СОБЕРИ ПРЕДЛОЖЕНИЕ ===== */
.build-line{min-height:62px;background:#fff;border:3px solid var(--accent);border-radius:16px;display:flex;
  flex-wrap:wrap;gap:7px;align-items:center;padding:11px;margin-bottom:14px}
.bw{background:var(--accent);color:#fff;border-radius:11px;padding:10px 14px;font-weight:800;font-size:20px;cursor:pointer}
.pool{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.pw{background:#fff;border:3px solid var(--accent);color:var(--ink);border-radius:11px;padding:11px 15px;
  font-weight:800;font-size:20px;cursor:pointer;box-shadow:var(--sh-sm)}
.pw:active{transform:translateY(2px)}
.pw.used{opacity:.25;pointer-events:none}

/* ===== ГОВОРЕНИЕ ===== */
.saylist{display:flex;flex-direction:column;gap:12px}
.sayrow{background:#fff;border-radius:16px;padding:15px 17px;font-size:clamp(17px,4vw,22px);font-weight:800;
  border-left:8px solid var(--accent);display:flex;align-items:center;gap:12px;cursor:pointer;transition:.12s}
.sayrow:hover{transform:translateX(4px)}
.sayrow.said{background:#EAF7E8;border-color:var(--green)}
.sayrow .mic{font-size:23px}
.sayrow .rep{margin-left:auto;border:none;background:var(--accent);color:#fff;border-radius:11px;width:44px;height:44px;
  font-size:19px;cursor:pointer;flex-shrink:0}

/* ===== РАЗМИНКА: ЛОВИ СЛОВО ===== */
.catch-area{position:relative;height:300px;background:linear-gradient(180deg,#E8F4FF,#FFF6E0);border-radius:20px;
  overflow:hidden;border:3px solid #fff;box-shadow:var(--sh-sm)}
.falling{position:absolute;padding:11px 17px;border-radius:14px;font-weight:800;font-size:21px;cursor:pointer;
  background:#fff;box-shadow:var(--sh-sm);white-space:nowrap;user-select:none}
.falling.good{border:3px solid var(--green)}
.falling.bad{border:3px solid #ddd}
.catch-hud{display:flex;justify-content:space-between;font-weight:800;margin-bottom:8px;font-size:19px}

/* ===== ПРИМЕР (example) ===== */
.eg{background:#FFF8E3;border:3px dashed var(--sun);border-radius:16px;padding:12px 16px;margin-bottom:14px;
  font-weight:800;font-size:18px;text-align:center;color:#6B5320}
.eg b{color:var(--accent)}
.eg .lbl{display:block;font-family:'Baloo 2';font-size:15px;color:var(--sun);margin-bottom:3px;letter-spacing:.04em}


/* ===== ВЕРХНЯЯ ПАНЕЛЬ (только профиль — P2P-сессии по коду убраны) ===== */
.top-mini-bar{position:fixed;top:0;left:0;right:0;height:34px;z-index:60;background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:flex-end;padding:0 8px}
.profile-btn{border:none;background:rgba(0,0,0,.06);color:var(--ink);border-radius:20px;
  padding:5px 12px 5px 5px;display:flex;align-items:center;gap:6px;cursor:pointer;
  font-family:'Nunito';font-weight:800;font-size:12.5px;transition:.14s}
.profile-btn:hover{background:rgba(0,0,0,.12)}
.profile-btn .pf-av{width:22px;height:22px;border-radius:50%;background:var(--pink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0}
.profile-btn .pf-name{max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body{padding-top:34px}

.sync-ov{position:fixed;inset:0;z-index:90;background:rgba(40,30,55,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:18px}
.sync-card{background:var(--paper);border-radius:26px;padding:30px 26px;max-width:430px;width:100%;text-align:center;
  box-shadow:0 18px 44px rgba(0,0,0,.28);border:4px solid #fff}
.sync-card h2{font-family:'Baloo 2';font-size:27px;margin-bottom:6px}
.sync-card p{color:var(--muted);font-weight:700;font-size:15px;margin-bottom:14px}
.sc-star{font-size:54px;margin-bottom:4px}
.sc-star.spin{animation:spin 1.6s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.sc-row{display:flex;gap:10px;flex-direction:column;margin-bottom:10px}
.sc-input{width:100%;border:3px solid var(--blue);border-radius:15px;padding:13px;font-family:'Nunito';
  font-weight:800;font-size:19px;text-align:center;outline:none;margin-bottom:11px;color:var(--ink)}
.sc-input.code{font-family:'Baloo 2';font-size:32px;letter-spacing:.22em;text-transform:uppercase;border-color:var(--sun)}
.sc-code{font-family:'Baloo 2';font-size:52px;letter-spacing:.16em;color:var(--pink);background:#fff;
  border:4px dashed var(--pink);border-radius:18px;padding:10px 6px;margin:8px 0 12px}
.sc-wait{color:var(--sun);font-weight:800;font-size:15px;margin:10px 0}
.mini2{border:none;background:none;color:var(--muted);font-family:'Nunito';font-weight:800;font-size:14px;
  cursor:pointer;text-decoration:underline;margin-top:10px}

/* ===== КНОПКИ ===== */
.foot{display:flex;gap:12px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.btn{border:none;border-radius:17px;padding:15px 30px;font-family:'Baloo 2';font-weight:700;font-size:19px;
  cursor:pointer;box-shadow:var(--sh)}
.btn:active{transform:translateY(3px);box-shadow:var(--sh-sm)}
.btn-go{background:var(--accent);color:#fff}
.btn-gh{background:#fff;color:var(--ink)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.lock{max-width:1000px;margin:12px auto 0;text-align:center;font-weight:800;font-size:17px;color:#B8860B;
  background:#FFF6E0;border-radius:14px;padding:9px 16px}
.lock.open{color:var(--green);background:#EAF7E8}

/* ===== ФИНАЛ ===== */
.fin{max-width:600px;margin:30px auto;text-align:center;background:var(--paper);border-radius:28px;
  padding:36px 26px;box-shadow:0 14px 36px rgba(0,0,0,.1)}
.fin .big{font-size:74px;animation:bnc 1s infinite alternate}
@keyframes bnc{to{transform:translateY(-11px)}}
.fin h2{font-family:'Baloo 2';font-size:32px;color:var(--accent);margin:6px 0}
.fin p{color:var(--muted);font-weight:700;font-size:16px}
.rstars{display:flex;gap:6px;justify-content:center;margin:12px 0}
.rst{border:none;background:none;font-size:44px;cursor:pointer;color:#DED8C8;transition:.12s}
.rst.on{color:#F5B301}
.rst:hover{transform:scale(1.15)}

/* toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--green);
  color:#fff;font-family:'Baloo 2';font-weight:700;font-size:20px;padding:13px 26px;border-radius:18px;
  box-shadow:0 8px 22px rgba(0,0,0,.2);transition:transform .35s;z-index:99}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.bad{background:var(--red)}
.conf{position:fixed;top:-20px;width:11px;height:11px;z-index:98;pointer-events:none}

@media(min-width:900px){
  .card{padding:30px 32px 32px}
  .card-h h2{font-size:30px}
  .tip{font-size:17px}
  .ch{height:230px}
  .wgrid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:17px}
  .wcard{height:180px}
  .wfront .e{font-size:58px} .wfront .w{font-size:25px}
  .opt{font-size:20px;padding:18px}
  .dchip{font-size:19px;padding:13px 18px}
  .bin2{min-height:160px}
  .prep{font-size:19px;padding:13px 19px}
  .btn{font-size:21px;padding:16px 34px}
  .buddy{width:96px;height:96px;top:-38px}
}

/* ================= МОИ УЧЕНИКИ ================= */
.students-list{max-width:640px;margin:20px auto 0;display:flex;flex-direction:column;gap:12px}
.student-row{background:#fff;border-radius:16px;padding:14px 16px;display:flex;align-items:center;gap:12px;
  box-shadow:0 3px 10px rgba(0,0,0,.06)}
.student-av{width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-family:'Baloo 2';font-weight:700;font-size:18px}
.student-info{flex:1;text-align:left;min-width:0}
.student-name{font-family:'Baloo 2';font-weight:700;font-size:16px;color:var(--ink)}
.student-sub{font-family:'Nunito';font-weight:700;font-size:12.5px;color:var(--muted)}
.student-actions{display:flex;gap:8px;flex-shrink:0}
.mini3{font-size:12.5px!important;padding:8px 12px!important}

/* ================= ДОСКА ================= */
.board-page{position:fixed;inset:0;display:flex;flex-direction:column;background:#fff;z-index:70}
.board-top{display:flex;align-items:center;gap:12px;padding:10px 14px;box-shadow:0 2px 8px rgba(0,0,0,.08);flex-shrink:0}
.board-title{font-family:'Baloo 2';font-weight:700;font-size:16px;flex:1}
.board-peer{font-family:'Nunito';font-weight:800;font-size:12px;color:var(--muted)}
.board-wrap2{flex:1;position:relative;overflow:hidden;background:#F3F1EA;cursor:default}
.board-wrap2.board-locked{pointer-events:none;user-select:none}
.toolbar2.board-locked{pointer-events:none;user-select:none;opacity:.5}
.board-world{position:absolute;top:0;left:0;width:3000px;height:2000px;background:#fff;
  box-shadow:0 0 0 2px #eee, 0 8px 30px rgba(0,0,0,.06);transform-origin:0 0}
.zoom-label{font-family:'Nunito';font-weight:800;font-size:12px;color:var(--muted);flex-shrink:0;min-width:38px;text-align:center}
.board-world canvas{position:absolute;top:0;left:0;width:3000px;height:2000px;cursor:crosshair;touch-action:none}
#boardCvPreview{pointer-events:none}
.toolbar2{display:flex;align-items:center;gap:8px;padding:10px 12px;box-shadow:0 -2px 8px rgba(0,0,0,.08);
  flex-shrink:0;overflow-x:auto}
.tool2{flex-shrink:0;border:none;background:#F6F3EA;border-radius:12px;width:42px;height:42px;font-size:18px;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.tool2.on{background:var(--pink);color:#fff}
.sep2{width:1px;height:26px;background:#eee;flex-shrink:0}
.sw2{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #ddd;cursor:pointer}
.sw2.on{box-shadow:0 0 0 2px var(--ink)}
.brush2{flex-shrink:0;width:70px}
.el-item2{position:absolute;cursor:move;user-select:none}
.el-text2{min-width:50px;min-height:24px;padding:4px 7px;font-family:'Nunito';font-weight:700;font-size:16px;
  border:2px dashed transparent;border-radius:6px;outline:none;white-space:pre-wrap}
.el-text2:focus{border-color:var(--sun);background:#FFFDF0}
.el-img2{border:2px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.15);border-radius:6px}
.el-img2 img{width:100%;height:100%;display:block;pointer-events:none;border-radius:4px}
.el-video2{border:2px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.15);border-radius:6px;background:#000}
.el-video2 iframe,.el-video2 video{width:100%;height:100%;display:block;border:none;border-radius:4px}
.el-table2{background:#fff;border:2px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.15);border-radius:6px;padding-top:22px}
.el-table2 table{border-collapse:collapse}
.el-table2 td{border:1px solid #ddd;padding:6px 10px;min-width:60px;min-height:20px;font-family:'Nunito';
  font-size:14px;outline:none}
.el-table2 td:focus{background:#FFF9E5}
.el-drag2{position:absolute;top:0;left:0;right:0;height:20px;background:rgba(0,0,0,.55);color:#fff;
  font-size:10px;font-family:'Nunito';font-weight:800;display:flex;align-items:center;justify-content:center;
  cursor:move;border-radius:6px 6px 0 0;letter-spacing:.05em}
.el-item2.el-dragging iframe,.el-item2.el-dragging video{pointer-events:none}
.el-handle2{position:absolute;right:-7px;bottom:-7px;width:15px;height:15px;background:var(--pink);
  border:2px solid #fff;border-radius:50%;cursor:nwse-resize}
.el-del2{position:absolute;top:-10px;right:-10px;width:20px;height:20px;background:#E15C4E;color:#fff;
  border:2px solid #fff;border-radius:50%;font-size:12px;line-height:16px;text-align:center;cursor:pointer}
.peer-cursor2{position:absolute;z-index:20;pointer-events:none;transition:left .08s linear,top .08s linear}

/* ================= СОВМЕСТНЫЙ РЕЖИМ ================= */
.study-wait{max-width:420px;margin:40px auto;background:#fff;border-radius:20px;padding:32px;text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.08)}
.study-av{font-size:48px;margin-bottom:10px}
.study-msg{font-family:'Nunito';font-weight:800;font-size:16px;color:var(--ink)}
.study-hint{font-family:'Nunito';font-weight:700;font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.5}
.pair-bar{position:fixed;bottom:0;left:0;right:0;z-index:80;background:linear-gradient(90deg,var(--pink),var(--blue));
  color:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;padding:10px 14px;
  font-family:'Nunito';font-weight:800;font-size:13.5px;box-shadow:0 -2px 10px rgba(0,0,0,.2)}
.pair-hint-toggle{display:flex;align-items:center;gap:5px;cursor:pointer}
.pair-switch{border:none;background:rgba(255,255,255,.25);color:#fff;border-radius:10px;padding:6px 12px;
  font-family:'Nunito';font-weight:800;font-size:12.5px;cursor:pointer}
.pair-lock{border:none;background:rgba(255,255,255,.25);color:#fff;border-radius:10px;padding:6px 12px;
  font-family:'Nunito';font-weight:800;font-size:12.5px;cursor:pointer}
.pair-leave{border:2px solid #fff;background:rgba(0,0,0,.15);color:#fff;border-radius:10px;padding:6px 14px;
  font-family:'Nunito';font-weight:800;font-size:12.5px;cursor:pointer}
.pair-modal{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;padding:20px}
.pair-modal-card{background:#fff;border-radius:20px;padding:24px;max-width:600px;width:100%;max-height:80vh;overflow:auto}
.pair-modal-card h3{font-family:'Baloo 2';margin-bottom:14px}
.peer-cursor3{position:fixed;z-index:79;pointer-events:none;transition:left .07s linear,top .07s linear}
.peer-cursor3 .pc-name3{position:absolute;left:20px;top:14px;background:var(--pink);color:#fff;font-family:'Nunito';
  font-weight:800;font-size:11px;padding:2px 8px;border-radius:8px;white-space:nowrap}
.pair-feedback{position:absolute;left:18px;top:-6px;font-size:20px;animation:pfPop .9s ease forwards;pointer-events:none}
@keyframes pfPop{0%{transform:translateY(0) scale(0.6);opacity:0}20%{transform:translateY(-6px) scale(1.15);opacity:1}
  75%{transform:translateY(-18px) scale(1);opacity:1}100%{transform:translateY(-26px) scale(.9);opacity:0}}
body.hints-off .eg{display:none!important}
.wrap.pair-locked{pointer-events:none;user-select:none}
/* сглаживаем скачки позиции падающих слов/карточек ТОЛЬКО в зеркале учителя —
   у самого ученика transition не добавляется, чтобы перетаскивание оставалось
   мгновенным и отзывчивым для него самого */
.pair-mirror .falling, .pair-mirror .dchip{transition:left .08s linear, top .08s linear}
.self-cursor-star{position:fixed;z-index:200;pointer-events:none;transform:translate(-6px,-6px)}
body.hide-native-cursor, body.hide-native-cursor *{cursor:none!important}

/* ================= ТЕЛЕФОН ================= */
@media (max-width:640px){
  body{padding-top:30px}
  .top-mini-bar{height:30px}
  .profile-btn{padding:4px 9px 4px 4px;font-size:11px}
  .profile-btn .pf-name{max-width:50px}
  .profile-btn .pf-av{width:19px;height:19px;font-size:10px}
  .top{padding:10px 12px 0;gap:8px}
  .btn-back{font-size:13px;padding:8px 11px}
  .lesson-name{font-size:19px}
  .lesson-name small{font-size:11px}
  .steps{gap:4px;padding:0 12px}
  .stp{height:7px;min-width:16px}
  .wrap{padding:0 10px 90px;margin-top:10px}
  .card{padding:16px 13px 20px;border-radius:20px;border-width:3px}
  .card-h{padding-right:76px}
  .card-h h2{font-size:20px}
  .card-h .badge{font-size:12px;padding:2px 9px}
  .tip{font-size:14px;margin-bottom:12px;padding-right:66px}
  #gpBody{padding-top:16px}
  .buddy{width:72px;height:88px;top:-32px;right:8px}
  .map{padding:14px 12px 50px}
  .map h1{font-size:30px}
  .map .sub{font-size:13px}
  .fam-row .ch{height:104px}
  .stagelist{grid-template-columns:1fr 1fr !important;gap:9px}
  .scard{padding:12px 10px 11px;border-radius:17px}
  .scard .t{font-size:15px}
  .scard .n{font-size:10px}
  .scard .ic{font-size:20px;top:7px;right:8px}
  .ch{height:130px}
  .people{gap:2px}
  .person{padding:3px}
  .person .nm{font-size:14px}
  .wgrid{grid-template-columns:1fr 1fr !important;gap:9px}
  .wcard{height:118px}
  .wfront .e{font-size:34px}
  .wfront .w{font-size:17px}
  .wback .r{font-size:16px}
  .qbox{font-size:19px;padding:15px 10px}
  .opt{font-size:17px;padding:14px}
  .eg{font-size:14px;padding:9px 11px}
  .eg .lbl{font-size:12px}
  .sortq{font-size:17px;padding:13px 10px}
  .sortq .hint2{font-size:11.5px}
  .bins2{flex-direction:column;gap:9px}
  .bin2{min-height:84px;min-width:0}
  .bin2 .bh{font-size:16px}
  .dchip{font-size:15px;padding:9px 12px}
  .dchips{gap:6px;margin-bottom:12px}
  .scene{aspect-ratio:4/3;min-height:230px}
  .movable{width:15%;min-width:44px}
  .task-bar{padding:9px 11px;gap:7px}
  .task-bar .txt{font-size:17px}
  .pw,.bw{font-size:15px;padding:8px 10px}
  .build-line{min-height:50px;padding:8px}
  .sayrow{font-size:16px;padding:12px 13px}
  .sayrow .rep{width:38px;height:38px;font-size:16px}
  .foot{gap:8px;margin-top:14px}
  .btn{font-size:16px;padding:12px 20px;border-radius:14px}
  .lock{font-size:13px;padding:8px 12px}
  .catch-area{height:250px}
  .falling{font-size:17px;padding:8px 12px}
  .catch-hud{font-size:15px}
  .sync-card{padding:22px 18px;border-radius:20px}
  .sync-card h2{font-size:22px}
  .sc-code{font-size:38px}
  .sc-star{font-size:42px}
  .fin{padding:26px 18px;margin:18px auto}
  .fin h2{font-size:25px}
  .rst{font-size:34px}
}
@media (max-width:380px){
  .map h1{font-size:25px}
  .ch{height:112px}
  .scard .t{font-size:14px}
}
@media (max-height:520px) and (orientation:landscape){
  .fam-row .ch{height:88px}
  .ch{height:120px}
  .catch-area{height:200px}
  .scene{aspect-ratio:16/9;min-height:190px}
}
/* ================= БОЛЬШОЙ ЭКРАН ================= */
@media (min-width:1100px){
  .wrap,.top,.steps{max-width:1080px}
  .card{padding:32px 36px 34px}
  .card-h h2{font-size:33px}
  .tip{font-size:19px}
  .ch{height:250px}
  .qbox{font-size:32px;padding:26px 18px}
  .opt{font-size:23px;padding:20px}
  .wgrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
  .wcard{height:195px}
  .wfront .e{font-size:62px} .wfront .w{font-size:27px}
  .dchip{font-size:21px;padding:14px 19px}
  .bin2{min-height:180px}
  .btn{font-size:22px;padding:17px 38px}
  .eg{font-size:20px;padding:14px 18px}
  .scene{aspect-ratio:16/9}
  .movable{width:10%}
}


/* ===== САЙТ: ГЛАВНАЯ И БИБЛИОТЕКА ===== */
.site-back{position:absolute;top:14px;left:14px}
.site-home{padding-top:20px}
.site-logo{font-family:'Poppins';font-weight:800;font-size:clamp(32px,7vw,54px);margin-bottom:4px;
  letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--ink),var(--pink));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.site-logo.small{font-size:26px;-webkit-text-fill-color:var(--ink);background:none;display:flex;
  align-items:center;gap:10px;justify-content:center;margin-top:36px}
.pear-welcome{max-width:560px;margin:18px auto 8px;background:linear-gradient(135deg,#fff,#FBF0E9);
  border-radius:22px;padding:16px 20px;display:flex;align-items:center;gap:16px;text-align:left;
  box-shadow:0 6px 20px rgba(0,0,0,.06)}
.pear-welcome-img{height:92px;width:auto;flex-shrink:0;filter:drop-shadow(0 3px 5px rgba(0,0,0,.15))}
.pear-welcome-text h2{font-family:'Baloo 2';font-size:19px;font-weight:700;margin-bottom:3px}
.pear-welcome-text p{font-family:'Nunito';font-weight:700;font-size:13.5px;color:var(--muted);line-height:1.45}
@media(max-width:480px){.pear-welcome{padding:12px 16px;gap:12px}.pear-welcome-img{height:70px}
  .pear-welcome-text h2{font-size:16px}.pear-welcome-text p{font-size:12.5px}}
.age-pill{font-family:'Nunito';font-size:14px;font-weight:800;background:#fff;color:var(--ink);
  border-radius:12px;padding:3px 12px;box-shadow:var(--sh-sm)}
.agegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:20px;
  max-width:760px;margin-left:auto;margin-right:auto}
.agecard{border:none;border-radius:22px;padding:24px 16px;cursor:pointer;color:#fff;font-family:'Baloo 2';
  box-shadow:0 7px 0 rgba(0,0,0,.15),0 12px 22px rgba(0,0,0,.1);transition:transform .14s;text-align:center;
  border-top:3px solid rgba(255,255,255,.55)}
.agecard:hover{transform:translateY(-4px) rotate(-.6deg)}
.agecard:active{transform:translateY(3px)}
.ac-em{font-size:44px;display:block;margin-bottom:6px}
.ac-label{font-size:26px;font-weight:700}
.ac-title{font-family:'Nunito';font-size:14px;font-weight:800;opacity:.95;margin-top:2px}
.ac-count{font-family:'Nunito';font-size:12px;font-weight:700;opacity:.85;margin-top:6px}
.lessongrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:24px;
  max-width:760px;margin-left:auto;margin-right:auto}
.lessoncard{border:none;border-radius:22px;padding:22px 18px;cursor:pointer;color:#fff;font-family:'Baloo 2';
  box-shadow:0 7px 0 rgba(0,0,0,.15),0 12px 22px rgba(0,0,0,.1);transition:transform .14s;text-align:left;
  border-top:3px solid rgba(255,255,255,.55)}
.lessoncard:hover{transform:translateY(-4px)}
.lc-em{font-size:38px}
.lc-title{font-size:20px;font-weight:700;margin-top:6px}
.lc-sub{font-family:'Nunito';font-size:13px;font-weight:700;opacity:.9;margin-top:3px}
.soon-card{grid-column:1/-1;background:#fff;border:3px dashed var(--muted);border-radius:20px;
  padding:34px 20px;font-family:'Baloo 2';font-size:20px;color:var(--muted);max-width:760px;margin:0 auto}
@media(max-width:640px){
  .agegrid,.lessongrid,.tplgrid{grid-template-columns:1fr 1fr;gap:11px}
  .tplcard{padding:16px 10px}
  .tplcard .tp-em{font-size:30px}
  .tplcard .tp-name{font-size:15px}
  .ac-em{font-size:34px} .ac-label{font-size:21px}
  .lc-em{font-size:30px} .lc-title{font-size:17px}
  .site-logo{font-size:26px}
  .site-back{position:static;display:inline-block;margin-bottom:10px}
}


/* ===== ВЕРХНЯЯ НАВИГАЦИЯ ПО САЙТУ ===== */
.site-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px 0 18px}
.site-tab{border:none;background:#fff;color:var(--muted);font-family:'Baloo 2';font-weight:700;font-size:15px;
  padding:9px 18px;border-radius:14px;cursor:pointer;box-shadow:var(--sh-sm);transition:.14s}
.site-tab:hover{color:var(--ink)}
.site-tab.on{background:var(--pink);color:#fff}
@media(max-width:640px){.site-tabs{gap:6px}.site-tab{font-size:13px;padding:7px 12px}}

/* ===== ЗНАЧОК ДЛИТЕЛЬНОСТИ ===== */
.lessoncard{position:relative;width:100%}
.lessoncard-wrap{position:relative}
.fav-star{position:absolute;top:8px;left:8px;z-index:5;border:none;background:rgba(0,0,0,.18);
  border-radius:50%;width:30px;height:30px;font-size:15px;cursor:pointer;opacity:.45;transition:.15s;
  display:flex;align-items:center;justify-content:center}
.fav-star.on{opacity:1;background:rgba(255,255,255,.35);transform:scale(1.08)}
.fav-star:hover{opacity:.85}
.lc-done{position:absolute;bottom:10px;left:14px;background:rgba(255,255,255,.9);color:var(--green);
  font-family:'Nunito';font-weight:800;font-size:11px;padding:3px 9px;border-radius:9px}
.dur-badge{position:absolute;top:10px;right:12px;background:rgba(255,255,255,.28);color:#fff;
  font-family:'Nunito';font-weight:800;font-size:12px;padding:4px 10px;border-radius:10px}
.dur-badge.inline{position:static;display:inline-block;background:#fff;color:var(--ink);margin-left:8px;
  box-shadow:var(--sh-sm);vertical-align:middle}

/* ===== КОНСТРУКТОР: СЕТКА ШАБЛОНОВ ===== */
.tplgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:20px;
  max-width:900px;margin-left:auto;margin-right:auto}
.tplcard{border:none;border-radius:22px;padding:22px 16px;cursor:pointer;color:#fff;font-family:'Baloo 2';
  box-shadow:0 7px 0 rgba(0,0,0,.15),0 12px 22px rgba(0,0,0,.1);transition:transform .14s;text-align:center;
  border-top:3px solid rgba(255,255,255,.55)}
.tplcard:hover{transform:translateY(-4px) rotate(-.5deg)}
.tplcard:active{transform:translateY(3px)}
.tplcard .tp-em{font-size:40px;display:block;margin-bottom:6px}
.tplcard .tp-name{font-size:19px;font-weight:700}
.tplcard .tp-hint{font-family:'Nunito';font-size:12px;font-weight:700;opacity:.9;margin-top:5px;line-height:1.3}

/* ===== ФОРМА КОНСТРУКТОРА ===== */
.builder{max-width:640px;margin:18px auto 0;text-align:left}
.builder label{display:block;font-family:'Baloo 2';font-weight:700;font-size:17px;margin:16px 0 6px;color:var(--ink)}
.builder input[type=text]{width:100%;border:3px solid var(--accent);border-radius:14px;padding:12px 14px;
  font-family:'Nunito';font-weight:800;font-size:17px;outline:none;color:var(--ink)}
.builder textarea{width:100%;border:3px solid var(--accent);border-radius:14px;padding:12px 14px;
  font-family:'Nunito';font-weight:700;font-size:16px;outline:none;color:var(--ink);min-height:150px;resize:vertical;
  line-height:1.5}
.builder .bhint{background:#FFF8E3;border:2px dashed var(--sun);border-radius:12px;padding:9px 13px;
  font-family:'Nunito';font-size:13.5px;color:#6B5320;margin-top:6px;white-space:pre-line;line-height:1.5}
.colorpick{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}
.cdotp{width:38px;height:38px;border-radius:50%;border:4px solid #fff;box-shadow:var(--sh-sm);cursor:pointer}
.cdotp.on{outline:3px solid var(--ink)}

/* ===== ИГРОВОЙ ПРОИГРЫВАТЕЛЬ (стандэлоун) ===== */
.gp-foot{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* --- match: соедини линиями --- */
.match2-wrap{position:relative}
.match2-cols{display:flex;justify-content:space-between;gap:40px;position:relative;z-index:2}
.match2-col{display:flex;flex-direction:column;gap:11px;flex:1}
.match2-item{border:3px solid var(--accent);background:#fff;border-radius:15px;padding:13px 10px;
  font-weight:800;font-size:18px;cursor:pointer;text-align:center;transition:.12s;font-family:'Baloo 2'}
.match2-item:hover{background:var(--accent);color:#fff}
.match2-item.sel{background:var(--accent);color:#fff;transform:scale(1.03)}
.match2-item.matched{background:var(--green);border-color:var(--green);color:#fff;pointer-events:none}
.match2-item.wrong{animation:shk2 .4s}
svg.match2-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
@keyframes shk2{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

/* --- memory: найди пару --- */
.mem2-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;max-width:560px;margin:0 auto}
.mem2-card{position:relative;aspect-ratio:1;border:none;background:none;padding:0;cursor:pointer;
  font-family:'Baloo 2';border-radius:15px}
.mem2-back,.mem2-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border-radius:15px;transition:opacity .2s ease, transform .2s ease;box-shadow:var(--sh-sm)}
.mem2-back{background:linear-gradient(160deg,var(--accent),var(--accent2));color:#fff;font-size:30px;
  opacity:1;transform:scale(1);z-index:2}
.mem2-face{background:#fff;border:3px solid var(--accent);font-size:clamp(15px,4vw,19px);font-weight:700;
  color:var(--ink);text-align:center;padding:4px;line-height:1.1;opacity:0;transform:scale(.9);z-index:1;pointer-events:none}
.mem2-card.flip .mem2-back{opacity:0;transform:scale(.9);z-index:1}
.mem2-card.flip .mem2-face{opacity:1;transform:scale(1);z-index:2;pointer-events:auto}
.mem2-card.done .mem2-face{background:var(--green);border-color:var(--green);color:#fff}
@media(max-width:560px){.mem2-grid{grid-template-columns:repeat(3,1fr)}}

/* --- spell: собери слово --- */
.spell2-slots{display:flex;gap:8px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}
.spell2-slot{width:46px;height:54px;border-radius:12px;border:3px solid var(--accent);background:#fff;
  display:flex;align-items:center;justify-content:center;font-family:'Baloo 2';font-weight:700;font-size:26px}
.spell2-slot.fill{background:var(--accent);color:#fff}
.spell2-letters{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.spell2-letter{width:50px;height:54px;border-radius:12px;border:none;background:#fff;box-shadow:var(--sh-sm);
  font-family:'Baloo 2';font-weight:700;font-size:25px;cursor:pointer;color:var(--ink)}
.spell2-letter.used{opacity:.25;pointer-events:none}
.spell2-emoji{font-size:56px;text-align:center;margin-bottom:8px}

/* --- true/false --- */
.tf2-row{display:flex;gap:14px;justify-content:center;margin-top:8px}
.tf2-btn{flex:1;max-width:200px;border:3px solid #E4DDCC;background:#fff;border-radius:16px;padding:20px;
  font-family:'Baloo 2';font-weight:700;font-size:20px;cursor:pointer;transition:.12s}
.tf2-btn:hover{border-color:var(--accent)}
.tf2-btn.right{background:var(--green);border-color:var(--green);color:#fff}
.tf2-btn.wrongtf{background:#E15C4E;border-color:#E15C4E;color:#fff;animation:shk2 .4s}

/* --- order --- */
.order2-track{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;min-height:54px;margin-bottom:16px}
.order2-slot{min-width:60px;height:54px;border-radius:12px;border:3px dashed #ccc;display:flex;align-items:center;
  justify-content:center;font-family:'Baloo 2';font-weight:700;font-size:15px;padding:0 8px;color:var(--ink)}
.order2-slot.fill{border-style:solid;border-color:var(--green);background:#EAF7E8}
.order2-items{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.order2-item{border:3px solid var(--accent);background:#fff;border-radius:15px;padding:13px 17px;font-weight:800;
  font-size:17px;cursor:pointer;font-family:'Baloo 2';transition:.12s}
.order2-item:hover{background:var(--accent);color:#fff}
.order2-item.picked{background:var(--green);border-color:var(--green);color:#fff;pointer-events:none}
.order2-item.no{animation:shk2 .4s}

/* --- sort2: перетащи в 2 корзины --- */
.bin2g{display:flex;gap:13px;flex-wrap:wrap;margin-top:6px}
.bin2b{flex:1;min-width:150px;min-height:130px;border-radius:20px;padding:12px;border:3px dashed var(--accent);
  background:#fff9;transition:.15s}
.bin2b.over{background:#fff;border-style:solid;transform:scale(1.02)}
.bin2b .bh2{font-family:'Baloo 2';font-weight:700;font-size:18px;text-align:center;margin-bottom:8px;color:var(--accent)}
.bin2b .drops2{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}

/* --- write: впиши ответ --- */
.write2-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.write2-input{border:3px solid var(--accent);border-radius:14px;padding:13px 16px;font-family:'Baloo 2';
  font-weight:700;font-size:22px;text-align:center;width:min(300px,80vw);outline:none;color:var(--ink)}
.write2-fb{text-align:center;font-family:'Baloo 2';font-weight:700;font-size:18px;min-height:26px;margin-top:8px}
.write2-fb.ok{color:var(--green)} .write2-fb.no{color:#E15C4E}

/* --- wheel: колесо --- */
.wheel-wrap{position:relative;width:min(260px,70vw);height:min(260px,70vw);margin:14px auto 0}
.wheel-disc{width:100%;height:100%;border-radius:50%;border:0;
  box-shadow:0 3px 12px rgba(77,62,73,.12);
  transition:transform 3s cubic-bezier(.12,.72,.16,1)}
.wheel-pointer{position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:22px solid #75677A;z-index:5;filter:drop-shadow(0 1px 1px rgba(77,62,73,.12))}
.wheel-frame{position:absolute;inset:-2.8%;width:105.6%;height:105.6%;object-fit:contain;z-index:4;pointer-events:none}
.wheel-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:30px;
  background:#fff;border-radius:50%;width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-sm);z-index:4}
.wheel-label{position:absolute;top:50%;left:50%;width:0;height:0}
.wheel-label-up{position:absolute;left:0;top:0}
.wheel-label-up span{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:inline-block;
  font-family:'Baloo 2';font-weight:700;color:#514754;white-space:nowrap;text-shadow:none}

/* ===== РЕГИСТРАЦИЯ / ВХОД ===== */
.auth-card{max-width:380px;margin:18px auto 0;background:#fff;border-radius:22px;padding:22px;
  box-shadow:var(--sh-sm)}
.auth-tabs{display:flex;gap:8px;margin-bottom:16px;background:#F3EEE0;border-radius:14px;padding:4px}
.auth-tab{flex:1;border:none;background:none;padding:9px;border-radius:11px;font-family:'Baloo 2';
  font-weight:700;font-size:15px;color:var(--muted);cursor:pointer}
.auth-tab.on{background:var(--pink);color:#fff}
.auth-card label{display:block;font-family:'Baloo 2';font-weight:700;font-size:15px;margin:12px 0 5px;color:var(--ink)}
.auth-card label:first-child{margin-top:0}
.role-pick{display:flex;gap:10px;margin-top:4px}
.role-btn{flex:1;border:3px solid #E4DDCC;background:#fff;border-radius:14px;padding:14px 8px;cursor:pointer;
  font-size:26px;display:flex;flex-direction:column;align-items:center;gap:4px;transition:.14s}
.role-btn span{font-family:'Nunito';font-size:13px;font-weight:800;color:var(--ink)}
.role-btn.on{border-color:var(--pink);background:var(--pink2)}
.auth-msg{text-align:center;font-family:'Nunito';font-weight:800;font-size:13.5px;margin-top:10px;min-height:18px;color:var(--muted)}
.auth-msg.no{color:#E15C4E}
.auth-check{background:#EAF7E8;border:2px dashed var(--green);border-radius:14px;padding:16px;text-align:center;
  font-family:'Nunito';font-weight:700;font-size:14.5px;line-height:1.6;color:#2E5A32}
.invite-banner{background:#FFF6FA;border:2px dashed var(--pink);border-radius:14px;padding:14px;text-align:center;
  font-family:'Nunito';font-weight:700;font-size:14.5px;color:var(--ink);margin:4px 0 6px}
.invite-box{max-width:360px;margin:16px auto 0;background:#FFF6FA;border:2px dashed var(--pink);border-radius:16px;
  padding:16px}
.invite-box .lbl{font-family:'Baloo 2';font-weight:700;font-size:15px;margin-bottom:8px;display:block}
.invite-box .link-row{display:flex;gap:8px;align-items:center}
.invite-box .link-row input{flex:1;border:2px solid var(--pink);border-radius:10px;padding:8px 10px;
  font-family:'Nunito';font-weight:700;font-size:12.5px;color:var(--ink);background:#fff}
.invite-box .link-row button{border:none;background:var(--pink);color:#fff;border-radius:10px;padding:8px 12px;
  font-family:'Nunito';font-weight:800;font-size:12.5px;cursor:pointer;flex-shrink:0}
.teacher-tag{display:inline-block;background:#EAF0FF;color:var(--blue);font-family:'Nunito';font-weight:800;
  font-size:12.5px;padding:5px 13px;border-radius:10px;margin-top:8px}
.pf-cta{margin-top:18px;padding-top:16px;border-top:2px dashed #E4DDCC;text-align:center}
.pf-cta-txt{font-family:'Nunito';font-weight:700;font-size:13.5px;color:var(--ink);margin-bottom:10px;line-height:1.5}
.pf-cloud-name{font-family:'Baloo 2';font-weight:700;font-size:22px;margin-top:8px}
.pf-role-badge{display:inline-block;background:var(--pink2);color:var(--ink);font-family:'Nunito';
  font-weight:800;font-size:12.5px;padding:4px 12px;border-radius:10px;margin-top:6px}
.pf-email{font-family:'Nunito';color:var(--muted);font-size:12.5px;margin-top:8px}

/* ===== ПРОФИЛЬ ===== */
.profile-card{max-width:360px;margin:18px auto 0;background:#fff;border-radius:22px;padding:24px 22px;
  text-align:center;box-shadow:var(--sh-sm)}
.pf-big-av{width:70px;height:70px;border-radius:50%;background:linear-gradient(160deg,var(--pink),var(--pink2));
  color:#fff;font-family:'Baloo 2';font-size:30px;font-weight:700;display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px}
.profile-card .sc-input{border-color:var(--pink)}
.pf-note{font-family:'Nunito';font-size:12.5px;color:var(--muted);font-weight:700;margin-top:12px;line-height:1.5}
.profile-section{max-width:900px;margin:26px auto 0;text-align:left;padding:0 6px}
.profile-section h3{font-family:'Baloo 2';font-size:20px;color:var(--ink);margin-bottom:4px;
  display:flex;align-items:center;gap:8px}
.pf-count{background:var(--pink);color:#fff;font-family:'Nunito';font-size:12px;font-weight:800;
  border-radius:10px;padding:2px 9px}

/* ===== ПУСТО / TESTS ===== */
.game-search-wrap{max-width:420px;margin:16px auto 20px}
.game-search-wrap .sc-input{border-color:var(--pink);font-size:16px}
.empty-lib{max-width:520px;margin:30px auto;text-align:center;background:#fff;border:3px dashed var(--muted);
  border-radius:20px;padding:30px 20px;font-family:'Baloo 2';font-size:19px;color:var(--muted)}

@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.05ms!important}}

/* ===== личный словарь ===== */
.vocab-add{display:flex;flex-wrap:wrap;gap:8px;max-width:640px;margin:16px auto 10px;background:#fff;border-radius:18px;padding:14px;box-shadow:var(--sh-sm)}
.vocab-add .sc-input{flex:1 1 150px;min-width:0;margin:0;font-size:15px;padding:10px 12px}
.vocab-filter{margin:6px 0;font-family:'Nunito';font-weight:800;font-size:13px;color:var(--muted)}
.vocab-filter select{font-family:'Nunito';font-weight:700;font-size:14px;padding:6px 10px;border-radius:10px;border:2px solid #e6dfd2;background:#fff;margin-left:6px}
.vocab-count{font-family:'Nunito';font-weight:800;font-size:13px;color:var(--muted);margin:8px 0 12px}
.vocab-practice{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;max-width:640px;margin:0 auto 18px}
.vocab-pbtn{display:flex;flex-direction:column;align-items:center;gap:2px;border:none;border-radius:16px;padding:12px 8px;cursor:pointer;
  background:linear-gradient(160deg,var(--blue),var(--blue2));color:#fff;font-family:'Nunito';font-weight:800;box-shadow:var(--sh-sm)}
.vocab-pbtn:nth-child(3n+2){background:linear-gradient(160deg,var(--pink),var(--pink2))}
.vocab-pbtn:nth-child(3n){background:linear-gradient(160deg,var(--green),var(--green2))}
.vocab-pbtn .em{font-size:24px}.vocab-pbtn .nm{font-size:14px}.vocab-pbtn small{font-size:10.5px;font-weight:700;opacity:.9;line-height:1.2}
.vocab-pbtn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}
.vocab-list{max-width:640px;margin:0 auto;text-align:left;display:flex;flex-direction:column;gap:8px}
.vocab-row{display:flex;align-items:center;gap:8px;background:#fff;border-radius:14px;padding:10px 12px;box-shadow:var(--sh-sm)}
.vocab-row.learned .vocab-main{opacity:.55}
.vocab-main{flex:1;min-width:0}
.vocab-word{font-family:'Poppins';font-weight:700;font-size:16px;word-break:break-word}
.vocab-tr{color:var(--muted);font-weight:700;font-size:14px}
.vocab-ex{font-size:12.5px;color:var(--muted);font-style:italic;margin-top:1px}
.vocab-topic{display:inline-block;font-family:'Nunito';font-weight:800;font-size:10.5px;background:#F3EDE4;color:var(--muted);border-radius:8px;padding:1px 7px;vertical-align:middle;margin-left:4px}
.vocab-ico{flex-shrink:0;border:none;background:#F3EDE4;border-radius:10px;width:34px;height:34px;cursor:pointer;font-size:15px}
.vocab-dlg label{display:block;text-align:left;font-family:'Nunito';font-weight:800;font-size:13px;margin:8px 0 3px;color:var(--muted)}
.vocab-dlg .sc-input{width:100%;margin:0}
.vocab-sel-tip{position:fixed;z-index:200;background:var(--ink);color:#fff;border:none;border-radius:10px;padding:8px 13px;font-family:'Nunito';
  font-weight:800;font-size:13px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.28)}
.vocab-modal{z-index:170}


.spark{animation:spk 2.2s ease-in-out infinite;transform-origin:center}
@keyframes spk{0%,100%{opacity:.35}50%{opacity:1}}
/* ===== LESSON 1D: Present Continuous ===== */
/* колесо */
.d-wheel-wrap{position:relative;width:min(340px,82vw);margin:6px auto 10px}
.d-wheel{width:100%;display:block;transition:transform 3.2s cubic-bezier(.17,.89,.22,1);filter:drop-shadow(0 3px 8px rgba(77,62,73,.12));position:relative;z-index:1}
.d-wheel-art{position:absolute;inset:-2.8%;width:105.6%;height:105.6%;object-fit:contain;z-index:2;pointer-events:none}
.d-pointer{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:22px solid #75677A;z-index:4;filter:drop-shadow(0 1px 1px rgba(77,62,73,.12))}
.d-secret{max-width:440px;margin:8px auto 0;background:#fff;border:3px dashed var(--accent);border-radius:20px;padding:16px;text-align:center}
.d-secret .face{font-family:'Baloo 2';font-weight:700;font-size:clamp(22px,5vw,32px);min-height:46px}
.d-secret .face.hidden{filter:blur(14px);user-select:none}
.d-steps{display:flex;flex-direction:column;gap:6px;margin:12px auto 0;max-width:520px;font-weight:800;font-size:17px}
.d-steps div{background:#fff;border-radius:12px;padding:8px 12px;box-shadow:var(--sh-sm)}
.d-steps b{color:var(--accent)}
/* формула */
.d-formula{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.d-formula .blk{border-radius:14px;padding:10px 14px;font-family:'Baloo 2';font-weight:700;font-size:clamp(17px,4vw,23px);color:#fff;box-shadow:var(--sh-sm)}
.d-formula .plus{font-weight:800;font-size:24px;color:var(--muted)}
.d-cheat{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.d-cheat div{background:#fff;border-radius:14px;padding:10px 6px;text-align:center;font-weight:800;font-size:16px;border:3px solid #eee;transition:.2s}
.d-cheat div b{display:block;font-family:'Baloo 2';font-size:24px}
.d-cheat div.lit{border-color:var(--green);background:#EAF7E8;transform:scale(1.04)}
.d-big{font-size:64px;text-align:center;line-height:1.1}
.d-sent{font-family:'Baloo 2';font-weight:700;font-size:clamp(22px,5.4vw,34px);text-align:center;margin:4px 0 12px}
.d-sent .gap{display:inline-block;min-width:70px;border-bottom:4px solid var(--accent);color:var(--accent);text-align:center}
.d-btnrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.d-bb{border:3px solid var(--accent);background:#fff;border-radius:16px;padding:14px 22px;font-weight:800;font-size:22px;cursor:pointer;font-family:'Nunito';min-width:90px;transition:.12s}
.d-bb:hover{background:var(--accent);color:#fff}
.d-bb.ok{background:var(--green);border-color:var(--green);color:#fff;animation:pop .3s}
.d-bb.no{background:var(--red);border-color:var(--red);color:#fff;animation:shk .4s}
/* -ing машина */
.d-machine{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:6px 0 16px}
.d-verb{background:linear-gradient(160deg,var(--sun),var(--sun2));color:#4a3608;border-radius:16px;padding:14px 22px;font-family:'Baloo 2';font-weight:700;font-size:30px;box-shadow:var(--sh-sm)}
.d-box{background:#5A4E7A;color:#fff;border-radius:20px;padding:12px 18px;text-align:center;box-shadow:var(--sh);font-family:'Baloo 2';font-weight:700}
.d-box .g{font-size:34px;display:inline-block}
.d-box.run .g{animation:spin .8s linear infinite}
.d-box small{display:block;font-size:14px;opacity:.85}
@keyframes spin{to{transform:rotate(360deg)}}
.d-out{font-size:30px;font-weight:800;color:var(--muted)}
/* парк */
.d-park{position:relative;width:100%;aspect-ratio:16/10;min-height:250px;border-radius:22px;overflow:hidden;border:4px solid #fff;box-shadow:var(--sh);
  background:linear-gradient(180deg,#BFE6FF 0,#DDF3FF 40%,#9BD77F 40%,#7CC762 100%);container-type:inline-size}
.d-park.small{max-width:620px;margin:0 auto 12px}
.d-lake{position:absolute;left:58%;top:64%;width:38%;height:30%;background:radial-gradient(ellipse at 50% 40%,#8FD3FF,#4AA8E0);border-radius:50%}
.d-path{position:absolute;left:0;right:0;top:44%;height:7%;background:#E9D8A6;opacity:.85}
.d-bench{position:absolute;left:33%;top:60%;width:17%;height:4%;background:#A0673A;border-radius:6px;box-shadow:0 7px 0 #7A4C28}
.d-tree{position:absolute;left:2%;top:4%;font-size:27cqw;line-height:1}
.d-sun{position:absolute;right:3%;top:3%;font-size:8cqw;animation:flo 4s ease-in-out infinite}
.d-ent{position:absolute;background:none;border:none;padding:2px 4px;cursor:default;font-size:6.6cqw;line-height:1;border-radius:14px;white-space:nowrap;transition:background .15s, transform .15s}
.d-park.tap .d-ent{cursor:pointer}
.d-park.tap .d-ent:hover{background:#ffffffaa;transform:scale(1.1)}
.d-ent.ok{background:#ffffffee;outline:4px solid var(--green)}
.d-ent.no{background:#ffd5cf;animation:shk .4s}
.d-ent .tiny{font-size:.55em;vertical-align:top}
.d-park .d-ent[data-k="cat"]{left:3%!important;top:11%!important;width:19%;height:36%;padding:0;z-index:2;font-size:0;display:flex;align-items:stretch;justify-content:center}
.d-park .d-ent[data-k="dog"]{left:1%!important;top:45%!important;width:18%;height:22%;padding:0;z-index:2;font-size:0;display:flex;align-items:center;justify-content:center}
.d-park .d-ent[data-k="girl"]{left:5%!important;top:21%!important;width:24%;height:56%;padding:0;z-index:2;font-size:0;display:flex;align-items:stretch;justify-content:center}
.d-park .d-ent[data-k="granny"]{left:58%!important;top:37%!important;width:15%;height:38%;padding:0;z-index:2;font-size:0;display:flex;align-items:center;justify-content:center}
.d-park .d-ent[data-k="bird"]{left:8%!important;top:3%!important;width:14%;height:19%;padding:0;z-index:3;font-size:0;display:flex;align-items:center;justify-content:center}
.d-park .d-ent[data-k="man"]{left:27%!important;top:27%!important;width:24%;height:32%;padding:0;z-index:3;font-size:0;display:flex;align-items:center;justify-content:center}
.d-park .d-ent[data-k="woman"]{left:79%!important;top:29%!important;width:15%;height:29%;padding:0;z-index:3;font-size:0;display:flex;align-items:center;justify-content:center}
.d-park .d-ent[data-k="boy"]{left:76%!important;top:56%!important;width:18%;height:23%;padding:0;z-index:3;font-size:0;display:flex;align-items:center;justify-content:center}
.d-park .d-ent[data-k="kids"]{left:30%!important;top:63%!important;width:28%;height:34%;padding:0;z-index:3;font-size:0;display:flex;align-items:center;justify-content:center}
.d-park .park-actor{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block;pointer-events:none}
.a-bob{animation:dbob 1.6s ease-in-out infinite}
@keyframes dbob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7%) rotate(4deg)}}
.a-ride{animation:dride 7s ease-in-out infinite alternate}
@keyframes dride{from{left:28%}to{left:52%}}
.a-dance{animation:ddance 1s ease-in-out infinite}
@keyframes ddance{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg) translateY(-6%)}}
.a-zz .tiny{animation:spk 2s ease-in-out infinite}
.a-hop{animation:dhop .9s ease-in-out infinite}
@keyframes dhop{0%,100%{transform:translateY(0)}50%{transform:translateY(-14%)}}
.a-climb{animation:dclimb 3s ease-in-out infinite alternate}
@keyframes dclimb{from{transform:translateY(12%)}to{transform:translateY(-12%)}}
.d-live{position:absolute;left:2%;top:3%;background:#E53935;color:#fff;font-weight:800;font-size:clamp(11px,2.4cqw,16px);border-radius:8px;padding:3px 9px;z-index:4;animation:spk 1.4s infinite}
/* робот */
.d-robot{display:flex;gap:12px;align-items:center;justify-content:center;margin-bottom:12px}
.d-robot .rb{font-size:66px;transition:.2s}
.d-robot .rb.happy{animation:hap .6s ease}
.d-bubble{background:#fff;border:3px solid var(--accent);border-radius:20px;padding:14px 16px;display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.d-w{border:none;background:#F3EEE2;border-radius:11px;padding:10px 13px;font-weight:800;font-size:clamp(18px,4.4vw,24px);cursor:pointer;font-family:'Nunito'}
.d-w:hover{background:var(--sun2)}
.d-w.bad{background:var(--red);color:#fff;animation:shk .4s}
.d-w.fixed{background:var(--green);color:#fff}
.d-fixbox{margin-top:12px;text-align:center}
/* часы */
.d-hud{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:20px;margin-bottom:10px}
.d-tbar{height:14px;background:#EEE6D4;border-radius:10px;overflow:hidden;margin-bottom:14px}
.d-tbar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--sun),var(--red));width:100%;transition:width 1s linear}
.d-mode{display:inline-block;border-radius:12px;padding:5px 14px;color:#fff;font-weight:800;font-size:18px;margin-bottom:8px}
/* репортёр */
.d-rep{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.d-rc{background:#fff;border:3px solid var(--accent);border-radius:16px;padding:12px 8px;text-align:center;cursor:pointer;font-weight:800;transition:.15s}
.d-rc .e{font-size:38px;display:block}
.d-rc .p{font-size:17px;color:var(--muted)}
.d-rc .a{display:none;font-size:16px;color:var(--ink);margin-top:6px}
.d-rc.open{background:#EAF7E8;border-color:var(--green)}
.d-rc.open .a{display:block}
.d-h3{font-family:'Baloo 2';font-weight:700;font-size:22px;margin:18px 0 8px;text-align:center}


/* Нарисованные сцены для общих уроков */
.scene{background:url('/scenes/home-room-day.webp') center/100% 100% no-repeat}
.scene>svg.bg{opacity:0}
.d-park{background-image:url('/scenes/park-day.webp');background-position:center 62%;background-size:cover}
.d-park .d-lake,.d-park .d-path,.d-park .d-bench,.d-park .d-tree,.d-park .d-sun{display:none}