/* =====================================================================
   Файл: public/assets/css/components.css
   Компоненты интерфейса. Один набор на все темы — вид берётся из токенов.
   Отличия раскладки тем помечены [data-theme="A|B|C"].
   ===================================================================== */

/* ---------- Контейнер страницы ---------- */
.page {
  max-width: var(--container);
  margin: 0 auto;
  padding: 32px var(--gutter) 64px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (max-width: 640px) { .page { padding: 20px var(--gutter) 40px; gap: 18px; } }

/* ---------- Логотип «BOU learn» ---------- */
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.logo img { height: 44px; width: auto; }
.logo-plate {
  font-family: var(--font-head); font-weight: 800; font-size: 28px; letter-spacing: 2px; line-height: 1.2;
  background: var(--logo-plate-bg); color: var(--logo-plate-text);
  padding: 6px 14px; border-radius: 12px;
}
.logo-suffix { font-family: var(--font-head); font-weight: 800; font-size: 26px; color: var(--logo-suffix); }
/* B: пиксельный шрифт, без скругления, тень тёмным тоном */
[data-theme="B"] .logo { gap: 14px; }
[data-theme="B"] .logo-plate { font-size: 22px; letter-spacing: 0; padding: 10px 14px; border-radius: 0; box-shadow: 4px 4px 0 var(--logo-plate-shadow, #8A6E10); font-weight: 400; }
[data-theme="B"] .logo-suffix { font-size: 16px; letter-spacing: 1px; font-weight: 400; }
/* C: сдержанно, Manrope */
[data-theme="C"] .logo { gap: 10px; }
[data-theme="C"] .logo-plate { font-size: 22px; letter-spacing: 3px; padding: 6px 12px; border-radius: 8px; }
[data-theme="C"] .logo-suffix { font-size: 20px; font-weight: 600; }
@media (max-width: 640px) {
  .logo { gap: 8px; }
  .logo-plate { font-size: 22px; padding: 4px 12px; border-radius: 10px; }
  .logo-suffix { font-size: 21px; }
  [data-theme="B"] .logo-plate { font-size: 16px; padding: 8px 10px; box-shadow: 3px 3px 0 var(--logo-plate-shadow, #8A6E10); }
  [data-theme="B"] .logo-suffix { font-size: 11px; }
  [data-theme="C"] .logo-plate { font-size: 18px; padding: 5px 10px; }
  [data-theme="C"] .logo-suffix { font-size: 17px; }
}

/* ---------- Кнопки ---------- */
.btn {
  font-family: var(--font-ui); font-weight: var(--w-ui);
  font-size: calc(var(--fs-btn) * var(--scale));
  min-height: var(--tap); height: 52px; padding: 0 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--radius-btn);
  background: var(--btn2-bg); color: var(--btn2-text); border: var(--btn2-border);
  box-shadow: var(--shadow-btn);
  white-space: nowrap; text-decoration: none; line-height: 1.2;
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease), background-color 120ms var(--ease);
}
.btn-ic, .btn-clock { display: inline-flex; flex: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); border: var(--primary-border); box-shadow: var(--accent-shadow); font-size: calc(var(--fs-btn-main) * var(--scale)); }
.btn-ask { background: var(--accent-2); color: var(--on-accent-2); border: var(--accent-2-border); box-shadow: var(--accent-2-shadow); }
.btn-icon { width: 48px; height: 48px; padding: 0; flex: none; }
.btn-ask-ic { background: var(--accent-2); color: var(--on-accent-2); border: var(--accent-2-border); box-shadow: var(--accent-2-shadow); }
.btn-xl { height: 60px; padding: 0 28px; }
.btn-block { width: 100%; }
.btn-link { background: none; border: 0; box-shadow: none; height: auto; min-height: var(--tap); padding: 0 4px; font-family: var(--font-body); font-weight: 600; font-size: calc(var(--fs-small) * var(--scale)); color: var(--text-muted); }
/* Нажатие: у A и B — кнопка «вдавливается» в тень */
:root[data-theme="A"] .btn:active, :root[data-theme="B"] .btn:active { transform: translate(3px, 3px); box-shadow: none; }
:root[data-theme="C"] .btn:hover { filter: brightness(.97); }
:root[data-theme="C"] .btn-primary:hover { filter: brightness(1.1); }
/* B: заглавные пиксельные надписи */
[data-theme="B"] .btn:not(.btn-link) { text-transform: uppercase; }
[data-theme="B"] .btn-xl { height: 64px; padding: 0 24px; }
[data-theme="B"] .btn-primary.btn-xl { padding: 0 24px; }
[data-theme="B"] .hdr .btn-secondary, [data-theme="B"] .hdr .lang-compact { background: var(--surface); }
[data-theme="C"] .btn-ask { font-family: var(--font-ui); }
/* Серая кнопка «в работе»: приглушена + часики */
.is-soon { opacity: .5; }
.is-soon:hover { opacity: .65; }
@media (max-width: 640px) {
  .btn { height: 50px; padding: 0 14px; }
  .btn-xl { height: 58px; }
  [data-theme="B"] .btn-xl { height: 56px; }
  .btn-icon { width: 48px; height: 48px; padding: 0; }
}

/* ---------- Пара кнопок на всю ширину (телефон) ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.btn-pair .btn { white-space: normal; text-align: center; padding: 0 8px; }

/* ---------- Шапка A и B ---------- */
.hdr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.hdr-search { flex: 1 1 320px; max-width: 520px; }
.hdr-actions { display: flex; align-items: center; gap: 12px; }
@media (max-width: 640px) { .hdr { flex-wrap: nowrap; gap: 8px; } .hdr-actions { gap: 10px; } }

/* ---------- Поиск «Я хочу» ---------- */
.search-wrap { position: relative; }
.search {
  display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px;
  background: var(--surface); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-field);
  cursor: text;
}
.search:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.search-ic { display: inline-flex; color: var(--text); }
.search-prefix { font-weight: 800; white-space: nowrap; }
.search-input { border: 0; outline: 0; background: transparent; font-size: calc(16px * var(--scale)); flex: 1; min-width: 0; color: var(--text); }
.search-input::placeholder { color: var(--text); opacity: .45; }
.search-input::-webkit-search-cancel-button { cursor: pointer; }
[data-theme="B"] .search { padding: 0 16px; }
[data-theme="B"] .search-ic { color: var(--accent); }
[data-theme="B"] .search-input::placeholder { color: var(--text-muted); opacity: .6; }
[data-theme="C"] .search-ic { color: var(--text-muted); }
.search-c .search { height: 60px; padding: 0 20px; }
.search-c .search-input { font-size: calc(17px * var(--scale)); }
@media (max-width: 900px) { .search-c .search { height: 52px; padding: 0 14px; border-radius: 12px; } .search-c .search-input { font-size: 16px; } }
.search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20;
  background: var(--surface); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 4px;
}
:root[data-theme="C"] .search-results { box-shadow: 0 12px 32px rgba(17, 24, 39, .12); }
.search-item { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 8px 12px; border-radius: calc(var(--radius) / 2); color: var(--text); text-decoration: none; font-weight: 700; }
.search-item:hover, .search-item:focus { background: var(--surface-2); }
.search-item-ic { color: var(--icon); display: inline-flex; }
.search-empty { padding: 8px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* ---------- Переключатель языка ---------- */
.lang { display: flex; background: var(--surface); border: var(--border-w) solid var(--border-strong); border-radius: 16px; padding: 3px; height: 52px; box-shadow: var(--shadow-btn); }
.lang-btn { width: 46px; border: 0; border-radius: 11px; background: transparent; font-family: var(--font-ui); font-weight: 800; font-size: calc(15px * var(--scale)); color: var(--text); }
.lang-btn[aria-pressed="true"] { background: #FFD23F; }
[data-theme="B"] .lang { padding: 0; border-radius: 0; background: var(--surface); }
[data-theme="B"] .lang-btn { font-size: 10px; border-radius: 0; font-weight: 400; }
[data-theme="B"] .lang-btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
[data-theme="C"] .lang { background: var(--bg); border-color: var(--border-strong); border-radius: 12px; padding: 4px; height: auto; }
[data-theme="C"] .lang-btn { flex: 1; height: 40px; border-radius: 9px; font-size: calc(14px * var(--scale)); color: #374151; font-weight: 700; }
[data-theme="C"] .lang-btn[aria-pressed="true"] { background: var(--accent); color: #fff; font-weight: 800; }
[data-theme="C"] .hdr-c .lang { background: var(--surface); border-radius: 10px; padding: 3px; }
[data-theme="C"] .hdr-c .lang-btn { width: 44px; height: 38px; flex: none; font-size: 13px; border-radius: 8px; }
/* Компактный «RU ▾» со списком */
.lang-pop { position: relative; }
.lang-compact { height: 48px; padding: 0 10px; gap: 4px; }
.lang-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 200px;
  background: var(--surface); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-btn);
  box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.lang-opt { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 0 12px; border: 0; background: transparent; border-radius: 10px; font-weight: 800; text-align: left; color: var(--text); }
.lang-opt.is-on { background: var(--surface-2); }
.lang-opt-name { font-weight: 600; flex: 1; font-family: var(--font-body); }
[data-theme="B"] .lang-opt { font-family: var(--font-ui); font-size: 10px; border-radius: 0; }
[data-theme="B"] .lang-opt-name { font-size: 15px; }

/* ---------- Полоска прогресса ---------- */
.bar { display: block; height: var(--bar-h); background: var(--track); border: var(--track-border); border-radius: 999px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--progress); transition: width 600ms var(--ease); }
[data-theme="B"] .bar { border-radius: 0; }
.bar-total { height: 18px; }
@media (max-width: 640px) { .bar-total { height: 16px; } }
.total { display: flex; flex-direction: column; gap: 8px; }
.total-row { display: flex; justify-content: space-between; font-weight: 800; font-size: calc(var(--fs-small) * var(--scale)); }
/* Сегменты (B): 12 клеток */
.segs { display: flex; gap: 4px; }
.seg { width: 28px; height: 18px; background: var(--border); }
.seg.is-on { background: var(--progress); }
@media (max-width: 640px) { .segs { gap: 3px; } .seg { flex: 1; width: auto; height: 14px; } }

/* ---------- Крупные блоки-карточки ---------- */
.card-lg { background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* ---------- Заголовок над сеткой ---------- */
.grid-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.grid-title { font-family: var(--font-head); font-weight: var(--w-head); font-size: calc(var(--fs-h2) * var(--scale)); line-height: 1.3; flex: 1; }
.grid-hint { font-weight: 600; font-size: calc(16px * var(--scale)); }
.view-toggle { color: var(--text-muted); font-size: calc(15px * var(--scale)); }
.link-btn { border: 0; background: none; padding: 8px 0; color: var(--accent); font-weight: 600; text-decoration: underline; min-height: var(--tap); }

/* ---------- Сетка разделов ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); gap: var(--gap-grid); }
@media (max-width: 640px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Карточка раздела ---------- */
.sec-card {
  position: relative; display: flex; flex-direction: column; gap: 14px; text-align: left;
  background: var(--surface); color: var(--text);
  border: var(--border-w) solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.sec-top { display: block; }
.sec-body { display: flex; flex-direction: column; gap: 14px; }
.sec-tile {
  height: 140px; display: flex; align-items: center; justify-content: center;
  background: var(--tile, var(--tile-bg)); color: var(--icon);
  border: var(--border-w) solid var(--border); border-radius: 16px;
}
.sec-tile .ic { width: 72px; height: 72px; }
.sec-num { font-weight: 800; font-size: calc(var(--fs-small) * var(--scale)); }
.sec-title { font-family: var(--font-head); font-weight: 700; font-size: calc(var(--fs-card) * var(--scale)); line-height: 1.2; min-height: 2.4em; }
.sec-status { font-weight: 700; font-size: calc(var(--fs-small) * var(--scale)); color: var(--text-muted); }
.badge-new {
  position: absolute; top: -14px; right: 16px; z-index: 1;
  background: var(--new-bg); color: var(--new-text);
  border: var(--border-w) solid var(--border); border-radius: 999px; padding: 2px 12px;
  font-weight: 800; font-size: calc(13px * var(--scale)); letter-spacing: 1px;
  animation: bou-pop 400ms var(--ease) both;
}
/* Наведение и рекомендуемый следующий раздел */
:root[data-theme="A"] .sec-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--border); }
:root[data-theme="A"] .sec-card.is-next { box-shadow: 6px 6px 0 var(--accent), 0 0 0 3px var(--accent); }
@media (max-width: 640px) {
  .sec-card { padding: 10px; gap: 8px; }
  .sec-body { gap: 8px; }
  .sec-tile { height: 88px; border-radius: 12px; }
  .sec-tile .ic { width: 46px; height: 46px; }
  .sec-num { display: none; }
  .sec-title { min-height: 2.4em; }
  .badge-new { top: -12px; right: 10px; padding: 1px 8px; font-size: 11px; }
  [data-theme="A"] .bar { border-width: 2px; }
}

/* B: карточки-«уровни» */
[data-theme="B"] .sec-card { gap: 12px; padding: 14px; }
[data-theme="B"] .sec-body { gap: 12px; }
[data-theme="B"] .sec-tile { height: 130px; border-radius: 0; }
[data-theme="B"] .sec-tile .ic { width: 68px; height: 68px; }
[data-theme="B"] .ic * { stroke-linecap: square; stroke-linejoin: miter; }
[data-theme="B"] .sec-num { font-family: var(--font-head); font-weight: 400; font-size: 12px; color: var(--accent); }
[data-theme="B"] .sec-title { font-family: var(--font-body); font-size: calc(20px * var(--scale)); line-height: 1.25; }
[data-theme="B"] .sec-status { font-weight: 400; }
[data-theme="B"] .badge-new { top: -14px; right: 12px; border: 0; border-radius: 0; padding: 6px 8px; font-family: var(--font-head); font-weight: 400; font-size: 10px; letter-spacing: 0; animation: bou-blink 1s steps(1) 3; }
[data-theme="B"] .sec-card:hover { border-color: var(--accent); }
[data-theme="B"] .sec-card.is-next { border-color: var(--accent); box-shadow: 4px 4px 0 #8A6E10; }
@media (max-width: 640px) {
  [data-theme="B"] .sec-card { padding: 10px; gap: 8px; }
  [data-theme="B"] .sec-body { gap: 8px; }
  [data-theme="B"] .sec-tile { height: 80px; border-width: 3px; }
  [data-theme="B"] .sec-tile .ic { width: 42px; height: 42px; }
  [data-theme="B"] .sec-num { display: block; font-size: 8px; }
  [data-theme="B"] .sec-title { font-size: 15px; }
  [data-theme="B"] .bar { border-width: 2px; }
  [data-theme="B"] .badge-new { top: -12px; right: 8px; font-size: 8px; padding: 5px 6px; }
}

/* C: иконка в голубом квадрате, бейдж «Новое · N» рядом */
[data-theme="C"] .sec-card { padding: 20px; gap: 14px; }
[data-theme="C"] .sec-top { display: flex; align-items: flex-start; justify-content: space-between; }
[data-theme="C"] .sec-tile { width: 64px; height: 64px; border: 0; border-radius: 16px; }
[data-theme="C"] .sec-tile .ic { width: 34px; height: 34px; }
[data-theme="C"] .sec-body { gap: 14px; }
[data-theme="C"] .sec-num { font-weight: 600; font-size: calc(var(--fs-small) * var(--scale)); color: var(--text-soft); margin-bottom: -10px; }
[data-theme="C"] .sec-title { font-size: calc(18px * var(--scale)); line-height: 1.3; min-height: 2.6em; }
[data-theme="C"] .sec-status { font-weight: 400; }
[data-theme="C"] .badge-new { position: static; border: 0; padding: 4px 10px; font-weight: 700; font-size: calc(12px * var(--scale)); letter-spacing: 0; }
[data-theme="C"] .sec-card:hover { border-color: #BFD0FF; box-shadow: 0 6px 18px rgba(17, 24, 39, .06); }
[data-theme="C"] .sec-card.is-next { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* C — список строк: на узком экране всегда, на ПК — по переключателю «списком» */
[data-theme="C"] .grid.is-list { grid-template-columns: 1fr; gap: 10px; }
[data-theme="C"] .grid.is-list .sec-card { flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; }
[data-theme="C"] .grid.is-list .sec-top { flex: none; }
[data-theme="C"] .grid.is-list .sec-tile { width: 48px; height: 48px; border-radius: 12px; }
[data-theme="C"] .grid.is-list .sec-tile .ic { width: 26px; height: 26px; }
[data-theme="C"] .grid.is-list .sec-top .badge-new { display: none; }
[data-theme="C"] .grid.is-list .sec-body { flex: 1; min-width: 0; gap: 6px; }
[data-theme="C"] .grid.is-list .sec-num { display: none; }
[data-theme="C"] .grid.is-list .sec-title { min-height: 0; font-size: calc(16px * var(--scale)); }
[data-theme="C"] .grid.is-list .bar { height: 5px; }
[data-theme="C"] .grid.is-list .sec-status { font-size: calc(12px * var(--scale)); }
@media (max-width: 900px) {
  [data-theme="C"] .grid:not(.grid-cats) { grid-template-columns: 1fr; gap: 10px; }
  [data-theme="C"] .grid:not(.grid-cats) .sec-card { flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; }
  [data-theme="C"] .grid:not(.grid-cats) .sec-top { flex: none; }
  [data-theme="C"] .grid:not(.grid-cats) .sec-tile { width: 48px; height: 48px; border-radius: 12px; }
  [data-theme="C"] .grid:not(.grid-cats) .sec-tile .ic { width: 26px; height: 26px; }
  [data-theme="C"] .grid:not(.grid-cats) .sec-top .badge-new { display: none; }
  [data-theme="C"] .grid:not(.grid-cats) .sec-body { flex: 1; min-width: 0; gap: 6px; }
  [data-theme="C"] .grid:not(.grid-cats) .sec-num { display: none; }
  [data-theme="C"] .grid:not(.grid-cats) .sec-title { min-height: 0; font-size: 16px; }
  [data-theme="C"] .grid:not(.grid-cats) .bar { height: 5px; }
  [data-theme="C"] .grid:not(.grid-cats) .sec-status { font-size: 12px; }
}

/* ---------- Карточка категории ---------- */
.grid-cats { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.cat-card { position: relative; display: flex; flex-direction: column; gap: 12px; text-align: left; padding: 20px; background: var(--surface); color: var(--text); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.cat-tile { height: 180px; display: flex; align-items: center; justify-content: center; background: var(--tile); color: var(--icon); border: var(--border-w) solid var(--border); border-radius: var(--radius); }
.cat-tile .ic { width: 88px; height: 88px; }
.cat-title { font-family: var(--font-head); font-weight: var(--w-head); font-size: calc(24px * var(--scale)); line-height: 1.2; }
[data-theme="B"] .cat-title { font-size: 14px; line-height: 1.6; }
.cat-count { color: var(--text-muted); font-weight: 700; }
@media (max-width: 640px) { .grid-cats { grid-template-columns: 1fr; } .cat-tile { height: 120px; } }

/* =====================================================================
   Тема A — главный экран
   ===================================================================== */
.hero-row { display: flex; flex-wrap: wrap; gap: 24px; }
.home-a .hero { flex: 2 1 520px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.hero-h { font-family: var(--font-head); font-weight: var(--w-head); font-size: calc(var(--fs-h1) * var(--scale)); line-height: 1.1; }
.hero-p { font-size: calc(var(--fs-body) * var(--scale)); line-height: 1.5; }
.home-a .face-card { flex: 1 1 300px; background: var(--face-card); padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.bubble { position: relative; background: var(--surface); border: var(--border-w) solid var(--border); border-radius: 20px; padding: 14px 18px; font-weight: 700; font-size: calc(17px * var(--scale)); line-height: 1.4; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -12px; width: 18px; height: 18px; background: var(--surface); border-right: var(--border-w) solid var(--border); border-bottom: var(--border-w) solid var(--border); transform: translateX(-50%) rotate(45deg); }
.face-ring { display: block; width: 150px; height: 150px; background: var(--surface); border: var(--border-w) solid var(--border); border-radius: 50%; padding: 6px; flex: none; }
.face { display: block; width: 100%; height: 100%; color: var(--face-line); }
.face img { width: 100%; height: 100%; object-fit: contain; }
/* Портрет-картинка в круге: обрезаем по кругу, лицо — по центру сверху */
.face-ring .face, .face-dot .face { border-radius: 50%; overflow: hidden; }
.face-ring .face img, .face-dot .face img { object-fit: cover; object-position: 50% 12%; }
.face svg { transition: transform var(--dur) var(--ease); }
.face-caption { font-size: calc(14px * var(--scale)); font-weight: 700; }
.hero-mob { display: flex; flex-direction: column; gap: 18px; }
.face-card-row { flex: none !important; display: flex !important; flex-direction: row !important; align-items: center; gap: 12px; padding: 14px !important; background: var(--face-card); }
.face-card-row .face-ring { width: 76px; height: 76px; padding: 4px; }
.face-card-row .hero-h { font-size: calc(24px * var(--scale)); }
.hero-p-mob { font-size: calc(15px * var(--scale)); font-weight: 700; line-height: 1.35; }

/* =====================================================================
   Тема B — главный экран (миссия + HUD)
   ===================================================================== */
.b-shell { min-height: 100vh; display: flex; flex-direction: column; }
.b-shell > .page { flex: 1; width: 100%; padding-bottom: 40px; }
.mission { background: var(--surface); border: var(--border-w) solid var(--border); padding: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.mission-main { display: flex; flex-direction: column; gap: 14px; flex: 1 1 480px; }
.mission-player { font-family: var(--font-head); font-size: calc(12px * var(--scale)); color: var(--accent); line-height: 1.6; }
.mission-h { font-family: var(--font-head); font-weight: 400; font-size: calc(var(--fs-h1) * var(--scale)); line-height: 1.5; }
.mission-p { color: var(--text-muted); line-height: 1.5; }
.mission-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.mission-actions .btn-secondary { background: var(--surface-2); height: 64px; padding: 0 18px; }
.mission-actions-mob { display: flex; flex-direction: column; gap: 12px; }
.mission-actions-mob .btn-secondary { background: var(--surface-2); height: 48px; }
@media (max-width: 640px) {
  .mission { padding: 16px; gap: 12px; flex-direction: column; align-items: stretch; }
  .mission-main { flex: none; gap: 12px; }
  .mission-player { font-size: 10px; }
  .mission-p { font-size: 16px; line-height: 1.4; }
  .home-b .grid-title { font-size: 13px; }
}
.hud { background: var(--surface); border-top: var(--border-w) solid var(--border); padding: 0 var(--gutter); position: sticky; bottom: 0; z-index: 10; }
.hud-in { max-width: var(--container); margin: 0 auto; display: flex; align-items: stretch; justify-content: center; }
.hud-cell { flex: 1 1 160px; padding: 16px; border-right: var(--border-w) solid var(--border); display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; }
.hud-cell:last-child { border-right: 0; }
.hud-val { font-family: var(--font-head); font-size: 22px; }
.hud-label { font-family: var(--font-head); font-size: 9px; color: var(--text-muted); }
.hud-progress .hud-val { color: var(--progress); }
.hud-sections .hud-val { color: var(--accent); }
.hud-streak .hud-val { color: var(--hud-streak); }
.hud-points .hud-val { color: var(--hud-points); }
.hud-face { flex: 0 0 150px; padding: 12px; border-right: var(--border-w) solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hud-face .face { width: 104px; height: 104px; }
.hud-face-cap { font-size: 11px; color: var(--text-muted); }
@media (max-width: 640px) {
  .hud { padding: 0; }
  .hud-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hud-streak { display: none !important; }
  .hud-cell { padding: 12px 6px; gap: 6px; }
  .hud-val { font-size: 15px; }
  .hud-label { font-size: 7px; }
  .hud-face { padding: 8px; justify-content: center; }
  .hud-face .face { width: 76px; height: 76px; }
}

/* =====================================================================
   Тема C — главный экран (левое меню на ПК, нижнее меню на телефоне)
   ===================================================================== */
@media (max-width: 900px) { .only-wide { display: none !important; } }
@media (min-width: 901px) { .only-narrow { display: none !important; } }

.c-shell { display: flex; align-items: stretch; min-height: 100vh; }
.side { flex: 0 0 240px; background: var(--surface); border-right: 1px solid var(--border); padding: 28px 18px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side-logo { padding: 0 10px 22px; }
.side-link { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 14px; border-radius: 10px; color: #374151; font-weight: 600; font-size: calc(16px * var(--scale)); text-decoration: none; border: 0; background: none; text-align: left; width: 100%; }
.side-link.is-on { background: var(--surface-2); color: var(--accent); font-weight: 700; }
.side-link:hover:not(.is-on) { background: var(--bg); }
.side-link .btn-clock { margin-left: auto; }
.side-spacer { flex: 1; min-height: 24px; }
.side .lang { margin-bottom: 10px; }
.side .btn-ask { height: 52px; font-size: calc(15px * var(--scale)); }
.c-main { flex: 1; min-width: 0; padding: 36px 32px 56px; display: flex; flex-direction: column; gap: 28px; max-width: calc(1100px + 64px); }
.c-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.c-greet { display: flex; align-items: center; gap: 12px; }
.c-h1 { font-family: var(--font-head); font-weight: 800; font-size: calc(var(--fs-h1) * var(--scale)); line-height: 1.2; }
.c-sub { color: var(--text-muted); font-size: calc(17px * var(--scale)); margin-top: 6px; }
.face-chip { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 16px 10px 10px; }
.face-dot { display: block; width: 56px; height: 56px; border-radius: 50%; background: var(--surface-2); flex: none; overflow: hidden; }
.face-chip-text { font-size: calc(14px * var(--scale)); font-weight: 600; color: #374151; max-width: 220px; line-height: 1.4; }
.cont-c { background: var(--accent); color: #fff; border-radius: 18px; padding: 26px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.cont-c-main { display: flex; flex-direction: column; gap: 10px; flex: 1 1 360px; }
.cont-c-label { font-size: calc(14px * var(--scale)); font-weight: 700; letter-spacing: 1px; color: #DBE5FF; text-transform: uppercase; }
.cont-c-title { font-weight: 800; font-size: calc(26px * var(--scale)); line-height: 1.25; }
.bar-on-accent { height: 8px; background: #3B67E8; border: 0; max-width: 420px; }
.bar-on-accent .bar-fill { background: #fff; }
.cont-c-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cont-c-sec { display: contents; }
.btn-on-accent { background: #fff; color: var(--accent); border: 0; font-weight: 800; font-size: calc(16px * var(--scale)); padding: 0 24px; }
.cont-c .btn-secondary { background: transparent; color: #fff; border: 2px solid #9DB5FF; }
.c-main .grid-head .grid-title { flex: 1; }
.c-main .report-row { margin-top: -8px; }
@media (max-width: 900px) {
  .c-shell { display: block; }
  .c-main { padding: 18px 16px 104px; gap: 16px; max-width: none; }
  .hdr-c { flex-wrap: nowrap; }
  .hdr-c .hdr-actions { gap: 8px; }
  .hdr-c .btn-icon { width: 46px; height: 46px; border-radius: 12px; border-color: var(--border-strong); }
  .c-h1 { font-size: calc(22px * var(--scale)); }
  .c-sub { font-size: calc(14px * var(--scale)); margin-top: 2px; }
  .cont-c { padding: 18px; flex-direction: column; align-items: stretch; gap: 10px; border-radius: 16px; }
  .cont-c-main { flex: none; }
  .cont-c-label { font-size: 12px; }
  .cont-c-title { font-size: calc(20px * var(--scale)); }
  .bar-on-accent { max-width: none; }
  .cont-c-actions .btn-on-accent { width: 100%; height: 50px; margin-top: 4px; }
  .c-main .btn-pair .btn { height: 48px; font-size: 15px; }
  .c-main .grid-title { font-size: 20px; }
}
.bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--surface); border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px 4px calc(10px + env(safe-area-inset-bottom)); }
.bnav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; min-height: 48px; color: var(--text-muted); font-weight: 600; font-size: 11px; text-decoration: none; border: 0; background: none; }
.bnav-item.is-on { color: var(--accent); font-weight: 700; }

/* ---------- «Сообщить об ошибке» ---------- */
.report-row { display: flex; justify-content: flex-end; }

/* ---------- Окна и затемнение ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(10, 12, 20, .45); display: flex; align-items: center; justify-content: center; padding: 16px; animation: bou-in-c 200ms var(--ease) both; }
.dialog { width: min(440px, 100%); background: var(--surface); color: var(--text); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 28px; display: flex; flex-direction: column; gap: 14px; text-align: center; align-items: center; }
:root[data-theme="C"] .dialog { box-shadow: 0 24px 60px rgba(17, 24, 39, .2); }
.dialog-ic { color: var(--icon); }
.dialog-title { font-family: var(--font-head); font-weight: var(--w-head); font-size: calc(22px * var(--scale)); line-height: 1.35; }
[data-theme="B"] .dialog-title { font-size: 14px; line-height: 1.7; }
.dialog-text { color: var(--text-muted); }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; }

/* ---------- Меню (выезжает справа) ---------- */
.overlay-menu { justify-content: flex-end; align-items: stretch; padding: 0; }
.drawer { width: min(380px, 100%); height: 100%; overflow-y: auto; background: var(--surface); color: var(--text); border-left: var(--border-w) solid var(--border); padding: 20px; display: flex; flex-direction: column; gap: 4px; animation: bou-drawer 260ms var(--ease) both; }
@keyframes bou-drawer { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.drawer-title { font-family: var(--font-head); font-weight: var(--w-head); font-size: calc(24px * var(--scale)); }
[data-theme="B"] .drawer-title { font-size: 16px; }
.menu-item { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 12px; border: 0; background: none; border-radius: 12px; text-align: left; font-weight: 700; font-size: calc(16px * var(--scale)); color: var(--text); width: 100%; }
.menu-item:hover { background: var(--surface-2); }
.menu-item .btn-clock, .menu-item .switch { margin-left: auto; }
.menu-ic { display: inline-flex; color: var(--icon); }
.menu-group { padding: 12px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); }
:root[data-theme="A"] .menu-group, :root[data-theme="B"] .menu-group { border-top-width: 2px; }
.menu-label { font-weight: 800; font-size: calc(14px * var(--scale)); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.menu-note { font-weight: 600; color: var(--text-muted); font-size: calc(12px * var(--scale)); }
.menu-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px; border-radius: 999px; border: var(--border-w) solid var(--border-strong); background: var(--surface); color: var(--text); font-weight: 700; font-size: calc(14px * var(--scale)); }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
[data-theme="A"] .chip[aria-pressed="true"] { border-color: var(--border); }
[data-theme="B"] .chip { border-radius: 0; }
.menu-group .lang { box-shadow: none; align-self: flex-start; }
.switch { width: 46px; height: 28px; border-radius: 999px; background: var(--border-strong); position: relative; flex: none; transition: background var(--dur); }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform var(--dur) var(--ease); }
.menu-toggle[aria-checked="true"] .switch { background: var(--progress); }
.menu-toggle[aria-checked="true"] .switch::after { transform: translateX(18px); }
[data-theme="B"] .switch, [data-theme="B"] .switch::after { border-radius: 0; }

/* ---------- Подсказки-«пузыри» ---------- */
.coach { position: absolute; z-index: 60; background: var(--surface); color: var(--text); border: var(--border-w) solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 16px; display: flex; flex-direction: column; gap: 12px; animation: bou-pop 300ms var(--ease) both; }
:root[data-theme="C"] .coach { border-color: var(--accent); box-shadow: 0 16px 40px rgba(17, 24, 39, .18); }
.coach::before { content: ''; position: absolute; left: var(--arrow-x, 24px); width: 16px; height: 16px; background: var(--surface); border: var(--border-w) solid var(--border); transform: translateX(-50%) rotate(45deg); }
:root[data-theme="C"] .coach::before { border-color: var(--accent); }
.coach.is-below::before { top: -10px; border-right: 0; border-bottom: 0; }
.coach.is-above::before { bottom: -10px; border-left: 0; border-top: 0; }
.coach-text { font-weight: 700; line-height: 1.4; }
.coach-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.coach-count { color: var(--text-muted); font-size: calc(var(--fs-small) * var(--scale)); font-weight: 700; }

/* =====================================================================
   Приветствие и выбор возраста (до выбора — нейтральная тема C)
   ===================================================================== */
.welcome, .age { max-width: 960px; margin: 0 auto; min-height: 100vh; padding: 48px var(--gutter); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; text-align: center; }
.welcome-line { font-weight: 800; font-size: calc(30px * var(--scale)); line-height: 1.3; max-width: 720px; }
.welcome-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; width: 100%; counter-reset: step; }
.welcome-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; animation: bou-in-c 400ms var(--ease) both; animation-delay: calc(var(--i) * 120ms + 150ms); }
.welcome-step:not(:last-child)::after { content: '→'; position: absolute; right: -24px; top: 50%; transform: translate(50%, -50%); line-height: 1; color: var(--accent); font-weight: 800; font-size: 22px; }
.welcome-step-pic { width: 88px; height: 88px; border-radius: 24px; background: var(--surface-2); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.welcome-step-title { font-weight: 800; font-size: calc(20px * var(--scale)); }
.welcome-step-sub { color: var(--text-muted); font-size: calc(15px * var(--scale)); line-height: 1.35; }
.welcome-start { height: 60px; padding: 0 48px; font-size: 18px; }
.welcome-made { color: var(--text-soft); font-size: calc(13px * var(--scale)); }
@media (max-width: 640px) {
  .welcome, .age { padding: 28px 16px; gap: 24px; justify-content: flex-start; }
  .welcome-line { font-size: 22px; }
  .welcome-steps { grid-template-columns: 1fr; gap: 12px; }
  .welcome-step { flex-direction: row; text-align: left; padding: 14px; gap: 14px; }
  .welcome-step:not(:last-child)::after { content: '↓'; right: 50%; top: auto; bottom: -12px; transform: translate(50%, 50%); font-size: 16px; }
  .welcome-step-pic { width: 64px; height: 64px; flex: none; border-radius: 18px; }
  .welcome-step-pic .ic { width: 40px; height: 40px; }
  .welcome-step-title { display: block; }
  .welcome-start { width: 100%; }
}
@media (max-width: 640px) { .welcome-step { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; } .welcome-step-pic { grid-row: 1 / 3; } }

.age-h { font-weight: 800; font-size: calc(30px * var(--scale)); }
.age-sub { color: var(--text-muted); margin-top: -18px; }

/* =====================================================================
   Экран выбора возраста: общий фон + три аватарки с пояснениями.
   Наведение (на телефоне — касание) включает тему возраста на ВЕСЬ экран:
   все цвета, шрифты и скругления ниже берутся из токенов темы.
   Скругления «наследуются»: внутренний радиус = внешний − отступ.
   --age-r   радиус общего блока (A — круглее, B — без скругления, C — сдержанно)
   --age-pad отступ общего блока до карточек
   ===================================================================== */
.age { transition: color 300ms var(--ease); }
body { transition: background-color 300ms var(--ease); }
.age-h { font-family: var(--font-head); font-weight: var(--w-head); }
[data-theme="B"] .age-h { font-size: 20px; line-height: 1.5; }
.age-sub { min-height: 1.5em; }

.age-panel {
  --age-r: 32px; --age-pad: 14px;
  width: 100%; background: var(--surface-2); border: var(--border-w) solid var(--border);
  border-radius: var(--age-r); padding: var(--age-pad); box-shadow: var(--shadow-lg);
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease);
}
:root[data-theme="A"] .age-panel { --age-r: 40px; }
:root[data-theme="B"] .age-panel { --age-r: 0px; }
:root[data-theme="C"] .age-panel { box-shadow: 0 12px 32px rgba(17, 24, 39, .06); }
.age-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--age-pad); }

/* Карточка: аватарка → название → возраст → «что тебя там ждёт» → «Выбрать» */
.age-option {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 28px 22px 20px; cursor: pointer;
  background: var(--surface); color: var(--text);
  border: var(--border-w) solid var(--border); border-radius: calc(var(--age-r) - var(--age-pad));
  box-shadow: var(--shadow);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), background-color 300ms var(--ease);
}
.age-option:hover, .age-option.is-active { transform: translateY(-4px); border-color: var(--accent); }
/* Аватарка: одинаковый круг у всех, рамка — цвет акцента темы */
.age-face {
  display: block; width: 120px; height: 120px; flex: none; margin-bottom: 6px;
  border-radius: 50%; overflow: hidden; background: var(--surface-2);
  border: 3px solid var(--border-strong); transition: border-color 180ms var(--ease);
}
.age-option:hover .age-face, .age-option.is-active .age-face { border-color: var(--accent); }
:root[data-theme="B"] .age-face { border-radius: 0; }
.age-face .face { width: 100%; height: 100%; }
.age-face .face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.age-face .face-mascot { padding: 8px; }
/* Аватарки подростков и взрослых: иконка по центру круга, цвет — из темы */
.age-ava { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--icon); }
.age-ava-pad svg { width: 70%; height: 70%; }
.age-title { font-family: var(--font-head); font-weight: var(--w-head); font-size: calc(var(--fs-card) * 1.25 * var(--scale)); line-height: 1.3; }
:root[data-theme="B"] .age-title { font-size: 14px; text-transform: uppercase; line-height: 1.6; }
.age-years { font-weight: 700; color: var(--text-muted); font-size: calc(15px * var(--scale)); }
/* Пояснения: слева, с воздухом сверху */
.age-notes { align-self: stretch; display: flex; flex-direction: column; gap: 12px; margin-top: 14px; text-align: left; flex: 1; }
.age-note { display: flex; gap: 10px; align-items: flex-start; font-size: calc(15px * var(--scale)); line-height: 1.4; }
.age-note-ic { color: var(--accent); flex: none; margin-top: 1px; }
/* «Выбрать →» — настоящая кнопка, отделена линией */
.age-pick {
  align-self: stretch; display: flex; align-items: center; justify-content: space-between;
  min-height: var(--tap); margin-top: 10px; padding: 14px 2px 0;
  background: none; border: 0; border-top: 1px solid var(--border);
  font-family: var(--font-body); font-weight: 800; font-size: calc(16px * var(--scale)); color: var(--accent);
}
.age-pick-arrow { transition: transform 160ms var(--ease); }
.age-option:hover .age-pick-arrow, .age-option.is-active .age-pick-arrow { transform: translateX(4px); }

@media (max-width: 760px) {
  .age-h { font-size: 22px; }
  .age-panel { --age-pad: 10px; }
  .age-cards { grid-template-columns: 1fr; }
  /* Телефон: аватарка слева, название и возраст справа, пояснения и кнопка ниже */
  .age-option { display: grid; grid-template-columns: 76px 1fr; grid-template-areas: "face title" "face years" "notes notes" "pick pick"; column-gap: 14px; row-gap: 4px; align-items: center; text-align: left; padding: 16px; }
  .age-face { grid-area: face; width: 76px; height: 76px; margin: 0; }
  .age-title { grid-area: title; align-self: end; font-size: 20px; }
  .age-years { grid-area: years; align-self: start; font-size: 13px; }
  .age-notes { grid-area: notes; margin-top: 12px; gap: 8px; }
  .age-note { font-size: 14px; }
  .age-pick { grid-area: pick; }
}
.age-lang { display: flex; align-items: center; gap: 14px; }
.age-lang-label { font-weight: 700; color: var(--text-muted); }
.age-lang .lang { box-shadow: none; }

/* Фото-лицо (взрослые): деловой портрет на студийном фоне, в круге — лицо крупнее */
.face-photo { overflow: hidden; background: #6E6A66; }
.face-photo img { object-fit: cover; object-position: 50% 22%; }
.face-dot .face-photo img { transform: scale(1.3); transform-origin: 50% 30%; }

/* Пиксельное лицо: чёткие пиксели без размытия */
.face-pixel svg { image-rendering: pixelated; }

/* Имя ребёнка */
.name-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.name-card { width: min(460px, 100%); background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.name-face { display: block; width: 120px; height: 120px; border-radius: 50%; background: var(--face-card); border: var(--border-w) solid var(--border); padding: 6px; }
.name-title { font-family: var(--font-head); font-weight: 800; font-size: calc(28px * var(--scale)); }
.name-input { width: 100%; height: 60px; padding: 0 20px; font-size: 22px; font-weight: 800; text-align: center; border: var(--border-w) solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); }
.name-input:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.name-note { color: var(--text-muted); font-size: calc(15px * var(--scale)); font-weight: 600; }
.name-card .btn { width: 100%; height: 60px; }

/* ---------- Заглушка раздела ---------- */
.wip { padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.wip-tile { width: 140px; }
.wip-h { font-family: var(--font-head); font-weight: var(--w-head); font-size: calc(var(--fs-h1) * var(--scale)); line-height: 1.3; }
.wip-face { display: block; width: 96px; height: 96px; }
.wip-title { font-weight: 800; font-size: calc(20px * var(--scale)); }
.wip-text { color: var(--text-muted); }


/* =====================================================================
   Помощник: мышка (A), робот (B), портрет без фона (C).
   Всегда на экране, реагирует на результат: good — радуется, ok — кивает,
   bad — расстраивается (облачко с пояснением), done — праздник.
   ===================================================================== */
.hp { display: block; width: 100%; height: 100%; color: var(--text); }
.hp-body { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; }
.hp-svg { width: 100%; height: 100%; overflow: visible; }
.hp-robot .hp-svg { image-rendering: pixelated; }
.hp-photo img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 10px 16px rgba(17, 24, 39, .18)); }

/* Покой */
.hp-idle { animation: hp-hop .8s ease-in-out infinite; }
@keyframes hp-hop { 0%, 100% { transform: none; } 50% { transform: translateY(-4px) scale(.98, 1.03); } }
.hp-robot .hp-idle { animation: hp-bob 1s steps(2) infinite; }
@keyframes hp-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-4px); } }
.hp-photo .hp-idle { animation: hp-breathe 5s ease-in-out infinite; }
@keyframes hp-breathe { 0%, 100% { transform: none; } 50% { transform: translateY(-2px); } }
.hp-eyes { transform-box: fill-box; transform-origin: center; animation: hp-blink 4.5s infinite; }
@keyframes hp-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.hp-wave { animation: hp-wave .5s ease-in-out infinite alternate; }
@keyframes hp-wave { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }

/* Реакции */
.hp-r-good { animation: hp-jump .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hp-jump { 0% { transform: none; } 30% { transform: translateY(4px) scale(1.06, .92); } 60% { transform: translateY(-22px) scale(.96, 1.05); } 100% { transform: none; } }
.hp-r-ok { animation: hp-nod .7s ease-in-out; }
@keyframes hp-nod { 0%, 100% { transform: none; } 30% { transform: translateY(4px) rotate(2deg); } 60% { transform: translateY(-2px) rotate(-1deg); } }
.hp-r-bad { animation: hp-sad .8s ease-in-out; }
@keyframes hp-sad { 0% { transform: none; } 20% { transform: translateY(6px) rotate(-5deg); } 40% { transform: translateY(6px) rotate(5deg); } 60% { transform: translateY(6px) rotate(-3deg); } 100% { transform: translateY(3px); } }
.hp-r-done { animation: hp-flip .9s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes hp-flip { 0% { transform: none; } 40% { transform: translateY(-30px) rotate(180deg); } 80% { transform: translateY(-4px) rotate(360deg); } 100% { transform: rotate(360deg); } }
/* Робот — рывками */
.hp-robot .hp-r-good { animation: hp-jump .5s steps(5); }
.hp-robot .hp-r-bad { animation: hp-shake .6s steps(6); }
@keyframes hp-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.hp-robot .hp-r-done { animation: hp-flash 1s steps(8); }
@keyframes hp-flash { 0%, 50%, 100% { filter: none; transform: none; } 25%, 75% { filter: brightness(1.8); transform: translateY(-8px); } }
/* Портрет — сдержанно */
.hp-photo .hp-r-good, .hp-photo .hp-r-ok, .hp-photo .hp-r-done { animation: hp-nodc .6s ease-in-out; }
@keyframes hp-nodc { 0%, 100% { transform: none; } 40% { transform: translateY(4px); } }
.hp-photo .hp-r-bad { animation: hp-tilt .7s ease-in-out; }
@keyframes hp-tilt { 0%, 100% { transform: none; } 35% { transform: rotate(-3deg); } 70% { transform: rotate(2deg); } }

/* Место на главном экране детей: вместо круга — помощник в полный рост */
.hp-spot { display: block; width: 150px; height: 200px; flex: none; }
.hp-spot-sm { width: 66px; height: 88px; }
/* HUD подростков: робот в центральной ячейке */
.hud-face .hp { width: 86px; height: 104px; margin: 0 auto; }
@media (max-width: 640px) { .hud-face .hp { width: 64px; height: 76px; } }
/* Взрослые: в круге — голова и плечи портрета */
.face-dot .hp-photo { border-radius: 50%; overflow: hidden; background: var(--surface-2); }
.face-dot .hp-photo img { object-fit: cover; object-position: 50% 0; filter: none; }
.face-dot .hp-body { animation: none; }
/* Экран выбора возраста: помощник целиком в круге */
.age-face .hp { padding: 10px 14px 4px; }
.age-face .hp-robot { padding: 14px 20px 8px; }

/* Плавающий помощник (экраны кроме главного): персонаж в круге + облачко.
   ПК: круг в правом нижнем углу, облачко над ним; справа у страницы зарезервировано место.
   Телефон: круг в правом верхнем углу, облачко ПОД ним — кнопки «Дальше» внизу всегда свободны.
   «×» на круге прячет помощника; на его месте остаётся кнопка «Помощник». */
/* Запас снизу, чтобы низ страницы можно было прокрутить выше круга помощника (справа запаса нет) */
.page.has-helper { padding-bottom: 64px; }
.hp-float {
  --hp-size: 104px;                                 /* диаметр круга */
  position: fixed; z-index: 30; display: flex; flex-direction: row; align-items: flex-end; gap: 16px; pointer-events: none;
  right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.hp-dock { position: relative; pointer-events: auto; }
/* Круг: фон поверхности + рамка акцента, персонаж вписан внутрь и стоит на «полу» круга */
.hp-ring {
  position: relative; display: grid; place-items: end center; width: var(--hp-size); height: var(--hp-size); padding: 0; cursor: pointer;
  border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); overflow: hidden;
  box-shadow: 0 14px 34px rgba(17, 24, 39, .28), 0 3px 8px rgba(17, 24, 39, .14);   /* мягкая, но заметная тень */
}
.hp-ring::after {                                   /* пульс: кольцо расходится от круга */
  content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 3px solid var(--accent); opacity: 0; pointer-events: none;
}
.hp-ring.is-pulse::after { animation: hp-pulse 1.1s var(--ease) 2; }
@keyframes hp-pulse { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
.hp-float .hp-ring { overflow: visible; }           /* кольцо пульса выходит за круг… */
.hp-ring > .hp { width: 74%; height: 92%; pointer-events: none; clip-path: circle(50% at 50% 46%); }   /* …а персонаж обрезается по кругу */
.hp-ring > .hp-photo { width: 100%; height: 100%; clip-path: none; border-radius: 50%; overflow: hidden; }
.hp-ring > .hp-photo img { object-fit: cover; object-position: 50% 8%; filter: none; }
.hp-ring > .hp-robot { width: 70%; height: 80%; margin-bottom: 8%; clip-path: none; }
.hp-ring .hp-body { transform-origin: 50% 90%; }
/* Внутри круга прыжки и кувырки — мягче, чтобы персонаж не вылетал за круг */
.hp-ring .hp-r-good { animation: hp-jump-s .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hp-jump-s { 0%, 100% { transform: none; } 35% { transform: translateY(3px) scale(1.05, .94); } 65% { transform: translateY(-8px); } }
.hp-ring .hp-r-done { animation: hp-spin-s .9s ease-in-out; }
@keyframes hp-spin-s { 0% { transform: none; } 50% { transform: translateY(-6px) rotate(-10deg) scale(1.06); } 100% { transform: none; } }
/* Подростки (HUD): не круг, а скруглённый квадрат-рамка, как ячейка лица в Doom */
:root[data-theme="B"] .hp-ring { border-radius: var(--radius); }
:root[data-theme="B"] .hp-ring > .hp-robot { width: 76%; height: 84%; }
:root[data-theme="B"] .hp-ring > .hp, :root[data-theme="B"] .hp-ring > .hp-robot { clip-path: none; }
/* «×» — спрятать помощника */
.hp-off {
  position: absolute; top: -6px; right: -6px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--surface); color: var(--text-muted); border: 2px solid var(--border); box-shadow: var(--shadow);
}
.hp-off:hover { color: var(--text); border-color: var(--text-muted); }
.hp-off::before { content: ""; position: absolute; inset: -8px; }   /* зона нажатия больше значка */
/* Кнопка «Помощник» — видна, когда помощник скрыт */
.hp-back {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 12px; cursor: pointer; pointer-events: auto;
  border-radius: 999px; background: var(--surface); color: var(--text); border: 2px solid var(--border); box-shadow: var(--shadow);
  font-weight: 700; font-size: calc(var(--fs-small) * var(--scale));
}
.hp-back span:first-child { color: var(--accent); display: grid; }
:root[data-theme="B"] .hp-back { border-radius: var(--radius-btn); font-size: 11px; }
.hp-float.is-off .hp-dock, .hp-float.is-off .hp-bubble { display: none; }
.hp-float.is-off .hp-back { display: inline-flex; }
/* Облачко реплики */
.hp-bubble {
  position: relative; width: max-content; max-width: 280px; padding: 14px 18px; pointer-events: none; cursor: pointer;
  background: var(--surface); color: var(--text); border: var(--border-w) solid var(--border); border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(17, 24, 39, .22), 0 3px 8px rgba(17, 24, 39, .10); font-weight: 700; font-size: calc(var(--fs-small) * var(--scale)); line-height: 1.45;
  opacity: 0; transform: translateX(6px) scale(.96); transform-origin: 100% 80%; transition: opacity .2s, transform .25s var(--ease);
  margin-bottom: 18px;                              /* облачко на уровне «лица» в круге */
}
:root[data-theme="C"] .hp-bubble { font-weight: 600; }
/* Подростки: на тёмном фоне тень не видна — даём светлую рамку и тёмный ореол */
:root[data-theme="B"] .hp-ring, :root[data-theme="B"] .hp-bubble { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 16px 40px rgba(0, 0, 0, .7); }
:root[data-theme="B"] .hp-bubble { border-color: var(--border-strong); background: #2C2740; }
.hp-bubble::after {                                 /* хвостик облачка — к кругу */
  content: ""; position: absolute; right: -9px; bottom: 18px; width: 16px; height: 16px;   /* хвостик справа — к кругу */
  background: inherit; border-right: inherit; border-bottom: inherit; transform: rotate(-45deg);
}
.hp-bubble.is-on { opacity: 1; transform: none; pointer-events: auto; }
.hp-bubble.is-good, .hp-bubble.is-done { border-color: var(--ok); }
.hp-bubble.is-bad { border-color: var(--err); }
.c-shell ~ .hp-float, .c-main .hp-float { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 901px) { .c-main .hp-float { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } }
/* Телефон: помощник в строке-«гнезде» между блоком и кнопками: круг слева, облачко справа (хвостик к кругу).
   Ничего не перекрывает и не прячется само. */
.hp-slot:empty { display: none; }
.hp-float.is-inline {
  --hp-size: 56px; position: static; flex-direction: row; align-items: center; gap: 14px; pointer-events: auto; width: 100%;
}
.hp-float.is-inline .hp-dock { flex: none; }
.hp-float.is-inline .hp-ring { border-width: 2px; }
.hp-float.is-inline .hp-off { width: 24px; height: 24px; top: -6px; right: -6px; }
.hp-float.is-inline .hp-off svg { width: 13px; height: 13px; }
.hp-float.is-inline .hp-bubble { order: 2; flex: 1; width: auto; max-width: none; padding: 12px 14px; transform-origin: 0 50%; transform: translateX(-6px); display: none; margin-bottom: 0; }
.hp-float.is-inline .hp-bubble.is-on { display: block; transform: none; }
.hp-float.is-inline .hp-bubble::after { right: auto; left: -9px; bottom: auto; top: calc(50% - 8px); transform: rotate(135deg); }
.hp-float.is-inline .hp-back { margin-left: auto; min-height: 40px; padding: 6px 12px 6px 10px; }
.hp-float.is-inline.is-off { justify-content: flex-end; }
@media (max-width: 760px) { .page.has-helper { padding-bottom: 32px; } }
/* ПК: в строке круг 64 px, облачко по ширине текста (не растягивается на всю строку) */
@media (min-width: 761px) {
  .hp-float.is-inline { --hp-size: 64px; padding: 0 4px; }
  .hp-float.is-inline .hp-bubble { flex: 0 1 auto; max-width: 620px; }
}

/* =====================================================================
   Экран раздела: шапка, вкладки, слайды справочника, тренажёр, тест, итог.
   Вид — из токенов темы; раскладка общая для A / B / C.
   ===================================================================== */
.sec { gap: 20px; }
.sec-head { display: flex; align-items: center; gap: 14px; }
.sec-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sec-h { font-family: var(--font-head); font-weight: var(--w-head); font-size: calc(var(--fs-h2) * var(--scale)); line-height: 1.25; text-wrap: balance; }
:root[data-theme="B"] .sec-h { font-size: 18px; line-height: 1.6; }
/* Вкладки: Справочник · Попробуй сам · Тест */
.sec-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.sec-tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 16px;
  border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-btn); background: var(--surface); color: var(--text);
  font-family: var(--font-ui); font-weight: var(--w-ui); font-size: calc(var(--fs-btn) * var(--scale));
}
.sec-tab[aria-selected="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
:root[data-theme="A"] .sec-tab[aria-selected="true"] { border-color: var(--border); box-shadow: var(--shadow-btn); }
:root[data-theme="B"] .sec-tab { text-transform: uppercase; }
.sec-stage { display: flex; flex-direction: column; gap: 24px; min-width: 0; }   /* воздух между блоком, помощником и кнопками */

/* ---------- Слайд справочника ---------- */
.sl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding: 40px 44px; align-items: center; animation: bou-in-c 300ms var(--ease) both; touch-action: pan-y; }
:root[data-theme="A"] .sl { animation-name: bou-in-a; }
:root[data-theme="B"] .sl { animation: bou-in-b 240ms steps(3) both; }
.sl-pic { background: var(--ill-bg); border: var(--border-w) solid var(--border); border-radius: calc(var(--radius-lg) - 8px); padding: 18px; color: var(--ill-line); }
:root[data-theme="C"] .sl-pic { border-color: var(--border); }
.sl-pic-in { aspect-ratio: 200 / 140; max-width: 100%; }
.ill { width: 100%; height: 100%; display: block; overflow: visible; }
.sl-text { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; min-width: 0; padding-right: 8px; }
.sl-count { font-weight: 800; font-size: calc(var(--fs-small) * var(--scale)); color: var(--text-muted); }
:root[data-theme="B"] .sl-count { font-family: var(--font-head); font-weight: 400; font-size: 12px; color: var(--accent); }
.sl-title { font-family: var(--font-head); font-weight: var(--w-head); font-size: calc(var(--fs-h1) * .8 * var(--scale)); line-height: 1.2; text-wrap: balance; }
:root[data-theme="B"] .sl-title { font-size: calc(18px * var(--scale)); line-height: 1.6; }
.sl-body { font-size: calc(var(--fs-body) * var(--scale)); line-height: 1.7; max-width: 56ch; }
:root[data-theme="A"] .sl-body { font-size: calc(24px * var(--scale)); font-weight: 700; line-height: 1.4; }
.sl-speak { height: 44px; padding: 0 14px; }
.sl-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sl-nav .btn:disabled { opacity: .4; cursor: default; }
.sl-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; flex: 1; min-width: 0; }
.sl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--track); border: 1px solid var(--border-strong); }
.sl-dot.is-done { background: var(--progress); border-color: var(--progress); }
.sl-dot.is-on { width: 26px; border-radius: 99px; background: var(--accent); border-color: var(--accent); }
:root[data-theme="B"] .sl-dot { border-radius: 0; }
@media (max-width: 760px) {
  .sl { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .sl-pic { padding: 10px; }
  .sl-title { font-size: calc(var(--fs-h1) * 1.05 * var(--scale)); }
  :root[data-theme="A"] .sl-body { font-size: calc(19px * var(--scale)); }
  .sl-nav .btn-label { display: none; }
  .sl-nav .sl-next .btn-label { display: inline; }
  .sl-dot { width: 8px; height: 8px; } .sl-dot.is-on { width: 18px; }
}

/* Анимации иллюстраций */
.ill-spin { animation: ill-spin 4s linear infinite; }
.ill-rev { animation-direction: reverse; }
@keyframes ill-spin { to { transform: rotate(360deg); } }
.ill-bead { animation: ill-bead 2.4s ease-in-out infinite; }
@keyframes ill-bead { 0%, 40% { transform: none; } 55%, 85% { transform: translateX(34px); } 100% { transform: none; } }
.ill-blink { animation: ill-blink 1.6s steps(2) infinite; }
@keyframes ill-blink { 50% { opacity: .25; } }
.ill-feed { animation: ill-feed 3s ease-in-out infinite; }
@keyframes ill-feed { 0%, 100% { transform: none; } 50% { transform: translateY(6px); } }
.ill-head { animation: ill-head 4s steps(5) infinite; }
@keyframes ill-head { 0% { transform: translateX(-48px); } 50% { transform: translateX(48px); } 100% { transform: translateX(-48px); } }
.ill-click { animation: ill-click 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ill-click { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(2px) scale(.94); } }
:root[data-theme="B"] .ill-spin { animation-timing-function: steps(12); }
:root[data-theme="B"] .ill-bead, :root[data-theme="B"] .ill-feed { animation-timing-function: steps(4); }
:root[data-theme="C"] .ill-spin { animation-duration: 9s; }

/* ---------- Конец справочника ---------- */
.sec-end, .res { padding: 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.sec-end-h, .res-h { font-family: var(--font-head); font-weight: var(--w-head); font-size: calc(var(--fs-h1) * .75 * var(--scale)); line-height: 1.3; }
:root[data-theme="B"] .sec-end-h, :root[data-theme="B"] .res-h { font-size: 16px; line-height: 1.6; }
.sec-end-p, .res-p { color: var(--text-muted); max-width: 52ch; }
.sec-end-acts, .res-acts { justify-content: center; margin-top: 6px; }

/* ---------- Тренажёр «Расставь по порядку» ---------- */
.tr { padding: 36px 40px; display: flex; flex-direction: column; gap: 18px; }
.tr-h { font-family: var(--font-head); font-weight: var(--w-head); font-size: calc(var(--fs-h2) * var(--scale)); }
:root[data-theme="B"] .tr-h { font-size: 14px; line-height: 1.6; }
.tr-p { color: var(--text-muted); font-weight: 600; }
.tr-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.tr-slot { min-height: 76px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 12px; border: 2px dashed var(--border-strong); border-radius: var(--radius-btn); background: var(--surface-2); color: var(--text-muted); }
.tr-slot.is-filled { border-style: solid; border-color: var(--progress); background: var(--surface); color: var(--text); animation: bou-pop 300ms var(--ease) both; }
.tr-slot-n { font-weight: 800; font-size: 15px; color: var(--text-muted); }
.tr-slot-t { font-weight: 800; line-height: 1.25; }
.tr-slot-y { font-size: 15px; color: var(--progress); font-weight: 800; }
:root[data-theme="C"] .tr-slot-y { color: var(--accent); }
.tr-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tr-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; min-height: var(--tap);
  background: var(--surface); color: var(--text); border: var(--border-w) solid var(--border); border-radius: var(--radius-btn); box-shadow: var(--shadow-btn);
  font-family: var(--font-body); font-weight: 800; transition: transform 140ms var(--ease);
}
.tr-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.tr-card-pic { width: 100%; aspect-ratio: 200 / 140; background: var(--ill-bg); border-radius: calc(var(--radius-btn) - 4px); color: var(--ill-line); padding: 6px; }
.tr-card.is-wrong { animation: tr-shake .45s ease-in-out; border-color: var(--err); }
@keyframes tr-shake { 0%, 100% { transform: none; } 25%, 75% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }
.tr-done { justify-content: center; }

/* ---------- Тест ---------- */
.q { padding: 36px 40px; display: flex; flex-direction: column; gap: 18px; }
.q-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.q-count { font-weight: 800; color: var(--text-muted); }
:root[data-theme="B"] .q-count { font-family: var(--font-head); font-weight: 400; font-size: 12px; color: var(--accent); }
.q-top .segs .seg { width: 18px; height: 10px; }
:root:not([data-theme="B"]) .q-top .seg { border-radius: 99px; }
.q-prompt { font-family: var(--font-head); font-weight: var(--w-head); font-size: calc(var(--fs-h1) * .72 * var(--scale)); line-height: 1.3; text-wrap: balance; }
:root[data-theme="B"] .q-prompt { font-family: var(--font-body); font-weight: 700; font-size: calc(22px * var(--scale)); }
.q-opts { display: flex; flex-direction: column; gap: 10px; }
.q-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 10px 16px; text-align: left;
  background: var(--surface); color: var(--text); border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-btn); box-shadow: var(--shadow-btn);
  font-family: var(--font-body); font-weight: 700; font-size: calc(var(--fs-body) * var(--scale)); transition: transform 120ms var(--ease), border-color 120ms;
}
.q-opt:hover:not(:disabled) { border-color: var(--accent); transform: translateX(3px); }
.q-opt:disabled { cursor: default; }
.q-letter { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); font-weight: 800; font-size: 16px; }
:root[data-theme="B"] .q-letter { border-radius: 0; font-family: var(--font-head); font-weight: 400; font-size: 12px; }
.q-opt.is-ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--surface)); }
.q-opt.is-ok .q-letter { background: var(--ok); color: #fff; }
.q-opt.is-err { border-color: var(--err); background: color-mix(in srgb, var(--err) 12%, var(--surface)); animation: tr-shake .45s ease-in-out; }
.q-opt.is-err .q-letter { background: var(--err); color: #fff; }
.q-explain { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--radius-btn); background: var(--surface-2); border: 1px solid var(--border); line-height: 1.5; animation: bou-in-c 250ms var(--ease) both; }
.q-verdict { font-weight: 800; }
.q-verdict.is-ok { color: var(--ok); } .q-verdict.is-err { color: var(--err); }
.q-ref { font-size: calc(var(--fs-small) * var(--scale)); color: var(--accent); font-weight: 600; align-self: flex-start; }
.q-foot { display: flex; justify-content: flex-end; }

/* ---------- Итог теста ---------- */
.res-score { display: flex; align-items: baseline; gap: 8px; }
.res-num { font-family: var(--font-head); font-weight: 800; font-size: 72px; line-height: 1; color: var(--accent); }
:root[data-theme="B"] .res-num { font-weight: 400; font-size: 48px; }
:root[data-theme="A"] .res-num { color: var(--progress); -webkit-text-stroke: 2px var(--border); }
.res-of { font-weight: 800; font-size: 22px; color: var(--text-muted); }

/* Конфетти */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.confetti i { position: absolute; top: -14px; width: 9px; height: 13px; border-radius: 2px; animation: cf-fall 2s ease-in forwards; }
:root[data-theme="B"] .confetti i { border-radius: 0; width: 9px; height: 9px; animation-timing-function: steps(12); }
@keyframes cf-fall { to { transform: translateY(105vh) rotate(600deg); opacity: .3; } }

@media (max-width: 640px) {
  .tr, .q, .sec-end, .res { padding: 20px; }
  .tr-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-pool { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q-opt { min-height: 52px; padding: 10px 12px; gap: 10px; }
}


/* =====================================================================
   Слова глоссария, окно-карточка, подсказка к вопросу
   ===================================================================== */
/* Слово-ссылка в тексте: пунктир + цвет акцента, нажимается как кнопка */
.term {
  display: inline; padding: 0 1px; color: var(--accent); cursor: pointer; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 4px; border-radius: 4px;
}
.term:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.term:hover { text-decoration-style: solid; background: color-mix(in srgb, var(--accent) 10%, transparent); }
:root[data-theme="B"] .term { color: var(--accent); text-decoration-color: currentColor; }

/* Окно-карточка: слово глоссария или слайд поверх теста */
.sheet {
  width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--surface); color: var(--text);
  border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 32px 36px; display: flex; flex-direction: column; gap: 20px;
}
:root[data-theme="C"] .sheet { box-shadow: 0 24px 60px rgba(17, 24, 39, .2); }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sheet-head-t { display: flex; flex-direction: column; gap: 4px; }
.sheet-kicker { font-size: calc(var(--fs-small) * var(--scale)); color: var(--text-muted); font-weight: 700; }
:root[data-theme="B"] .sheet-kicker { font-size: 12px; text-transform: uppercase; }
.sheet-title { font-family: var(--font-head); font-weight: var(--w-head); font-size: calc(var(--fs-h2) * var(--scale)); line-height: 1.25; }
:root[data-theme="B"] .sheet-title { font-size: 18px; line-height: 1.6; }
.sheet-pic { border-radius: var(--radius); background: var(--ill-bg, var(--surface-2)); padding: 16px; display: grid; place-items: center; }
.sheet-pic svg { width: 100%; max-width: 360px; height: auto; }
.sheet-text { font-size: calc(var(--fs-body) * var(--scale)); line-height: 1.7; max-width: 60ch; }
.sheet-foot { display: flex; justify-content: flex-end; }
@media (max-width: 640px) {
  .sheet { padding: 22px 20px; gap: 16px; }
  .sheet-foot .btn { width: 100%; }
}

/* Подсказка к вопросу (до ответа) */
.q-tools { display: flex; flex-wrap: wrap; gap: 12px; }
.q-hint {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius-btn); line-height: 1.6;
  background: color-mix(in srgb, var(--warn, #F59E0B) 12%, var(--surface)); border: 2px dashed color-mix(in srgb, var(--warn, #F59E0B) 55%, transparent);
  animation: bou-in-c 250ms var(--ease) both;
}
.q-hint-ic { color: var(--warn, #B45309); flex: none; display: grid; margin-top: 2px; }
.q-ref.link-btn { align-self: flex-start; font-size: calc(var(--fs-small) * var(--scale)); }



/* =====================================================================
   Обновление 2026-10-22 (2): окна заметнее, низ вопроса, раздел в один экран на телефоне
   ===================================================================== */
/* Окна (слово глоссария, слайд поверх теста, диалоги): фон темнее, тень сильнее */
.overlay { background: rgba(10, 12, 20, .55); }
.sheet, .dialog { box-shadow: 0 30px 80px rgba(10, 12, 20, .35), 0 6px 18px rgba(10, 12, 20, .18); }
:root[data-theme="B"] .overlay { background: rgba(4, 3, 8, .78); }
:root[data-theme="B"] .sheet, :root[data-theme="B"] .dialog {
  background: #2A2539; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0, 0, 0, .5), 0 30px 80px rgba(0, 0, 0, .8);
}

/* Низ вопроса: слева «Подсказка» и «Посмотреть слайд», справа «Дальше» (появляется после ответа) */
.q-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* Кнопки «Подсказка» / «Посмотреть слайд» — не похожи на варианты ответа: отделены линией,
   выглядят как ссылки со значком (без рамки и фона) */
.q-foot:has(.q-tools:not([hidden])) { border-top: 1px dashed var(--border-strong); padding-top: 14px; margin-top: 6px; }
.q-tools .btn {
  background: none; border: 0; box-shadow: none; color: var(--accent); min-height: 44px; padding: 0 6px;
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 5px; text-decoration-thickness: 2px;
}
.q-tools .btn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 8%, transparent); transform: none; }
.q-tools .btn:disabled { opacity: .45; text-decoration: none; }
:root[data-theme="B"] .q-tools .btn { color: var(--accent); }
.q-hint { margin-bottom: 6px; }                       /* подсказка (по кнопке) — отступ от вариантов */
.q-foot .q-next { margin-left: auto; }
.q-tools { display: flex; flex-wrap: wrap; gap: 10px; }

/* ПК и ноутбук (от 720 px высоты): раздел помещается в один экран */
.page.sec { padding-top: 24px; gap: 16px; }
.sl { padding: 32px 40px; gap: 40px; }
.sl-pic-in { max-height: 44vh; margin: 0 auto; }
.sl-pic-in svg { width: 100%; height: 100%; }
.q { padding: 28px 36px; gap: 12px; }
.q-opts { gap: 10px; }

/* Телефон: раздел помещается в один экран без прокрутки */
@media (max-width: 760px) {
  .page.sec { padding-top: 14px; gap: 12px; }
  .sec-head { gap: 10px; }
  .sec-head .btn-icon { width: 44px; height: 44px; min-height: 44px; }
  .sec-h { font-size: calc(20px * var(--scale)); line-height: 1.2; }
  :root[data-theme="B"] .sec-h { font-size: 14px; line-height: 1.5; }
  .sec-num { display: none; }                         /* «Раздел 1» — лишняя строка на телефоне */
  /* Вкладки — одна строка из трёх равных кнопок */
  .sec-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; flex-wrap: nowrap; }
  .sec-tab { justify-content: center; gap: 6px; padding: 0 6px; min-height: 42px; font-size: calc(14px * var(--scale)); white-space: nowrap; }
  :root[data-theme="B"] .sec-tab { font-size: 10px; }
  .sec-tab > span:first-child { display: none; }       /* значки вкладок на телефоне не помещаются — только надписи */
  .sec-stage { gap: 20px; }
  /* Слайд: рисунок ниже ростом, «Озвучить» — значком справа от счётчика */
  .sl { gap: 12px; padding: 14px 16px 18px; }
  .sl-pic { padding: 6px; }
  .sl-pic-in { aspect-ratio: auto; }
  .sl-pic-in svg { display: block; height: min(17vh, 150px); width: auto; max-width: 100%; margin: 0 auto; }   /* высота рисунка — явно, чтобы не вылезал из подложки */
  .sl-text { position: relative; gap: 8px; padding-right: 0; }
  .sl-title { font-size: calc(21px * var(--scale)); padding-right: 52px; }
  :root[data-theme="B"] .sl-title { font-size: 14px; }
  .sl-body { font-size: calc(17px * var(--scale)); line-height: 1.5; }
  :root[data-theme="A"] .sl-body { font-size: calc(19px * var(--scale)); line-height: 1.4; }
  :root[data-theme="B"] .sl-body { font-size: calc(16px * var(--scale)); }
  .sl-speak { position: absolute; top: 0; right: 0; min-height: 42px; width: 42px; padding: 0; justify-content: center; }
  .sl-speak .btn-label { display: none; }
  .sl-nav .btn { min-height: 48px; }
  /* Вопрос: компактнее */
  .q { padding: 16px; gap: 12px; }
  .q-prompt { font-size: calc(20px * var(--scale)); }
  :root[data-theme="B"] .q-prompt { font-size: calc(17px * var(--scale)); }
  .q-opts { gap: 8px; }
  .q-opt { min-height: 48px; padding: 8px 12px; }
  .q-letter { width: 30px; height: 30px; font-size: 14px; }
  .q-hint { padding: 12px 14px; }
  .q-foot .q-tools { display: flex; justify-content: space-between; gap: 8px; width: 100%; }   /* «Подсказка» и «Посмотреть слайд» — в одну строку */
  .q-tools .btn { min-height: 44px; padding: 0 4px; font-size: calc(15px * var(--scale)); white-space: nowrap; }
  :root[data-theme="B"] .q-tools .btn { font-size: 10px; }

  .sec .report-row { margin-top: -4px; }
}

@media (max-width: 760px) {
  /* Облачко помощника в строке — компактное */
  .hp-float.is-inline .hp-bubble { padding: 9px 12px; font-size: calc(14px * var(--scale)); line-height: 1.35; }
}
/* Невысокие экраны (старые и маленькие телефоны): рисунок ещё ниже, текст чуть плотнее */
@media (max-width: 760px) and (max-height: 700px) {
  .sl-pic-in svg { height: 14vh; }
  .sl-body { font-size: calc(16px * var(--scale)); line-height: 1.45; }
  .sec-tabs .sec-tab { min-height: 38px; }
  .q-opt { min-height: 44px; }
}
/* Ноутбуки с невысоким экраном (до 800 px по высоте): рисунок и вопрос плотнее, чтобы всё влезло в один экран */
@media (min-width: 761px) and (max-height: 800px) {
  .page.sec { padding-top: 18px; gap: 12px; }
  .sl { padding: 24px 36px; }
  .sl-pic-in { max-height: 34vh; }
  .q { padding: 22px 32px; gap: 10px; }
  .q-opt { min-height: 48px; padding: 8px 14px; }
  .q-opts { gap: 8px; }
}

/* =====================================================================
   Лицо владельца в стилях помощника: toon (дети), pixel (подростки), photo (взрослые, в костюме)
   ===================================================================== */
.hp-toon img, .hp-pixel img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; display: block; }
.hp-pixel img { image-rendering: pixelated; }               /* пиксели чёткие, без размытия */
/* Анимации: мультяшка прыгает как мультяшка (общие), пиксели — рывками, как в игре */
/* Подростки — портрет как у водителей в Carmageddon: картинка стоит на месте и заполняет ячейку целиком,
   «анимация» — смена кадра (лица) с короткой помехой экрана, без подпрыгиваний */
.hp-pixel .hp-idle { animation: none; }
.hp-pixel .hp-r-good, .hp-pixel .hp-r-ok, .hp-pixel .hp-r-bad, .hp-pixel .hp-r-done { animation: hp-glitch .45s steps(4); }
@keyframes hp-glitch {                                   /* помеха при смене кадра: яркость и сдвиг цвета рывками */
  0% { filter: brightness(2) contrast(1.4); }
  33% { filter: brightness(.5) hue-rotate(40deg); }
  66% { filter: brightness(1.4) saturate(1.6); }
  100% { filter: none; }
}
.hp-pixel img { object-fit: cover; object-position: 50% 0; }
.hud-face:has(.hp-pixel) { padding: 0; gap: 0; }
.hud-face .hp-pixel { width: 100%; height: auto; flex: 1; min-height: 104px; margin: 0; }   /* портрет на всю ячейку HUD, как в Carmageddon */

/* В круге помощника: картинка заполняет круг и выше его на 18% снизу —
   при прыжке/кивке снизу никогда не видно края картинки (раньше портрет «обрезался» при реакции) */
.hp-ring > .hp-toon, .hp-ring > .hp-pixel, .hp-ring > .hp-photo {
  width: 100%; height: 100%; clip-path: none; border-radius: 50%; overflow: hidden; display: block; position: relative;
}
:root[data-theme="B"] .hp-ring > .hp-pixel { border-radius: calc(var(--radius) - 3px); }
.hp-ring > .hp-toon .hp-body, .hp-ring > .hp-photo .hp-body { position: absolute; inset: 0 0 -18% 0; height: auto; }
.hp-ring > .hp-pixel .hp-body { position: absolute; inset: 0; }   /* пиксельный портрет — ровно в рамку, не двигается */
.hp-ring > .hp-toon img, .hp-ring > .hp-pixel img, .hp-ring > .hp-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: none; }
.hp-ring > .hp-toon img { transform: scale(1.12); transform-origin: 50% 20%; }   /* лицо крупнее в круге */
/* Взрослый портрет в круге: реакции без подъёма — лёгкий наклон и масштаб */
.hp-ring .hp-photo .hp-r-good, .hp-ring .hp-photo .hp-r-ok, .hp-ring .hp-photo .hp-r-done { animation: hp-nod-ring .6s ease-in-out; }
@keyframes hp-nod-ring { 0%, 100% { transform: none; } 40% { transform: scale(1.05); } }
.hp-ring .hp-photo .hp-r-bad { animation: hp-tilt .7s ease-in-out; }
/* Карточки выбора возраста и экран имени — лицо в круге карточки */
.age-face .hp-toon, .age-face .hp-pixel, .age-face .hp-photo { padding: 0; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; }
.age-face .hp-toon img, .age-face .hp-pixel img, .age-face .hp-photo img { object-fit: cover; object-position: 50% 0; filter: none; }
.name-face .hp-toon { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.name-face .hp-toon img { object-fit: cover; object-position: 50% 0; }
/* Телефон: ячейка портрета — компактный квадрат 72 px (не растягивается на треть ширины) */
@media (max-width: 640px) {
  .hud-in:has(.hp-pixel) { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); }
  .hud-face:has(.hp-pixel) { flex: none; }
  .hud-face .hp-pixel { width: 72px; height: 72px; min-height: 0; flex: none; }
}

