/* Доска для урока.
 *
 * Всё поверх полотна — «плавающие» панели: доска занимает весь экран,
 * и любая рамка вокруг неё съедала бы рабочее место. Панели прижаты
 * к краям и не перехватывают события там, где их нет (pointer-events),
 * иначе рисовать под панелью было бы нельзя.
 */

.board-body {
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;      /* чтобы жест не тянул страницу вниз */
  background: var(--bd-paper);
  font-family: var(--font-ui), system-ui, sans-serif;
  color: var(--ink);
  touch-action: none;             /* жесты обрабатываем сами */
  user-select: none;
  -webkit-user-select: none;
}

#board-canvas {
  position: fixed;
  inset: 0;
  display: block;
  cursor: crosshair;
}
#board-canvas.grabbing { cursor: grabbing; }
#board-canvas.hand { cursor: grab; }
/* С инструментом «выделить» форму курсора ставит hoverCursor из
   js/board.js по тому, что под мышью: ладонь на пустом месте, крест
   на объекте, уголок на ручке размера. Здесь только запасной вид —
   до первого движения мыши. */
#board-canvas.picking  { cursor: grab; }
/* Лазер: курсор гасим — яркая точка сама играет его роль. crosshair
   рядом с точкой давал бы две метки в одном месте, визуальный шум. */
#board-canvas.laser    { cursor: none; }

/* ---------- общие кнопки доски ---------- */
.bd-btn {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-control);
  border-radius: 10px;
  min-height: 38px;
  padding: 0 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.bd-btn:hover { background: var(--surface-alt); }
.bd-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bd-btn.primary { background: var(--accent-fill); color: var(--on-accent-fill); border-color: transparent; }
.bd-btn.danger { color: var(--red); }
.bd-btn.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

/* ---------- верхняя панель ---------- */
.bd-top {
  position: fixed;
  top: 12px; left: 12px; right: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 20;
  pointer-events: none;           /* кликается только содержимое */
}
.bd-top > * { pointer-events: auto; }

.bd-back {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line-control);
  color: var(--ink);
  text-decoration: none;
  font-size: 20px;
  flex: none;
}
.bd-title {
  display: flex; align-items: baseline; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line-control);
  border-radius: 10px;
  padding: 8px 14px;
  min-height: 38px;
  max-width: 46vw;
}
.bd-title #bd-name {
  font-family: var(--font-display), sans-serif;
  font-weight: 900;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-state { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.bd-state.err { color: var(--red); }

.bd-top-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.bd-live {
  font-size: 13px; font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 7px 14px;
}

/* ---------- инструменты слева ---------- */
/* Док слева: инструменты и их настройки одним блоком. Настройки
   отделены линией, а не отдельной плашкой — так видно, что цвет
   относится к выбранному инструменту, а не живёт сам по себе. */
.bd-dock {
  position: fixed;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-control);
  border-radius: 16px;
  padding: 8px;
  z-index: 20;
  box-shadow: 0 6px 20px rgba(43, 54, 48, .10);
  /* Ниже шапки и выше нижней панели: доска остаётся видимой целиком */
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}
.bd-tools {
  display: flex; flex-direction: column; gap: 4px;
}
.bd-tool {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.bd-tool:hover { background: var(--surface-alt); }
.bd-tool.active { background: var(--accent-fill); color: var(--on-accent-fill); }
.bd-tool:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bd-sep { height: 1px; background: var(--line-soft); margin: 4px 2px; }
.bd-sep-h { width: 1px; align-self: stretch; background: var(--line-soft); margin: 4px 2px; }

/* ---------- цвет и толщина ---------- */
.bd-style {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 8px; padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
/* У ластика и выделения настраивать нечего — панель просто уходит */
/* Цвета — в два столбца, толщина — в ряд. В одну колонку панель
   с ручкой вырастала на весь экран и налезала на шапку доски. */
.bd-colors {
  display: grid; grid-template-columns: repeat(2, 26px);
  gap: 6px; justify-content: center;
}
.bd-sizes { display: flex; gap: 4px; justify-content: center; }
.bd-swatch { width: 26px; height: 26px; }
.bd-size { width: 24px; height: 24px; }
.bd-swatch {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.bd-swatch.active { border-color: var(--ink); }
.bd-swatch:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Кружок «свой цвет»: до выбора — плюс на нейтральном фоне, после —
   заливается выбранным (заливку ставит JS из пикера: это данные
   рисунка, а не стиль интерфейса, правило tokens.css её не касается). */
.bd-swatch.bd-custom {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  color: var(--ink);
  background: var(--surface-alt);
  border-style: dashed;
  border-color: var(--line-control);
}
.bd-swatch.bd-custom.active { border-style: solid; border-color: var(--ink); }
/* Плюс поверх выбранного цвета мог бы слиться с ним — прячем */
.bd-swatch.bd-custom.picked svg.ic { display: none; }
/* Нативный пикер растянут поверх кружка: нажатие попадает в сам input,
   и пикер открывается сам. Программный inp.click() по невидимому полю
   Safari молча игнорирует (нужен видимый input) — из-за этого «свой цвет»
   и не открывался. */
.bd-color-input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: 0; padding: 0;
}

.bd-size {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 8px; cursor: pointer;
}
.bd-size i { display: block; background: var(--ink); border-radius: 50%; }
.bd-size.active { background: var(--accent-soft); }

/* Низкий экран (ноутбук 1280×800 и ему подобные): док в полном виде
   не помещается — ряд толщин и нижние свотчи уезжали за кадр, а скролл
   внутри дока без видимой полосы никто не находил (аудит: кнопка «8 px»
   на y=818 при кадре 800). На малой высоте док собирается компактнее:
   всё видно сразу, без догадывания про скролл. Порог 945px — высота,
   начиная с которой полный док (~810px содержимого + запас 130px под
   шапку и нижнюю панель) гарантированно влезает. Кнопки 36px вместо 44 —
   допустимо: экран такой высоты это ноутбук с мышью/тачпадом, а не палец
   по планшету (планшетные раскладки выше и живут своими правилами). */
@media (min-width: 761px) and (max-height: 945px) {
  .bd-dock { padding: 6px; }
  .bd-tools { gap: 3px; }
  .bd-tool { width: 36px; height: 36px; font-size: 17px; border-radius: 8px; }
  .bd-sep { margin: 3px 2px; }
  .bd-style { gap: 6px; margin-top: 6px; padding-top: 8px; }
  .bd-colors { grid-template-columns: repeat(2, 26px); gap: 5px; }
  .bd-swatch { width: 26px; height: 26px; }
  .bd-size { width: 24px; height: 24px; }
}

/* ---------- нижняя панель ---------- */
.bd-bottom {
  position: fixed;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line-control);
  border-radius: 14px;
  padding: 6px;
  z-index: 20;
  max-width: calc(100vw - 24px);
}
.bd-zoom { min-width: 62px; font-variant-numeric: tabular-nums; }

/* Ползунок масштаба. Рисуем сами: системный выглядит чужеродно рядом
   с кнопками доски, а на телефоне ещё и толстый. Прячем его на узких
   экранах — там масштаб меняют щипком, а место в панели дороже. */
.bd-zoom-range {
  -webkit-appearance: none; appearance: none;
  width: 104px; height: 22px;
  background: none; cursor: pointer;
}
.bd-zoom-range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: var(--line-control);
}
.bd-zoom-range::-moz-range-track {
  height: 4px; border-radius: 2px; background: var(--line-control);
}
.bd-zoom-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -5px;
  border-radius: 50%; border: 2px solid var(--surface);
  background: var(--accent);
}
.bd-zoom-range::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%; border: 2px solid var(--surface);
  background: var(--accent);
}
.bd-zoom-range:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 12px; }
@media (max-width: 720px) { .bd-zoom-range { display: none; } }

