/* ═══════════════════════════════════════════════════════════════════════════
   ДЕКО-ЯДРО — обща обвивка за демонстрационните деко-та за манипулативи.
   Всеки деко подава само: акцентен цвят (--acc/--acc-d), съдържание, рендер на
   манипулатива и своите анимации.

   ПРИНЦИПИ (научени при пилота „Сметало", 07.2026):
   1. МАНИПУЛАТИВЪТ Е ГЕРОЯТ — ~40% от площта на екрана. Води се по ШИРИНА
      (широките обекти се смачкват, ако се оразмеряват по vh).
   2. Сцена, не split: заглавие → ГОЛЯМ манипулатив → подкана → бутони → бележки.
   3. Контролите ДОЛУ (там е ръката на учителя); горе само дял + източник.
   4. УЧИТЕЛСКИЯТ СКРИПТ ЧЕСТО СЪДЪРЖА ОТГОВОРА → скрит на дъската;
      вижда се в „Учителски екран" (втори прозорец) или с клавиш N.
   5. БЕЗ интерактивност върху манипулатива — децата работят с ФИЗИЧЕСКИЯ комплект.
      Анимации = учителска демонстрация на СТРАТЕГИЯТА, не само на отговора.
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@500;600;700&display=swap');

:root{
  --ink:#2b2b2f; --brand:#F58220; --brand-d:#d96d12;
  --paper:#fffdf9; --muted:#6b6b72;
  /* ── ТРИ СИВИ, не пет случайни ──
     --ink-2  текст КЪМ КЛАСА, който не е заглавие (надпис под сцената, указание)
     --chrome управление ЗА УЧИТЕЛЯ (брояч, дялове, бутони на ръба)
     --faint  произход и дребен шрифт, който не бива да се чете от разстояние */
  --ink-2:#55555c; --chrome:#8b8b93; --faint:#b9b9c0;
  /* ── КАРЕТА: една геометрия, два фона със значение ──
     --r/--r-lg радиус (голям само за наслагване) · --bw рамка · --bl акцентен ляв ръб
     --card бяло = чете се от класа · --teach лавандула = само за учителя (клавиш N) */
  --r:1.2vh; --r-lg:2vh; --bw:.22vh; --bl:.45vh; --line:#e8dfd6;
  --card:#fff; --teach-bg:#f4f1fa; --teach-line:#ddd6ee; --amber:#d9a520;
  --acc:#B5443B; --acc-d:#8f3229; --soft:#FBEAE8;   /* деко-ът ги презаписва */
  --ok:#2FA04C; --anchor:#2E6DB4;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Comfortaa',system-ui,Segoe UI,sans-serif;color:var(--ink);background:#23232a;overflow:hidden}
#stage{position:fixed;inset:0}