/* Человечек для детей (man / man-head): рука машет от плеча, в круге — голова на весь круг */
.hp-man .hp-wave { transform-box: fill-box; transform-origin: 20% 90%; }
.hp-ring > .hp-man-head { width: 100%; height: 100%; clip-path: none; }
.hp-ring > .hp-man-head .hp-body { transform-origin: 50% 100%; }
.age-face .hp-man-head, .name-face .hp-man-head { padding: 4px 6px 0; width: 100%; height: 100%; }

/* =====================================================================
   Страницы меню (Справочник, Как сделать, Тесты, Мой прогресс, Глоссарий, Что нового),
   формы (Вопрос, Ошибка, Вход), всплывающее сообщение, аккаунт в меню, экран имени
   ===================================================================== */
.pg { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.pg-head + .pg-sub { margin-top: -12px; }   /* подзаголовок ближе к заголовку */
.pg-head { display: flex; align-items: center; gap: 14px; }
.pg-head-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pg-h { font-family: var(--font-head); font-weight: var(--w-head); font-size: calc(var(--fs-h1) * .85 * var(--scale)); line-height: 1.2; }
:root[data-theme="B"] .pg-h { font-size: 20px; line-height: 1.5; }
.pg-sub { color: var(--text-muted); max-width: 70ch; }
.pg-stack { display: flex; flex-direction: column; gap: 20px; }
.pg-loading { color: var(--text-muted); padding: 20px 0; }
.pg-acts { align-items: center; }
/* Поле фильтра */
.pg-filter { position: relative; display: block; max-width: 640px; }
.pg-filter-ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); display: grid; }
.pg-filter-input { padding-left: 48px !important; }
/* Карточка группы */
.pg-card { padding: 28px 32px; display: flex; flex-direction: column; gap: 18px; }
.pg-card-head { display: flex; align-items: center; gap: 14px; }
.pg-card-h { font-family: var(--font-head); font-weight: var(--w-head); font-size: calc(var(--fs-h2) * .85 * var(--scale)); line-height: 1.3; }
:root[data-theme="B"] .pg-card-h { font-size: 15px; line-height: 1.6; }
.pg-card-sub { color: var(--text-muted); font-size: calc(var(--fs-small) * var(--scale)); }
.pg-tile { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: var(--radius-btn); background: var(--surface-2); color: var(--icon); }
/* Список ссылок на слайды */
.pg-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.pg-link { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-btn); color: var(--text); text-decoration: none; }
.pg-link:hover { background: var(--surface-2); }
.pg-link-n { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); font-weight: 800; font-size: 14px; color: var(--text-muted); }
:root[data-theme="B"] .pg-link-n { border-radius: 0; font-size: 11px; }
.pg-link-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pg-link-p { color: var(--text-muted); font-size: calc(var(--fs-small) * var(--scale)); line-height: 1.45; }
/* Строки (тесты, прогресс) */
.pg-rows { padding: 8px 28px; gap: 0; }
.pg-row { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--border); }
.pg-row:first-child { border-top: 0; }
.pg-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.pg-row-prog .pg-row-main { cursor: default; }
.pg-row-t { font-weight: 800; color: var(--text); text-decoration: none; }
a.pg-row-t:hover { text-decoration: underline; }
.pg-row-p { color: var(--text-muted); font-size: calc(var(--fs-small) * var(--scale)); }
.pg-row-acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pg-reset { min-height: 44px; color: var(--text-muted); }
/* Флажок выбора */
.chk { position: relative; flex: none; width: 28px; height: 28px; cursor: pointer; }
.chk-input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chk-box { position: absolute; inset: 0; display: grid; place-items: center; border: 2px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: transparent; }
:root[data-theme="B"] .chk-box { border-radius: 0; }
.chk-input:checked + .chk-box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chk-input:focus-visible + .chk-box { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Плитки «Мой прогресс» */
.pg-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pg-tile-stat { padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.pg-stat-v { font-family: var(--font-head); font-weight: var(--w-head); font-size: calc(32px * var(--scale)); line-height: 1.1; }
:root[data-theme="B"] .pg-stat-v { font-size: 20px; color: var(--accent); }
.pg-stat-l { color: var(--text-muted); font-size: calc(var(--fs-small) * var(--scale)); }
.pg-note { color: var(--text-muted); }
.pg-note-act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* Пустое состояние */
.pg-empty { padding: 40px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.pg-empty-ic { color: var(--icon); opacity: .8; }
.pg-empty-t { font-family: var(--font-head); font-weight: var(--w-head); font-size: calc(var(--fs-h2) * .8 * var(--scale)); }
:root[data-theme="B"] .pg-empty-t { font-size: 14px; line-height: 1.6; }
.pg-empty-p { color: var(--text-muted); max-width: 52ch; }
.pg-empty .btn-row { justify-content: center; margin-top: 6px; }
/* Как сделать */
.pg-howto summary { cursor: pointer; }
.pg-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; line-height: 1.6; }
/* Глоссарий */
.gl-letter { font-family: var(--font-head); font-weight: var(--w-head); font-size: calc(var(--fs-h2) * var(--scale)); color: var(--accent); margin-top: 8px; }
:root[data-theme="B"] .gl-letter { font-size: 16px; }
.gl-item { padding: 22px 26px; display: flex; gap: 22px; align-items: center; }
.gl-item.is-focus { outline: 3px solid var(--accent); outline-offset: 3px; }
.gl-pic { width: 150px; flex: none; color: var(--ill-line); background: var(--ill-bg); border-radius: var(--radius); padding: 8px; }
.gl-pic svg { width: 100%; height: auto; display: block; }
.gl-text { display: flex; flex-direction: column; gap: 6px; line-height: 1.6; }
.gl-h { font-weight: 800; font-size: calc(var(--fs-card) * var(--scale)); }
/* Что нового */
.news-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.news-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
/* Формы */
.form { display: flex; flex-direction: column; gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-label { font-weight: 700; font-size: calc(var(--fs-small) * var(--scale)); }
.form-input { width: 100%; min-height: 52px; padding: 12px 16px; font: inherit; color: var(--text); background: var(--bg);
  border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-btn); }
.form-input:focus { outline: 3px solid var(--focus); outline-offset: 1px; }
.form-area { min-height: 120px; resize: vertical; line-height: 1.5; }
.form-lead { line-height: 1.6; }
.form-note { color: var(--text-muted); font-size: calc(var(--fs-small) * var(--scale)); }
.form-msg { font-weight: 700; color: var(--text-muted); }
.form-msg.is-err { color: var(--err); }
.form-file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.form-file-btn { cursor: pointer; }
.form-file-name { color: var(--text-muted); font-size: calc(var(--fs-small) * var(--scale)); overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet-foot { gap: 12px; flex-wrap: wrap; }
/* Всплывающее сообщение */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60;
  max-width: min(520px, calc(100vw - 32px)); padding: 14px 20px; border-radius: var(--radius); background: var(--text); color: var(--surface);
  font-weight: 700; box-shadow: 0 14px 34px rgba(17, 24, 39, .3); animation: bou-in-c 220ms var(--ease) both; transition: opacity .3s;
}
.toast.is-out { opacity: 0; }
:root[data-theme="B"] .toast { background: var(--accent); color: #14121C; border-radius: 0; }
/* Аккаунт вверху меню */
.menu-account {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; margin-bottom: 6px; text-align: left; cursor: pointer;
  border: 0; border-radius: var(--radius); background: var(--surface-2); color: var(--text); font: inherit;
}
.menu-account:hover .menu-account-edit { color: var(--accent); }
.menu-account-ava { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--icon); }
:root[data-theme="B"] .menu-account-ava { border-radius: 0; }
.menu-account-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.menu-account-name { font-weight: 800; overflow-wrap: anywhere; }
.menu-account-sub { color: var(--text-muted); font-size: calc(var(--fs-small) * var(--scale)); overflow-wrap: anywhere; }
.menu-account-edit { color: var(--text-muted); display: grid; flex: none; }
/* Экран имени: «Дальше» + «Пропустить», вход по почте */
.name-acts { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.name-login { width: 100%; display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px dashed var(--border-strong); }
.name-login-t { color: var(--text-muted); font-size: calc(var(--fs-small) * var(--scale)); }
.name-card .name-login .btn { height: 52px; }
.name-face .hp-pixel, .name-face .hp-photo { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.name-face .hp-pixel img, .name-face .hp-photo img { object-fit: cover; object-position: 50% 0; filter: none; }
@media (max-width: 760px) {
  .pg { gap: 18px; }
  .pg-card { padding: 20px; }
  .pg-rows { padding: 4px 18px; }
  .pg-row { flex-wrap: wrap; }
  .pg-row-acts { width: 100%; justify-content: flex-start; padding-left: 44px; }
  .pg-row-prog .pg-row-acts { padding-left: 64px; }
  .pg-tiles { grid-template-columns: 1fr; gap: 10px; }
  .pg-tile-stat { padding: 16px 18px; }
  .gl-item { flex-direction: column; align-items: stretch; padding: 18px; }
  .gl-pic { width: 100%; max-width: 260px; }
  .pg-acts .btn { flex: 1 1 auto; }
}
/* Окно входа: кнопка Google, «или», поле кода */
.login-google { min-height: 44px; display: flex; justify-content: center; }
.login-or { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: calc(var(--fs-small) * var(--scale)); }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--border-strong); }
.login-code { font-size: 28px !important; font-weight: 800; letter-spacing: 10px; text-align: center; }
.login-links { display: flex; gap: 20px; flex-wrap: wrap; }
/* Облачко-подсказка помощника (напоминание про вход): другой фон + кнопки прямо в облачке */
.hp-bubble.is-info { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: var(--accent); }
:root[data-theme="B"] .hp-bubble.is-info { background: #3A3320; border-color: var(--accent); }
.hp-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.hp-acts:not(:empty) { margin-top: 10px; }
.hp-act { min-height: 38px; padding: 0 14px; border-radius: var(--radius-btn); border: 2px solid var(--accent); background: transparent; color: var(--accent); font: inherit; font-weight: 800; cursor: pointer; }
.hp-act.is-primary { background: var(--accent); color: var(--on-accent); }
:root[data-theme="B"] .hp-act { border-radius: 0; font-size: 11px; }
/* Меню: кнопки выбора (возраст, система) — ровной сеткой одинаковой ширины, без переносов «лесенкой» */
.menu-choices { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
/* Подпись не обрезается: при «Крупнее текст» сетка сама становится в 2 колонки, длинное слово переносится */
.menu-choices .chip { justify-content: center; padding: 6px 8px; min-width: 0; white-space: normal; text-align: center; line-height: 1.2; overflow-wrap: anywhere; }
.menu-choices .chip svg { flex: none; }
:root[data-large="1"] .menu-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-theme="B"] .menu-choices .chip { font-size: 11px; padding: 0 4px; }

/* Подростки: помощник в ячейке лица HUD — портрет на всю ячейку, облачко всплывает над HUD */
.hud-face:has(.hp-float.is-hud) { padding: 0; position: relative; overflow: visible; }
.hp-float.is-hud { position: static; display: block; width: 100%; height: 100%; pointer-events: auto; }
.hp-float.is-hud .hp-dock { position: static; width: 100%; height: 100%; }
.hp-float.is-hud .hp-ring { width: 100%; height: 100%; min-height: 104px; border: 0; border-radius: 0; box-shadow: none; background: none; }
.hp-float.is-hud .hp-ring::after { inset: 0; border-radius: 0; border-color: var(--accent); }
.hp-float.is-hud .hp-ring > .hp-pixel { border-radius: 0; }
.hp-float.is-hud .hp-off { top: 6px; right: 6px; }
.hp-float.is-hud .hp-bubble {
  position: absolute; left: 50%; bottom: calc(100% + 14px); width: max-content; max-width: min(340px, calc(100vw - 24px));
  transform: translate(-50%, 6px); transform-origin: 50% 100%; margin: 0; z-index: 35;
}
.hp-float.is-hud .hp-bubble.is-on { transform: translate(-50%, 0); }
.hp-float.is-hud .hp-bubble::after { right: auto; left: calc(50% - 8px); bottom: -9px; top: auto; transform: rotate(45deg); }
/* Подсказки скрыты («×» или меню): портрет остаётся в HUD, облачко не всплывает; нажатие на портрет — вернуть */
.hp-float.is-hud.is-off .hp-dock { display: block; }
.hp-float.is-hud.is-off .hp-back, .hp-float.is-hud.is-off .hp-off { display: none; }
@media (max-width: 640px) {
  .hp-float.is-hud .hp-ring { min-height: 72px; }
  .hud-in:has(.hp-float.is-hud) { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); }
  .hp-float.is-hud .hp-bubble { left: auto; right: -84px; transform: translateY(6px); }
  .hp-float.is-hud .hp-bubble.is-on { transform: none; }
}
/* Телефон: облачко помощника из HUD — во всю ширину над панелью (не вылезает за край экрана) */
@media (max-width: 640px) {
  .hud-face:has(.hp-float.is-hud) { position: static; }
  .hp-float.is-hud .hp-bubble, .hp-float.is-hud .hp-bubble.is-on { left: 12px; right: 12px; width: auto; max-width: none; transform: none; }
}
/* Кнопка «Дальше» после ответа не прячется под HUD/нижнее меню при автопрокрутке */
.q-foot .btn { scroll-margin-bottom: 140px; }   /* только «Дальше» в тесте (у кнопок слайдов — нет, иначе экран дёргается) */
/* Тест в один экран: на ПК варианты ответа в две колонки, разбор компактнее */
@media (min-width: 900px) {
  .q-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .q-opt { height: 100%; }
}
.q-explain { padding: 12px 16px; gap: 4px; line-height: 1.45; font-size: calc(var(--fs-small) * 1.08 * var(--scale)); }
/* Кнопка «Пройти тест» на карточке изученного раздела */
.sec-quiz { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-top: 4px; padding: 0 14px;
  border-radius: var(--radius-btn); border: 2px solid var(--accent); background: var(--surface); color: var(--accent); font: inherit; font-weight: 800; font-size: calc(var(--fs-small) * var(--scale)); cursor: pointer; }
.sec-quiz:hover { background: var(--accent); color: var(--on-accent); }
:root[data-theme="B"] .sec-quiz { border-radius: 0; font-size: 11px; text-transform: uppercase; }
.sec-card[role="button"] { cursor: pointer; }
/* Телефон: после ответа лишние варианты прячем — разбор и «Дальше» помещаются на экран */
@media (max-width: 760px) { .q-opt.is-dim { display: none; } }
/* Подростки: HUD ниже, тест плотнее — чтобы вопрос с разбором помещался на экран вместе с HUD */
:root[data-theme="B"] .hud-cell { padding: 10px 12px; gap: 6px; }
:root[data-theme="B"] .hp-float.is-hud .hp-ring { min-height: 84px; }
@media (max-width: 760px) {
  :root[data-theme="B"] .q { padding: 14px; gap: 10px; }
  :root[data-theme="B"] .q-opt { min-height: 44px; font-size: calc(15px * var(--scale)); }
  :root[data-theme="B"] .q-prompt { font-size: calc(16px * var(--scale)); }
  :root[data-theme="B"] .q-explain { font-size: calc(14px * var(--scale)); }
  :root[data-theme="B"] .page.sec { gap: 10px; }
}
@media (max-width: 640px) { :root[data-theme="B"] .hp-float.is-hud .hp-ring { min-height: 64px; } .hud-in:has(.hp-float.is-hud) { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); } }
.hud-face .hp-float.is-hud .hp-pixel { min-height: 0; width: 100%; height: 100%; }   /* портрет помощника в HUD — по высоте ячейки */

/* =====================================================================
   Экран раздела: воздух вместо «монолита». Страница на всю высоту экрана,
   отступы растут вместе с высотой экрана; помощник уходит вниз, в свободное место.
   ===================================================================== */
.page.sec { min-height: 100dvh; gap: clamp(14px, 2.6vh, 28px); }
.page.sec .sec-stage { flex: 1; gap: clamp(18px, 3.2vh, 36px); }
.page.sec .hp-slot { order: 10; margin-top: auto; padding-top: clamp(8px, 2vh, 24px); }   /* помощник — внизу экрана */
.page.sec .report-row { margin-top: 0; }
/* Внутри вопроса — больше воздуха между частями, если позволяет высота */
.q { gap: clamp(12px, 2.2vh, 22px); }
.q-opts { gap: clamp(8px, 1.4vh, 14px); }
.q-foot:has(.q-tools:not([hidden])) { margin-top: clamp(4px, 1vh, 12px); }
@media (max-width: 760px) {
  .page.sec { gap: clamp(12px, 2.2vh, 24px); padding-bottom: 20px; }
  .page.sec .sec-stage { gap: clamp(16px, 2.8vh, 28px); }
}
.hp-float.is-hud .hp-dock { position: relative; }   /* «×» — в углу портрета, а не панели */
@media (max-width: 760px) { .page.sec { gap: clamp(18px, 2.6vh, 26px); } }
/* Две колонки вариантов — только когда их 4 (у детей 3 варианта — одной колонкой) */
@media (min-width: 900px) { .q-opts:not(:has(> :nth-child(4))) { grid-template-columns: 1fr; } }
/* Кнопки «Назад / Дальше» стоят на одном месте на всех слайдах: карточка слайда (и вопроса)
   растягивается на свободную высоту, а не зависит от длины текста — палец не «промахивается» */
.page.sec .sec-stage > .sl, .page.sec .sec-stage > .q, .page.sec .sec-stage > .tr { flex: 1 0 auto; }
.page.sec .sl { align-content: start; }
.page.sec .q .q-foot { margin-top: auto; }
/* Строка помощника постоянной высоты (облачко в 1–3 строки не сдвигает экран) */
.page.sec .hp-slot { min-height: 104px; display: flex; align-items: center; }
@media (max-width: 760px) { .page.sec .hp-slot { min-height: 96px; } }

/* Подростки: страница раздела — ровно до HUD, чтобы «Сообщить об ошибке» не пряталась под панелью */
:root[data-theme="B"] .b-shell .page.sec { min-height: calc(100dvh - 88px); }
@media (max-width: 640px) { :root[data-theme="B"] .b-shell .page.sec { min-height: calc(100dvh - 72px); } }
/* Облачко из HUD — заметное: жёлтая рамка, появление с «пружинкой», пульс рамки портрета */
.hp-float.is-hud .hp-bubble { border: 2px solid var(--accent); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 14px 40px rgba(0,0,0,.75), 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.hp-float.is-hud .hp-bubble::after { border-color: var(--accent); }
.hp-float.is-hud .hp-bubble.is-on { animation: hp-pop .35s cubic-bezier(.3,1.5,.5,1); }
@keyframes hp-pop { 0% { opacity: 0; transform: translateY(10px) scale(.92); } 100% { opacity: 1; } }
@media (min-width: 641px) { .hp-float.is-hud .hp-bubble.is-on { animation-name: hp-pop-c; } }
@keyframes hp-pop-c { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.92); } 100% { opacity: 1; transform: translate(-50%, 0); } }
.hp-float.is-hud .hp-ring.is-pulse::after { border-width: 3px; animation: hp-pulse-hud 1s ease-out 2; }
@keyframes hp-pulse-hud { 0% { opacity: 1; box-shadow: inset 0 0 0 0 var(--accent); } 100% { opacity: 0; box-shadow: inset 0 0 0 8px transparent; } }
/* Кнопка действия — внизу карточки (у всех карточек на одной линии) */
.sec-card { display: flex; flex-direction: column; }
.sec-card .sec-body { flex: 1; display: flex; flex-direction: column; }
.sec-card .sec-quiz { margin-top: auto; align-self: stretch; justify-content: center; }
.sec-card .sec-status { margin-bottom: 10px; }
.sec-quiz.is-main { background: var(--accent); color: var(--on-accent); }
.sec-quiz.is-main:hover { filter: brightness(1.05); }
.sec-quiz { white-space: nowrap; }
/* Закреплено тестом — зелёная рамка и галочка (спокойно, без заливки) */
.sec-quiz.is-ok { border-color: var(--ok); color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.sec-quiz.is-ok:hover { background: var(--ok); color: #fff; }
/* Помощник спрятан — подсказки (облачко) тоже не показываются: не навязываем */
.hp-float.is-off .hp-bubble, .hp-float.is-off .hp-bubble.is-on { display: none !important; }
/* Кнопка «вернуть помощника» — только значок (круглый), подпись — во всплывающей подсказке */
.hp-back { width: 48px; height: 48px; min-height: 48px; padding: 0; justify-content: center; border-radius: 50%; }
.hp-back-t { display: none; }
:root[data-theme="B"] .hp-back { border-radius: 0; }
/* Вариант «в работе» в меню (например, режим 18+) */
.chip.is-soon { opacity: .55; gap: 6px; }
.menu-choices:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 4 возраста — сеткой 2×2 */