/* ---------- панель слов ---------- */
.bd-panel {
  position: fixed;
  right: 12px; top: 62px; bottom: 70px;
  width: 300px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line-control);
  border-radius: 14px;
  padding: 12px;
  z-index: 21;
}
.bd-panel-head { display: flex; align-items: center; justify-content: space-between; }
.bd-panel-head b { font-family: var(--font-display), sans-serif; font-size: 17px; }
.bd-select, .bd-input {
  font: inherit; font-size: 15px;
  padding: 9px 10px;
  border: 1px solid var(--line-control);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  width: 100%;
  min-height: 40px;
}
.bd-hint { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; margin: 0; }

/* Форма добавления слова в панели (репетитор) и диалог (ученик):
   те же поля, что у редактора текста, компактно и без системных окон. */
.bd-panel-add {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px;
  border: 1px dashed var(--line-control);
  border-radius: 12px;
  background: var(--surface-alt, var(--paper));
}
.bd-panel-add-folder { display: flex; gap: 8px; }
.bd-panel-add-folder > * { flex: 1; min-width: 0; }
#bd-addword { display: flex; flex-direction: column; gap: 10px; }
/* Заголовок папки в списке слов */
.bd-folder-head {
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
  color: var(--ink-soft);
  padding: 8px 4px 2px;
  text-transform: uppercase;
}
.bd-word-list { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; min-height: 0; flex: 1; }
.bd-word {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--paper);
  /* Цвет ОБЯЗАТЕЛЕН: это <button>, а браузер красит кнопки своим
     системным цветом текста, который к теме сайта отношения не имеет.
     В ночной теме английское слово выходило тёмным на тёмном и просто
     не читалось — перевод рядом был виден, потому что ему цвет задан. */
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font: inherit;
  min-height: 42px;
}
.bd-word:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.bd-word b { font-weight: 700; }
.bd-word span { font-size: 13px; color: var(--ink-soft); margin-left: auto; }

/* Пикер упражнений на доску: карточки с иконкой и микроподписью,
   сетка 2 колонки (видео Ирины «по красоте») */
#bd-task-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bd-task-card {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--line-soft); border-radius: 12px;
  background: var(--paper); color: var(--ink); font: inherit;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.bd-task-card:hover { border-color: var(--accent-line); background: var(--accent-soft); transform: translateY(-1px); }
.bd-task-card:active { transform: translateY(0); }
.bd-task-ico { flex: none; display: flex; color: var(--accent-dark); }
.bd-task-txt { display: flex; flex-direction: column; min-width: 0; }
.bd-task-txt b { font-weight: 700; font-size: 14px; }
.bd-task-txt span { font-size: 12px; color: var(--ink-soft); }
/* Строка слова в словаре репетитора: сама карточка + кнопка удаления
   (репетиторская, сервер тоже проверяет владельца) */