/* ── слайд ── */
.slide{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  padding:8.4vh 3vw 10vh;text-align:center;background:var(--paper)}
.slide.on{display:flex;animation:in .28s ease}
@keyframes in{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* ── горна ивица: само дял + източник ── */
.top{position:absolute;top:5.4vh;left:4vw;right:4vw;display:flex;align-items:center;
  justify-content:space-between;font-size:1.7vh;gap:1vh}
.chip{background:var(--soft);color:var(--acc-d);border-radius:99px;padding:.45vh 1.6vh;font-weight:700;white-space:nowrap}
.chip.d{background:#e8f0fb;color:var(--anchor)}
.src{color:var(--faint);font-size:1.35vh;font-weight:600;text-align:right;max-width:42vw}

/* ── типография ── */
h1{font-size:5.6vh;font-weight:700;line-height:1.1}
h2{font-size:4.1vh;font-weight:700;line-height:1.15}

.sub{font-size:2.35vh;color:var(--muted);font-weight:500;line-height:1.45}
.note{font-size:1.9vh;color:var(--chrome);font-weight:600}
/* ⚠ Един и същ клас служеше на ДВА гласа: „взети 3 — това е горното число"
   (към класа) и „дроб 1 / 12" (счетоводство за учителя). Изглеждаха еднакво. */
/* ⚠ Този надпис е ЖИВИЯТ КОМЕНТАР под манипулатива — „дотук 1,60 €",
   „часовата вече е между 1 и 2". Класът го чете от последния чин, докато
   учителят брои. На 2,5vh (27 px при 1080p) не се чете от разстояние.
   Той не е бележка под линия, а част от задачата. */
.slide.task > .stage .note{font-size:3.4vh;color:var(--ink-2);line-height:1.28;
  font-weight:700;max-width:82%;margin:0 auto}
.cite{font-size:1.6vh;color:var(--chrome);line-height:1.5;text-align:left}
.cite b{color:#5b5b64}

/* ── СЦЕНА: манипулативът е героят ── */
.split{display:grid;grid-template-columns:1.18fr .82fr;gap:3.4vw;align-items:center;width:100%;max-width:94vw}
.split .text{text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:1.5vh}

/* ═══ РЕЖИМ „ЗАДАЧА" (.slide.task) — основният режим ═══
   Открихме, че деко, чийто слайд започва с ТЕМА и обяснение, звучи като упътване
   за учителя, а на дъската стои текст, който детето няма как да ползва.
   Затова слайдът Е ЗАДАЧА:
     1. Горе — ВЪПРОСЪТ към класа, с думите, които учителят ще каже на глас.
     2. Обектът на коментар е МАКСИМАЛНО голям — той се гледа от последния чин.
     3. Контролите са ОТСТРАНИ, не под обекта: вертикалата принадлежи на обекта.
     4. Отговорът се появява в страничната лента СЛЕД като децата са опитали.
     5. Методиката (защо · капанът · какво да питаш) НЕ е на дъската →
        учителски екран / клавиш N. Тук няма нито ред, адресиран до учителя.        */
/* ⚠ `display` САМО върху .on — иначе `.slide.task` (същата тежест като `.slide.on`,
   но по-надолу във файла) побеждава `.slide{display:none}` и ВСИЧКИ задачни слайдове
   остават видими един върху друг; вижда се само последният в документа. */
.slide.task.on{display:grid}
.slide.task{align-content:center;justify-items:center;
  grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr) 20vw;
  grid-template-areas:"head head" "stage rail";
  gap:1.8vh 2.6vw;padding:10.2vh 3.5vw 9.5vh}
.slide.task > h2{grid-area:head;text-align:center;font-size:4.5vh;max-width:32ch;align-self:end}
.slide.task > .stage{grid-area:stage;width:100%;min-width:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1vh}
.slide.task > .rail{grid-area:rail;width:100%;align-self:center;display:flex;flex-direction:column;
  align-items:stretch;gap:1.1vh;text-align:left}
.slide.task .stage svg.manip{max-width:none;max-height:64vh}
.slide.task .rail .btns{flex-direction:column;gap:.9vh;margin:0}
.slide.task .rail .btns.row{flex-direction:row}
.slide.task .rail .btns.row .btn{flex:1;min-width:0;padding-left:.6vh;padding-right:.6vh}
.slide.task .rail .btn{width:100%;font-size:2.1vh;padding:1.15vh 1.6vh}
/* ⚠ Изводът е отговорът НА КЛАСА. При 2,35vh на проектор 1080p това е ~25 px —
   от последния чин не се чете, а въпросът над него е двойно по-едър. */
.slide.task .rail .reveal{text-align:left;font-size:3vh;min-height:0;line-height:1.25}
.slide.task .rail .note{text-align:left;font-size:1.7vh;color:var(--chrome)}
/* ⚠ На задачен слайд ДОРИ предупреждението не стои на дъската — то е за учителя.
   Двете (капанът + какво да каже) живеят в ЕДИН блок `.tnote`, за да се подредят
   едно под друго; ако се позиционират поотделно, се застъпват и се вижда само
   долното. Учителският екран ги чете поотделно и това не му пречи. */
.slide.task > .tnote{position:absolute;bottom:10.5vh;left:4vw;right:23vw;
  display:none;flex-direction:column;gap:.8vh;text-align:left}
body.notes .slide.task > .tnote{display:flex}
/* ⚠ Бележките са НЕПРОЗРАЧНИ карти и лежат върху дъното на сцената — при
   включени бележки манипулативът се смалява, за да не се крие нищо под тях.
   (Личеше чак когато каретата станаха плътни; преди се четеше през тях.) */
/* мястото за бележките се РЕЗЕРВИРА в решетката, а не се гадае: иначе редът с
   дробите под манипулатива пак ляга под картите */
body.notes .slide.task{padding-bottom:34vh}
body.notes .slide.task .stage svg.manip{max-height:38vh}
.slide.task .tnote .warn{display:block;max-width:none;text-align:left}
.slide.task .tnote .script{display:block;max-width:none}
/* какво прави детето с ФИЗИЧЕСКИЯ комплект — единственият текст извън въпроса */
.do{background:var(--card);border:var(--bw) solid var(--line);border-left:var(--bl) solid var(--anchor);border-radius:var(--r);
  padding:1vh 1.4vh;font-size:2vh;line-height:1.35;color:var(--ink-2)}
.do b{display:block;font-size:1.5vh;text-transform:uppercase;letter-spacing:.5px;color:#2E6DB4;margin-bottom:.25em}
@media (max-aspect-ratio:1/1){
  .slide.task{grid-template-columns:1fr;grid-template-areas:"head" "stage" "rail"}
}

/* ── КОЙ КАКВО ПРАВИ ──
   Декото е за учителя, но всеки дял има и действие за детето с ФИЗИЧЕСКИЯ комплект.
   Тази лента го прави явно: класът вижда лявото, учителят прави дясното. */
@media (max-aspect-ratio:1/1){
  .split{grid-template-columns:1fr;gap:2vh}
  .split .text{align-items:center;text-align:center}
}

/* ── сцена на манипулатива ──
   ⚠ SVG-то е във вътрешен рендер-div. Без width:100% и на НЕГО той се свива до
   интринсичните 300px и width:100% на SVG-то се мери спрямо него. */
.stagebox{position:relative;width:100%;display:flex;justify-content:center}
.stagebox>div:not(.cover){width:100%;display:flex;justify-content:center}
svg.manip{width:100%;height:auto;filter:drop-shadow(0 .7vh 1.4vh rgba(0,0,0,.10))}
.cover{position:absolute;inset:0;background:#3a3a44;border-radius:var(--r-lg);display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:3vh;font-weight:700;opacity:0;pointer-events:none;transition:opacity .12s}
.cover.on{opacity:1}

/* ── учителски скрипт: СКРИТ на дъската (често съдържа отговора) ── */
.script{background:var(--teach-bg);border:var(--bw) solid var(--teach-line);border-left:var(--bl) solid var(--brand);border-radius:var(--r);
  padding:1.3vh 1.8vh;font-size:2vh;color:#4a4a52;text-align:left;line-height:1.5;display:none}
body.notes .script{display:block}
.script b{color:var(--brand-d)} .script .q{color:var(--ink);font-weight:700}
.script::before{content:'✎ за учителя (не се вижда на дъската)';display:block;font-size:.72em;
  color:#b9a99a;font-weight:700;letter-spacing:.4px;margin-bottom:.3em}

/* ── бутони и разкриване ── */
.btn{font-family:inherit;font-weight:700;font-size:2.3vh;border:0;border-radius:99px;padding:1.25vh 2.8vh;
  cursor:pointer;background:var(--brand);color:#fff;box-shadow:0 .55vh 0 var(--brand-d)}
.btn:active{transform:translateY(.4vh);box-shadow:0 .15vh 0 var(--brand-d)}
.btn.b2{background:var(--anchor);box-shadow:0 .55vh 0 #1d4e87}
.btn.g{background:#9a9aa2;box-shadow:0 .55vh 0 #74747c}
.btn.sm{font-size:1.9vh;padding:.9vh 2vh}
.btns{display:flex;gap:1vh;flex-wrap:wrap}
.reveal{min-height:4.6vh;font-size:2.8vh;font-weight:700;color:var(--acc);opacity:0;transition:.2s}
.reveal.show{opacity:1}
/* ⚠ Предупреждението пази кехлибарения си сигнал, но като ЛЯВ РЪБ — така влиза
   в семейството на учителските карти, вместо да е самотна кремава кутия. */
.warn{background:var(--teach-bg);border:var(--bw) solid var(--teach-line);
  border-left:var(--bl) solid var(--amber);border-radius:var(--r);padding:1.2vh 1.7vh;
  font-size:1.95vh;color:#6b5a2a;text-align:left}

/* ── заглавен и учителски слайд ── */
.title{background:linear-gradient(135deg,var(--acc),var(--acc-d));color:#fff}
.title h1{color:#fff;font-size:7.4vh}.title .sub{color:#f2e2e0;font-size:2.6vh}
.teach{background:#f7f4ff}
.teach .warn,.teach .script{background:var(--card)}
/* ⚠ Обратното правило: тук повърхността вече е лавандулова, затова картата е
   бяла. Контрастът е спрямо ПОВЪРХНОСТТА, не абсолютен. */
.teach .box{background:var(--card);border:var(--bw) solid var(--teach-line);border-radius:var(--r);padding:1.8vh 2.2vh;
  text-align:left;font-size:1.95vh;line-height:1.5}
.teach .box b{color:#5b21b6}

/* ── контроли ДОЛУ (без сблъсък със съдържанието) ── */
#bar{position:fixed;bottom:2vh;left:0;right:0;display:flex;align-items:center;justify-content:center;
  gap:1.6vh;z-index:20}
.nav{width:6.4vh;height:6.4vh;border-radius:50%;border:0;background:#fff;color:var(--acc-d);
  font-size:3.1vh;cursor:pointer;box-shadow:0 .5vh 1.5vh rgba(0,0,0,.28)}
.nav:active{transform:scale(.94)}
#dots{display:flex;gap:.7vh;align-items:center;flex-wrap:wrap;max-width:56vw;justify-content:center}
.dot{width:1.15vh;height:1.15vh;border-radius:50%;background:#fff;opacity:.35;cursor:pointer}
.dot.on{opacity:1;background:var(--brand);transform:scale(1.35)}
.dot.sec{background:#ffd9b3;opacity:.6}
#count{position:fixed;bottom:3.1vh;right:3vw;color:var(--chrome);font-size:1.6vh;z-index:20}
/* Инструментите са ЕДИН ред долу вляво (ядрото ги събира в #tools). Знак без
   надпис — надписът е в title; така групата не яде мястото на дяловете. */
#tools{position:fixed;bottom:2.6vh;left:1.5vw;z-index:21;display:flex;gap:.7vh}
#fs,#idx,#pres,#notes{position:static;background:#00000024;color:#fff;
  border:0;border-radius:99px;width:4.6vh;height:4.6vh;font-size:2vh;cursor:pointer;
  font-family:inherit;font-weight:600;display:flex;align-items:center;justify-content:center;
  transition:background .12s}
#fs:hover,#idx:hover,#pres:hover,#notes:hover{background:#00000042}
#notes.on{background:var(--brand);color:#fff}

/* ── съдържание (дялове) ── */
#toc{position:fixed;inset:0;background:rgba(20,20,25,.94);z-index:30;display:none;padding:6vh 6vw;overflow:auto}
#toc.on{display:block}
#toc h3{color:#fff;font-size:2.6vh;margin-bottom:2vh}
#toc .g{display:grid;grid-template-columns:repeat(auto-fill,minmax(24vh,1fr));gap:1.4vh}
#toc .i{background:#2f2f38;border-radius:1.2vh;padding:1.4vh 1.7vh;color:#fff;cursor:pointer;border:.2vh solid transparent}
#toc .i:hover{border-color:var(--brand)}
#toc .i .k{font-size:1.5vh;color:var(--brand);font-weight:700}
#toc .i .t{font-size:1.95vh;font-weight:700;margin-top:.3vh}
#toc .i .d{font-size:1.55vh;color:#b9b9c0;margin-top:.3vh}

/* ── МАРКА + ТРОХА ──────────────────────────────────────────────────────────
   Деко-то се гледа от клас на дъска, но се НАВИГИРА от учител. Затова марката
   е постоянна (винаги има откъде да се върнеш), но тиха: дребна и с нисък
   контраст, за да не се състезава с манипулатива. При посочване се усилва.
   ⚠ Последната троха е ТЕКУЩИЯТ дял и НЕ е връзка — иначе обещава действие,
   което не води наникъде (общото правило за бутоните важи и тук). */
#brand{position:fixed;top:1.5vh;left:4vw;right:4vw;z-index:22;display:flex;align-items:baseline;
  gap:1.4vh;font-size:1.5vh;line-height:1;flex-wrap:wrap;pointer-events:none}
#brand > *{pointer-events:auto}
/* Знакът е inline SVG и се оцветява с currentColor — така един и същ файл
   работи и на светъл, и на тъмен слайд, без втори вариант. */
#brand .mark{display:flex;align-items:center;gap:.85vh;text-decoration:none;
  color:var(--acc-d,#0E7C7B);transition:color .18s,opacity .18s}
#brand .mark svg{height:2.9vh;width:2.9vh;display:block;flex:none}
#brand .mark svg .pin{fill:currentColor;opacity:.34}
#brand .mark .wm{font-size:1.75vh;font-weight:300;letter-spacing:-.01em;color:var(--chrome)}
#brand .mark .wm b{font-weight:700;color:var(--ink-2)}
#brand .mark:hover{opacity:.72}
#brand .crumbs{color:var(--faint);font-weight:600;display:flex;align-items:baseline;gap:.7vh;flex-wrap:wrap}
#brand .crumbs a{color:var(--chrome);text-decoration:none;transition:color .18s}
#brand .crumbs a:hover{color:var(--acc);text-decoration:underline}
#brand .crumbs .sep{color:#d6d6dc}
#brand .crumbs .here{color:var(--muted)}
/* върху тъмния заглавен слайд марката минава в светъл вариант */
body.dark #brand .mark{color:#3FBFB5}
body.dark #brand .mark .wm{color:#ffffffa8}
body.dark #brand .mark .wm b{color:#fff}
body.dark #brand .crumbs{color:#ffffff70}
body.dark #brand .crumbs a{color:#ffffff8c}
body.dark #brand .crumbs a:hover{color:#fff}
body.dark #brand .crumbs .sep{color:#ffffff45}
body.dark #brand .crumbs .here{color:#ffffffcc}

/* ── ЛУПА ────────────────────────────────────────────────────────────────────
   Схемата за свързване и стъпките за сглобяване се гледат от последния чин.
   Клик върху снимката я отваря на цял екран; колелцето мащабира, влаченето мести.
   ⚠ Курсорът казва, че снимката е кликаема — иначе никой не се сеща да опита. */
img.shot, .zoomable{cursor:zoom-in}
#lens{position:fixed;inset:0;z-index:60;background:#1b1b22f2;display:none;
      align-items:center;justify-content:center;overflow:hidden}
#lens.on{display:flex}
/* ⚠ БЕЗ max-width/max-height — размерът се смята в JS („побери"), защото
   малките снимки на стъпките иначе стоят мънички насред черното поле. */
#lens img{transform-origin:center center;
          transition:transform .12s ease-out;cursor:zoom-in;user-select:none;-webkit-user-drag:none;
          image-rendering:auto}
#lens.drag img{cursor:grabbing;transition:none}
#lens .zc{position:fixed;bottom:8.5vh;left:50%;transform:translateX(-50%);display:flex;
          align-items:center;gap:.5vh;background:#ffffff1c;border-radius:99px;padding:.5vh}
#lens .zc button{font-family:inherit;font-weight:700;color:#fff;background:none;border:0;
          border-radius:99px;cursor:pointer;height:4.4vh;min-width:4.4vh;font-size:2.2vh;padding:0 1.2vh}
#lens .zc button:hover{background:#ffffff2e}
#lens .zc .fit{font-size:1.7vh}
#lens .zc .pct{color:#fff;font-size:1.7vh;font-weight:700;min-width:6vh;text-align:center}
#lens .hint{position:fixed;bottom:3vh;left:0;right:0;text-align:center;color:#ffffff8c;
            font-size:1.7vh;font-weight:600;pointer-events:none}
#lens .x{position:fixed;top:2.4vh;right:2.4vw;color:#fff;background:#ffffff22;border:0;
         border-radius:99px;width:5.2vh;height:5.2vh;font-size:2.6vh;cursor:pointer;
         font-family:inherit}
#lens .x:hover{background:#ffffff38}

/* ── РАЗДЕЛИ вместо стрелки ──────────────────────────────────────────────────
   В деко-инструкция „Следваща стъпка" (вътре в дял) и ‹ › (между дялове) са две
   различни движения. Ако и двете са бутони, учителят не знае кое накъде води.
   Затова долу стоят ИМЕНАТА на дяловете — виждаш къде си и какво следва. */
#tabs{position:fixed;bottom:2.2vh;left:50%;transform:translateX(-50%);z-index:21;
      display:flex;gap:.6vh;background:#fff;backdrop-filter:blur(6px);
      border:.22vh solid var(--line);border-radius:99px;padding:.6vh;max-width:66vw;
      overflow:auto;box-shadow:0 .6vh 2vh #0000001f}
#tabs button{font-family:inherit;font-weight:700;font-size:2.2vh;white-space:nowrap;
      border:0;background:none;color:var(--ink-2);border-radius:99px;padding:1vh 2.4vh;cursor:pointer}
#tabs button:hover{color:var(--ink);background:#00000008}
#tabs button.on{background:var(--acc);color:#fff}