.bd-word-row { display: flex; align-items: stretch; gap: 4px; }
.bd-word-row .bd-word { flex: 1; min-width: 0; }
.bd-word-del {
  border: 1px solid var(--line-soft); background: var(--paper);
  color: var(--ink-soft); border-radius: 10px; cursor: pointer;
  padding: 0 10px; font-size: 14px;
}
.bd-word-del:hover { color: var(--bd-red, #c0392b); border-color: var(--bd-red, #c0392b); }
.bd-word-status { font-size: 11px; color: var(--ink-soft); margin-left: 6px; }
.bd-folder-count { font-weight: 400; color: var(--ink-soft); font-size: 12px; }

/* ---------- ввод текста ---------- */
.bd-editor {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 92vw);   /* шире для длинных упражнений (волна 5) */
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line-control);
  border-radius: 14px;
  padding: 14px;
  z-index: 40;
  box-shadow: 0 20px 50px rgba(0,0,0,.22);
}
/* Поле растёт по содержимому до ~40% экрана, дальше — скролл (JS
   autoGrowEditor ставит height inline); без ресайз-уголка: он ломал рост */
.bd-editor textarea {
  resize: none;
  min-height: 72px;
}
.bd-editor-hint {
  margin: -4px 2px 0;
  font-size: 12px; color: var(--ink-soft);
}
.bd-editor-fmt { display: flex; gap: 2px; margin-right: auto; }
.bd-editor-fmt .bd-btn { min-width: 30px; padding: 6px 7px; }
/* Плавающая панель форматирования над выделением (как в Word) */
.bd-fmt-float {
  position: fixed; z-index: 65; margin-right: 0;
  background: var(--surface);
  border: 1px solid var(--line-control); border-radius: 10px;
  padding: 4px; box-shadow: 0 10px 26px rgba(0, 0, 0, .2);
}
.bd-editor textarea {
  font: inherit; font-size: 17px;
  padding: 10px;
  border: 1px solid var(--line-control);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  /* Нативная ручка resize в правом нижнем углу съедала клик: ~16px зона
     не ставила каретку, выделение «весь текст» оставалось, и следующая
     печать заменяла заметку целиком (чек-лист владельца). Растягивать
     поле всё равно некуда — редактор фиксирован по центру экрана,
     а длинный текст скроллится внутри поля. */
  resize: none;
  width: 100%;
}
.bd-editor-row { display: flex; gap: 8px; justify-content: flex-end; }

/* ---------- сообщение ---------- */
.bd-toast {
  position: fixed;
  left: 50%; top: 70px;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 14px;
  z-index: 50;
  margin: 0;
  max-width: 80vw;
  text-align: center;
}

/* ---------- телефон ----------
   На узком экране вертикальный ряд инструментов не помещается вместе
   с палитрой: палитра уезжает вниз, инструменты становятся строкой. */
/* Планшет в портретной ориентации. Раньше он попадал в «настольную»
   вёрстку: док слева, панель слов справа на 300 px — и доске оставалась
   узкая полоса посередине. Репетитор на iPad — основной сценарий урока,
   поэтому здесь панель слов ложится снизу, как выдвижной ящик. */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  /* Док горизонтальный внизу — в портрете вертикальный столбик занимал
     треть высоты и перекрывал ящик со словами. */
  .bd-dock {
    left: 10px; right: 10px; top: auto; bottom: 68px;
    transform: none; flex-direction: column;
    max-height: none; overflow: visible;
  }
  .bd-tools { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .bd-style {
    flex-direction: row; justify-content: center; align-items: center;
    margin-top: 6px; padding-top: 8px; gap: 16px;
  }
  .bd-colors { grid-template-columns: repeat(6, 26px); }

  /* Слова — выдвижным ящиком над доком, а не колонкой справа */
  .bd-panel {
    right: 10px; left: 10px; width: auto;
    top: auto; bottom: 150px; max-height: 44vh;
  }
  .bd-word-list { max-height: 28vh; }
}

/* Узкий экран: кнопки шапки переносятся на вторую строку.
   Без этого они просто ПРОПАДАЛИ. `.bd-top` — flex без переноса, а у
   body стоит overflow-x: hidden: всё, что не влезло, обрезалось, и
   доскроллить до него было нельзя (проверено — scrollIntoView не двигал
   ничего). На телефоне 375px шапке нужно 804 пикселя при доступных 351:
   репетитор терял «Звонок» и «Открыть ученику», то есть обе главные
   кнопки урока. На планшете 768px — тоже четыре кнопки, при том что
   iPad здесь основной сценарий (см. комментарий ниже).

   Перенос, а не overflow-x: auto, — потому что горизонтальный скролл
   внутри шапки репетитор не найдёт: полосы там не видно, а жест смахивания
   на доске занят рисованием. Порог 1100px, а не 760: считать надо по
   САМОМУ ШИРОКОМУ составу кнопок (репетитор с идущим звонком и плашкой
   «ученик на доске»), а он перестаёт влезать заметно раньше телефона.

   min-width: 0 обязателен обоим: без него флекс-элемент не сжимается
   ниже своего содержимого и перенос не срабатывает вовсе. */
@media (max-width: 1100px) {
  /* Кнопкам — отдельная строка во всю ширину. Пока они делили строку с
     заголовком, им доставалась узкая колонка справа и они всё равно
     вставали в пять этажей поверх доски. */
  .bd-top { flex-wrap: wrap; align-items: center; row-gap: 8px; }
  .bd-title { flex: 1 1 auto; min-width: 0; }
  .bd-top-right {
    flex: 0 0 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
    margin-left: 0;               /* иначе auto-отступ ломает свою строку */
    /* Строка теперь во всю ширину, а `.bd-top > *` даёт ей
       pointer-events: auto — то есть пустое место рядом с кнопками
       начало бы перехватывать рисование по доске. Мышь ловят сами
       кнопки, не полоса под ними. */
    pointer-events: none;
  }
  .bd-top-right > * { pointer-events: auto; }

  /* Подписи убираем, значок и title остаются: с ними кнопки складываются
     в две строки вместо пяти, а пять — это четверть высоты экрана поверх
     доски. Доступное имя не теряется, оно берётся из title.
     Кнопку доступа не трогаем: её содержимое целиком переписывает
     board.js (shareLabel), и span тут не выживет. */
  .bd-btn-label { display: none; }
}

@media (max-width: 760px) {
  .bd-dock {
    left: 8px; right: 8px; top: auto; bottom: 62px;
    transform: none;
    flex-direction: column;
    border-radius: 14px;
  }
  .bd-tools { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .bd-style {
    flex-direction: row; justify-content: center; align-items: center;
    margin-top: 6px; padding-top: 8px; gap: 14px;
  }
  .bd-colors, .bd-sizes { flex-direction: row; }
  .bd-sep { width: 1px; height: auto; margin: 2px 4px; }
  .bd-panel { top: 62px; bottom: 190px; width: auto; left: 8px; right: 8px; }
  .bd-title { max-width: 40vw; }
  .bd-bottom { bottom: 10px; }
}

/* Скрытые панели доски: правило [hidden] теперь одно на весь сайт,
   в css/style.css. Здесь был поимённый список, и он оказался неполным —
   .bd-share-menu и .bd-call в него не попали и висели на боевой доске. */

/* Иконки в кнопках доски: тот же набор, что на всём сайте (js/icons.js).
   Раньше здесь стояли текстовые символы — они рисовались разной толщиной
   в разных шрифтах и выбивались из остального интерфейса. */
.bd-tool svg.ic, .bd-btn svg.ic { display: block; }
.bd-btn svg.ic { display: inline-block; vertical-align: -3px; }
.bd-tool { display: flex; align-items: center; justify-content: center; }

/* Свотчи цветов прячутся по инструменту, поэтому нужен flex-контейнер,
   который не оставляет дырок от скрытых кружков. */


/* Бейдж присутствия ученика: в узкой шапке он ломался на три строки
   и распирал панель. */
.bd-live { white-space: nowrap; }
.bd-live.away { color: var(--ink-soft); background: rgba(215, 160, 30, .14); }   /* янтарная подложка остаётся сигналом; янтарный текст не проходил контраст (3,4:1) ни днём, ни ночью */
.bd-live.gone { color: var(--ink-soft); background: rgba(128, 128, 128, .12); }
.bd-panel-tasks { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; }

/* Взведённая кнопка очистки: цвет вместо подписи — она теперь с иконкой */
.bd-btn.armed { color: var(--red); border-color: var(--red); }

/* Объяснение на месте пустого полотна */
.bd-empty {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: 420px; text-align: center;
  padding: 26px 28px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line-soft);
  z-index: 15;
}
.bd-empty b { display: block; font-size: var(--text-h3); margin-bottom: 8px; }
.bd-empty p { color: var(--ink-soft); line-height: 1.5; }

/* (правило [hidden] переехало в css/style.css — одно на весь сайт) */


/* ---------- видеозвонок ----------
   Окошки в правом нижнем углу, над зумом: доска остаётся главной,
   лица — рядом, как книжка на столе, а не поверх тетради. */
.bd-call {
  position: fixed; right: 14px; bottom: 76px; z-index: 40;
  touch-action: none; cursor: grab;   /* окно таскается за видео */
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bd-panel, var(--surface));
  border: 1px solid var(--border); border-radius: 16px;
  padding: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.bd-call-videos { position: relative; }
#call-remote {
  width: 232px; height: 174px; border-radius: 10px; background: var(--bd-video);
  object-fit: cover; display: block;
}
#call-local {
  position: absolute; right: 6px; bottom: 6px;
  width: 76px; height: 57px; border-radius: 8px; background: var(--bd-video-self);
  object-fit: cover; border: 2px solid var(--surface);
  /* плитка таскается пальцем/мышью (Zoom): без touch-action:none касание
     уходило бы в скролл страницы раньше pointermove */
  cursor: grab; touch-action: none; z-index: 3;
}
#call-local.novideo { opacity: 0; }
/* Мини-значки состояния ВТОРОЙ стороны поверх её видео (левый верхний
   угол): «у ученика выключен микрофон» видно без вопроса вслух. Та же
   косая черта «выключено», что у .call-chip.off, — смысл не одним цветом.
   Плашка тёмная полупрозрачная, как .gc-name: значок обязан читаться
   поверх любого кадра. */
.call-peer-media {
  position: absolute; left: 6px; top: 6px; z-index: 2;
  display: flex; align-items: center; gap: 3px;
}
.call-peer-media .call-chip {
  min-height: 20px; padding: 1px 6px; gap: 4px;
  font-size: 11.5px;
  color: var(--bd-video-ink);
  background: color-mix(in srgb, var(--bd-video-deep) 78%, transparent);
}
.call-peer-media .call-chip.off { color: var(--bd-video-ink); }
.call-peer-media .call-chip.off::after { left: 4px; right: 4px; }
.bd-call-row { display: flex; gap: 8px; justify-content: center; cursor: default; }
/* «Выключено» — формой, а не бледностью: косая черта поверх значка плюс
   --ink-soft вместо opacity. Было opacity .45 — это 2,4:1 на дневной
   карточке и провал на тёмной сцене, а line-through по SVG не рисуется.
   Тот же приём, что у .call-chip.off и .gc-bar button.off. */
.bd-call-row .bd-btn.off { color: var(--ink-soft); position: relative; }
.bd-call-row .bd-btn.off::after {
  content: ""; position: absolute; left: 9px; right: 9px; top: 50%;
  height: 2px; border-radius: 1px; background: currentColor;
  transform: translateY(-50%) rotate(-16deg);
}
.bd-call-end { color: var(--bd-on-dark); background: var(--bd-red); border-color: transparent; }
.bd-call-state {
  margin: 0; text-align: center; font-size: 12px; color: var(--ink-soft);
}

/* ---------- полоска статуса звонка ----------
   Сверху по центру, вплотную под шапкой: значки микрофона, камеры, показа
   экрана и качества связи (просьба владельца — кнопки этих режимов сидят
   в угловом окне видео, а с середины доски по ним не понять, слышно тебя
   или нет). Абсолютна внутри .bd-top: на узком экране шапка переносится
   в две строки, и полоска уезжает вниз вместе с ней — фиксированная
   высота в px здесь наезжала бы на перенесённые кнопки. */
.call-strip {
  position: absolute; left: 50%; top: calc(100% + 8px);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line-control);
  border-radius: 999px;
  padding: 3px 6px;
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
}
.call-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 26px; padding: 2px 8px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 12.5px; font-weight: 600;
}
/* «Выключено» — формой, а не одним цветом (соглашение): косая черта
   поверх значка плюс приглушённый, но проверенный по контрасту цвет.
   Именно --ink-soft, а не opacity на --ink: прозрачность считает контраст
   по факту наложения и на тёмной сцене проваливается ниже нормы, а у
   --ink-soft он задан токеном (5,5:1 днём, 6,2:1 ночью). */
.call-chip.off { color: var(--ink-soft); }
.call-chip.off::after {
  content: ""; position: absolute; left: 5px; right: 5px; top: 50%;
  height: 1.75px; border-radius: 1px; background: currentColor;
  transform: translateY(-50%) rotate(-16deg);
}
/* Качество связи: ступень читается числом столбиков значка (js/icons.js,
   signal) и словом рядом; цветом смысл не кодируем вовсе — палитра доски
   не даёт красного, читаемого на обеих темах (--bd-red ночью на карточке
   даёт 2,4:1), а придумывать цвет вне tokens.css нельзя. */
.call-chip-link b { font-weight: 700; font-variant-numeric: tabular-nums; }
.call-chip-link .sb1, .call-chip-link .sb2, .call-chip-link .sb3 { opacity: 1; }
.call-chip-link.q-unknown .sb1,
.call-chip-link.q-unknown .sb2,
.call-chip-link.q-unknown .sb3 { opacity: .22; }
.call-chip-link.q-ok .sb3 { opacity: .22; }
.call-chip-link.q-bad .sb2,
.call-chip-link.q-bad .sb3 { opacity: .22; }

/* Во время звонка шапку (а с ней полоску статуса и панель демонстрации)
   поднимаем над полноэкранным видеоуроком: большой режим — та же сцена
   (z-index 55), и без этого индикаторы пропадали ровно там, где звонок
   занимает весь экран. */
.board-body.call-live .bd-top { z-index: 56; }
/* Тост доски живёт на top: 70px — поднятой полоске на пути. */
.board-body.call-live .bd-toast { top: 118px; }

/* Входящий звонок — по центру, мимо не пройдёшь */
.bd-ring {
  position: fixed; left: 50%; top: 26%; transform: translateX(-50%); z-index: 60;
  background: var(--bd-panel, var(--surface));
  border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 22px; box-shadow: 0 18px 44px rgba(0, 0, 0, .25);
  text-align: center;
}
.bd-ring p { margin: 0 0 12px; font-weight: 700; }
.bd-ring-row { display: flex; gap: 10px; justify-content: center; }

/* Телефоны: окошки меньше и выше нижней панели */
@media (max-width: 640px) {
  .bd-call { right: 8px; bottom: 88px; padding: 8px; }
  #call-remote { width: 168px; height: 126px; }
  #call-local { width: 56px; height: 42px; }
}

/* Меню «кого позвать на доску» — выпадает из кнопки доступа */
.bd-share-wrap { position: relative; }
.bd-share-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 55;
  min-width: 210px; display: flex; flex-direction: column; gap: 2px;
  background: var(--bd-panel, var(--surface));
  border: 1px solid var(--border); border-radius: 12px;
  padding: 6px; box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}
.bd-share-menu button {
  border: 0; background: none; text-align: left; cursor: pointer;
  font: inherit; color: inherit; padding: 9px 10px; border-radius: 8px;
}
.bd-share-menu button:hover { background: var(--accent-soft); }
.bd-share-menu button.on { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.bd-share-menu button.danger { color: var(--bd-red); }
.bd-share-menu .bd-hint { margin: 4px 8px; }

/* Плашка таймера: сверху по центру, ПОД шапкой (не перекрывает её). */
.bd-timer-plate {
  position: fixed; left: 50%; top: 66px; transform: translateX(-50%);
  z-index: 30; display: flex; gap: 8px; align-items: center;
  background: var(--bd-panel, var(--surface));
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
}
.bd-timer-left {
  font-family: var(--font-display), sans-serif;
  font-weight: 900; font-size: 22px; font-variant-numeric: tabular-nums;
  min-width: 3.2em; text-align: center;
}
/* Финальные секунды — мигаем цветом, пропустить нельзя */
.bd-timer-plate.urgent { border-color: var(--red); animation: bd-timer-blink .8s infinite; }
.bd-timer-plate.urgent .bd-timer-left { color: var(--red); }
@keyframes bd-timer-blink {
  50% { background: var(--accent-soft); }
}
.bd-timer-menu { right: auto; left: 0; }
.bd-timer-custom { display: flex; gap: 6px; padding: 4px 2px 2px; }
.bd-timer-custom .bd-input { width: 64px; min-height: 36px; }

/* Меню реакций: ряд крупных эмодзи, а не список */
.bd-react-menu { right: auto; left: 0; flex-direction: row; flex-wrap: wrap; max-width: 240px; }
.bd-react-emoji {
  font-size: 24px; line-height: 1; padding: 8px;
  border: 0; background: none; cursor: pointer; border-radius: 10px;
}
.bd-react-emoji:hover { background: var(--accent-soft); transform: scale(1.15); }

/* Сетка эмодзи: в редакторе текста (вставка в каретку) и в меню реакций
   (штамп на доску). Одна сетка на оба места, строится из EMOJI_SET. */
.bd-emoji-panel {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  margin-top: 6px; width: 100%;
}
.bd-emoji-panel button {
  font-size: 20px; line-height: 1; padding: 6px 4px; text-align: center;
  border: 0; background: none; cursor: pointer; border-radius: 8px;
}
.bd-emoji-panel button:hover { background: var(--accent-soft); transform: scale(1.15); }
.bd-emoji-divider {
  width: 100%; margin: 6px 8px 0; font-size: 12px; color: var(--ink-soft);
}

/* Полный пикер эмодзи (волна 3): оверлей с поиском и вкладками категорий.
   Класс bd-emoji-panel на нём — не только ради стилей: swapEmoji из
   icons.js его пропускает по этому классу (там эмодзи — содержимое). */
.bd-emoji-picker {
  position: fixed; z-index: 60; display: flex; flex-direction: column;
  max-height: 320px;
  background: var(--bd-panel, var(--surface));
  border: 1px solid var(--border); border-radius: 12px;
  padding: 8px; box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
  gap: 6px;
}
.bd-emoji-picker .bd-emoji-search {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--paper); color: var(--ink); padding: 8px 10px; font: inherit;
}
.bd-emoji-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.bd-emoji-tab {
  font-size: 17px; line-height: 1; padding: 5px 6px;
  border: 0; background: none; cursor: pointer; border-radius: 8px;
}
.bd-emoji-tab:hover { background: var(--accent-soft); }
.bd-emoji-tab.on { background: var(--accent-soft); outline: 1px solid var(--accent-line); }
.bd-emoji-picker .bd-emoji-grid {
  overflow-y: auto; margin-top: 0;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
}
.bd-emoji-picker .bd-emoji-grid button { font-size: 22px; padding: 5px 2px; }
.bd-emoji-none { margin: 8px; font-size: 13px; color: var(--ink-soft); }

/* Поиск по доске (Ctrl+F): панель в стиле меню доски, правый верх. */
.bd-searchbox {
  position: fixed; top: 56px; right: 12px; z-index: 60; width: min(320px, 92vw);
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bd-panel, var(--surface));
  border: 1px solid var(--border); border-radius: 12px;
  padding: 8px; box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}
.bd-searchbox-row { display: flex; align-items: center; gap: 8px; }
.bd-searchbox-row .bd-input { flex: 1; min-width: 0; }
.bd-searchbox-count { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.bd-searchbox-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.bd-search-hit {
  display: flex; align-items: baseline; gap: 8px; text-align: left;
  border: 0; background: none; cursor: pointer; font: inherit; color: inherit;
  padding: 7px 8px; border-radius: 8px;
}
.bd-search-hit:hover { background: var(--accent-soft); }
.bd-search-hit.on { background: var(--accent-soft); outline: 1px solid var(--accent-line); }
.bd-search-kind {
  font-size: 11px; color: var(--ink-soft); flex: none;
  border: 1px solid var(--line-soft); border-radius: 6px; padding: 1px 6px;
}
.bd-search-snip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Плашка «ученик просит показать экран» (волна 3): поверх доски по
   центру, с теми же кнопками, что у меню доски. */
.bd-scrreq {
  position: fixed; top: 64px; left: 50%; right: auto;
  transform: translateX(-50%);
  z-index: 60; display: flex; flex-direction: column; gap: 8px; min-width: 260px;
}
.bd-scrreq-row { display: flex; gap: 8px; }
.bd-scrreq-row .bd-btn { flex: 1; text-align: center; }

/* Мини-панель над выделенным (Miro-style) */
.bd-minipanel {
  position: fixed;
  z-index: 40; display: flex; gap: 5px; align-items: center;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 10px; box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
}
.bd-minicolor {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--line-soft);
  cursor: pointer; padding: 0;
}
.bd-minicolor:hover { border-color: var(--ink); }
.bd-minisep { width: 1px; align-self: stretch; background: var(--line-soft); margin: 2px 2px; }
.bd-minipanel .bd-btn { padding: 6px 9px; min-height: 0; font-size: 13px; }
/* Книжки в панели */
.bd-book-row { display: flex; gap: 6px; align-items: stretch; }
.bd-book-row .bd-book-add { flex: 1; min-width: 0; }
.bd-book-del { flex: 0 0 auto; align-self: center; }
.bd-book-upload { width: 100%; margin-top: 8px; }

/* Листалка выделенной книги — плашка над нижней панелью */
.bd-bookbar {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  z-index: 50; display: flex; gap: 10px; align-items: center;
  background: var(--bd-panel, var(--surface));
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 12px; box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
  font-weight: 700; white-space: nowrap;
}

/* Превью слова в панели: фотография, где она есть, иначе эмодзи-образ */
.bd-word { display: flex; align-items: center; gap: 8px; }
.bd-word-art {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; font-size: 17px;
}
.bd-word-art .word-photo { width: 100%; height: 100%; object-fit: cover; }
.bd-word-txt { min-width: 0; display: flex; flex-direction: column; }

/* ---------- видеоурок: большой режим ----------
   Тот же звонок, что в углу, но на весь экран: лица крупно, доска ждёт
   под ним. Переключение не трогает соединение — меняется только CSS. */
.bd-call.big {
  inset: 0; right: auto; bottom: auto; width: 100vw; height: 100vh;
  border-radius: 0; border: none; z-index: 55; cursor: default;
  background: var(--bd-video-stage); padding: 14px; gap: 12px;
  justify-content: center; align-items: center;
}
.bd-call.big .bd-call-videos { flex: 1; width: 100%; min-height: 0; display: flex; }
.bd-call.big #call-remote {
  width: 100%; height: 100%; object-fit: contain; background: var(--bd-video-deep);
  border-radius: 14px;
}
.bd-call.big #call-local {
  width: min(26vw, 220px); height: auto; aspect-ratio: 4 / 3;
  right: 14px; bottom: 14px; border-radius: 12px;
}
.bd-call.big .bd-call-row { padding-bottom: 6px; flex-wrap: wrap; }
.bd-call.big .bd-call-row .bd-btn { transform: scale(1.25); margin: 0 6px; }
/* На телефоне увеличение убираем: transform раскладку не двигает, и шесть
   кнопок по 1,25 визуально не влезали в 390 px — крайняя («Завершить»)
   уезжала за край экрана. В обычном размере ряд помещается сам. */
@media (max-width: 640px) {
  .bd-call.big .bd-call-row .bd-btn { transform: none; margin: 0 2px; }
}
.bd-call.big .bd-call-state { color: var(--bd-video-ink); font-size: 14px; }
.bd-call-dial {
  font-size: var(--text-body-lg, 19px); font-weight: 800;
  padding: 14px 34px; border-radius: 999px;
}
.bd-call.big .bd-call-dial { margin: 8px 0 4px; }

/* Мини-окно лица собеседника во время демонстрации его экрана:
   экран большой, человек — рядом со своим превью, никто не исчезает */
#call-remote-cam {
  position: absolute; left: 6px; bottom: 6px;
  width: 76px; height: 57px; border-radius: 8px; background: var(--bd-video-self);
  object-fit: cover; border: 2px solid var(--surface);
  /* тоже перетаскиваемая плитка (см. #call-local) */
  cursor: grab; touch-action: none; z-index: 3;
}
.bd-call.big #call-remote-cam {
  width: min(26vw, 220px); height: auto; aspect-ratio: 4 / 3;
  left: 14px; bottom: 14px; border-radius: 12px;
}

/* Панель демонстрации — зелёная строка сверху, как в Zoom.
   Дочерняя у шапки и висит под полоской статуса звонка (её высота ~34 px
   плюс зазор): показ экрана бывает только на живом звонке, где полоска
   уже заняла место под шапкой. */
.screen-bar {
  position: absolute; top: calc(100% + 50px); left: 50%; transform: translateX(-50%);
  z-index: 70; display: flex; align-items: center; gap: 10px;
  white-space: nowrap;              /* на телефоне текст ломался на три строки */
  background: var(--green); color: var(--bd-on-dark);
  border-radius: 999px; padding: 8px 10px 8px 16px;
  font-weight: 700; font-size: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.screen-bar-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--bd-rec);
  animation: screen-pulse 1.6s ease-in-out infinite;
}
@keyframes screen-pulse { 50% { opacity: .35; } }
.screen-bar-stop { background: rgba(0, 0, 0, .22); color: var(--bd-on-dark); border-color: transparent; }   /* белая на светлом пятне давала 3,97:1; тёмная утопленность — 7,95:1, выглядит так же */
.screen-bar-stop:hover { background: rgba(255, 255, 255, .28); }

/* ================= Групповой видеоурок (js/groupcall.js) =================
   Сцена, сетка плиток и панель — всё на палитре видео (--bd-video-*),
   чтобы не спорить с доской ни днём, ни ночью. */
/* Сцена группового урока: полноэкранная подложка видео-режима. */
#gc-stage {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--bd-video-stage);
}
#gc-stage[hidden] { display: none; }

.gc-grid {
  flex: 1;
  display: grid;
  gap: var(--space-12);
  padding: var(--space-16);
  align-content: center;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(280px, 480px));
  /* Строки — доли высоты сцены, а не по содержимому: иначе две плитки
     720×540 (data-n="2") суммой выше экрана выпихивали панель кнопок
     за пределы фиксированной сцены — выйти из урока было нечем.
     Поймано первым живым прогоном. */
  grid-auto-rows: minmax(0, 1fr);
  min-height: 0;
}
/* Один гость — крупно посередине; толпа — плотнее. */
.gc-grid[data-n="2"] { grid-template-columns: minmax(280px, 720px); }
.gc-grid[data-n="3"], .gc-grid[data-n="4"] { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
.gc-grid[data-n="5"], .gc-grid[data-n="6"] { grid-template-columns: repeat(3, minmax(200px, 1fr)); }

.gc-tile {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--bd-video);
  aspect-ratio: 4 / 3;
  /* Рост — вверх до доли строки (см. .gc-grid): широкая колонка не
             должна уметь растянуть плитку выше сцены. */
  max-height: 100%;
  justify-self: center;
}
.gc-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Своя плитка — зеркало: так привычнее (Zoom делает так же). */
#gc-me video { transform: scaleX(-1); }
.gc-name {
  position: absolute;
  left: var(--space-8);
  bottom: var(--space-8);
  padding: 2px var(--space-12);
  border-radius: var(--radius-tag);
  background: color-mix(in srgb, var(--bd-video-deep) 78%, transparent);
  color: var(--bd-video-ink);
  font-size: var(--text-caption);
  font-weight: 600;
}
/* Нет видео — аватар-плашка, а не чёрный прямоугольник. */
.gc-tile.gc-novideo video { visibility: hidden; }
.gc-tile.gc-novideo::after {
  content: "аудио";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--bd-video-ink);
  font-weight: 700;
}
/* Состояние участника по его hello: «микрофон выключен» и «плохая
   связь» — правый верхний угол плитки. Показываем ТОЛЬКО отклонения
   (значок появляется, когда микрофон выключен или связь плохая): шесть
   плиток с постоянными значками «всё хорошо» — это шум, в котором
   важное тонет. Черта поверх значка — как у .gc-bar button.off. */
.gc-pm {
  position: absolute;
  right: var(--space-8);
  top: var(--space-8);
  display: flex;
  align-items: center;
  gap: 6px;
}
.gc-pm > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: var(--radius-tag);
  background: color-mix(in srgb, var(--bd-video-deep) 78%, transparent);
  color: var(--bd-video-ink);
  font-size: var(--text-caption);
  font-weight: 700;
}
.gc-pm > span[hidden] { display: none; }
.gc-pm-mic { position: relative; }
.gc-pm-mic::after {
  content: ""; position: absolute; left: 5px; right: 5px; top: 50%;
  height: 1.75px; border-radius: 1px; background: currentColor;
  transform: translateY(-50%) rotate(-16deg);
}

/* Демонстрация экрана репетитора — сцена сверху, лица снизу. */
#gc-screen {
  flex: 2;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  background: var(--bd-video-deep);
}
#gc-stage.gc-with-screen .gc-grid { flex: 1; }

/* Панель управления — тот же язык, что у панели звонка. */
.gc-bar {
  display: flex;
  justify-content: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16) var(--space-16);
}
.gc-bar button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: var(--border-w) solid transparent;
  background: var(--bd-video-self);
  color: var(--bd-video-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease);
}
.gc-bar button:hover { background: var(--bd-video); }
.gc-bar button.off { background: var(--bd-rec); color: var(--bd-on-dark); }
/* off — не только цветом: при дальтонизме серая и красная кнопки неотличимы.
   Та же косая черта, что у полоски звонка (.call-chip.off). */
.gc-bar button { position: relative; }
.gc-bar button.off::after {
  content: ""; position: absolute; left: 12px; right: 12px; top: 50%;
  height: 2px; border-radius: 1px; background: currentColor;
  transform: translateY(-50%) rotate(-16deg);
}
/* На тёмной сцене у кнопок нет глобального кольца (board не грузит savely.css). */
.gc-bar button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bd-video-stage), 0 0 0 4px var(--bd-video-ink);
}
.gc-bar button.on { background: var(--accent); color: var(--on-accent); }
.gc-bar .gc-danger { background: var(--bd-rec); color: var(--bd-on-dark); }
.gc-bar .gc-danger:hover { filter: brightness(1.1); }
.gc-bar .gc-danger svg { transform: rotate(135deg); }  /* трубка «положить» */

/* Приглашение ученику: плашка сверху по центру, не модалка — урок не
   должен перекрывать доску, на которую ребёнок, может, уже смотрит. */
#gc-join {
  position: fixed;
  top: var(--space-16);
  left: 50%;
  transform: translateX(-50%);
  z-index: 61;
  padding: var(--space-12) var(--space-24);
  border-radius: var(--radius-btn);
  border: var(--border-w) solid var(--accent-line);
  background: var(--accent-fill);
  color: var(--on-accent-fill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-body-sm);
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  animation: riseIn var(--dur-slow) var(--ease) both;
}
#gc-join[hidden] { display: none; }

@media (max-width: 720px) {
  .gc-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); padding: var(--space-8); }
  .gc-grid[data-n="2"] { grid-template-columns: 1fr; }
  .gc-bar button { width: 52px; height: 52px; }  /* палец ребёнка */
}

/* ---------- шпаргалка по доске ---------- */
/* Тот же каркас, что у редактора: центр экрана, поверх полотна. */
.bd-help {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 19, 15, .42);
}
.bd-help[hidden] { display: none; }
.bd-help-card {
  width: min(680px, 94vw);
  max-height: 86vh;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line-control);
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: var(--shadow-lift);
}
.bd-help-card h3 { margin: 0 0 12px; font-size: var(--text-subheading); }
.bd-help-cols { display: grid; gap: 4px 24px; grid-template-columns: 1fr 1fr; }
.bd-help-cols section:last-child { grid-column: 1 / -1; }
.bd-help-card h4 {
  margin: 10px 0 4px;
  font-size: var(--text-caption);
  color: var(--accent);
  font-weight: 700;
}
.bd-help-card p {
  margin: 0 0 8px;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--ink-soft);
}
.bd-help-card p b { color: var(--ink); font-weight: 700; }
.bd-help-card .bd-editor-row { margin-top: 12px; display: flex; gap: 10px; }
@media (max-width: 640px) {
  .bd-help-cols { grid-template-columns: 1fr; }
}

/* Выход из большого видеоурока: кнопка внутри оверлея, в шапку дороги нет. */
.bd-call-back { display: none; }
.bd-call.big .bd-call-back {
  display: inline-flex;
  position: absolute;
  left: 14px;
  /* под шапкой, а не под ней: на живом звонке .bd-top поднята выше
     оверлея (z 56 против 55) и накрывала кнопку на top:14 — клик уходил
     в шапку (чек-лист 27.09). */
  top: 68px;
  z-index: 2;
  font-size: var(--text-caption);
  padding: 10px 18px;
}