/* css/kid-more.css - узкие телефоны, занятие на телефоне, уровни и карта на главном, домашка, встреча, прятки.
   Порядок файлов в index.html важен: правила ниже перекрывают правила выше; карта файлов - obsidian/Pally/architecture/code-map.md */
/* ---------- Узкие телефоны ---------- */
/* Ничто не должно выходить за ширину экрана: иначе телефон уменьшает всю страницу и справа появляется пустая полоса.
   Въезжающие карточки заданий на мгновение выступают за край, поэтому лишнее по горизонтали обрезается */
/* hidden только у html (переходит на окно браузера), у body - clip: если и у body hidden, body сам становится
   областью прокрутки, и position: sticky (тёмная колонка кабинета и админки) перестаёт держаться и уезжает вверх.
   clip обрезает так же, но области прокрутки не создаёт; старый Safari без clip просто оставит обрезку на html */
html { overflow-x: hidden; max-width: 100%; }
body { overflow-x: clip; max-width: 100%; }
#app { overflow-x: clip; }
.hud-short { display: none; }
.hud { flex-wrap: wrap; row-gap: 8px; }
.hud .hud-btn { margin-left: auto; }
@media (max-width: 430px) {
  .app.map .hud { gap: 4px; }
  /* Не меньше 44 px - цель касания для пальца ребёнка (магазин, «Это не я», «Для родителей»); полоса переносится */
  .app.map .hud-pill { font-size: 13.5px; padding: 0 6px; min-height: 44px; }
  .app.map .hud .hud-btn { width: 44px; height: 44px; }
  .hud-pill.ok .hud-word, .hud-pill.lvl .hud-word { display: none; }
  .hud-pill.lvl .hud-short { display: inline; }
}

/* ---------- Занятие на телефоне: герой внизу ---------- */
/* Задание и ответы идут сверху, под пальцем. Герой стоит в нижней части экрана и занимает место,
   которое раньше пустовало; облачко с его словами - рядом с ним. */
@media (max-width: 899px) {
  .app.lesson { min-height: 100dvh; }
  .app.lesson .answers { order: 2; }
  .app.lesson > .spacer { display: none; }
  .app.lesson .run-pet {
    order: 3; flex: 1 0 auto; margin: 6px 0 26px;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px;
  }
  /* Облачко над героем во всю ширину: длинная подсказка читается строками, а не узким столбиком */
  .app.lesson .run-pet .say-bubble.side { order: -1; flex: none; align-self: stretch; max-width: none; text-align: center; }
  .app.lesson .run-pet .say-bubble.side::before { top: auto; bottom: -8px; left: 50%; transform: translateX(-50%) rotate(45deg); }
  .app.lesson .run-pet .pet-fig { flex: 1 1 110px; min-height: 110px; max-height: 340px; width: auto; aspect-ratio: 1 / 1; max-width: 80%; }
  .app.lesson .run-pet .pet-fig .mascot-svg { width: 100%; height: 100%; }
  .app.lesson .run-pet .pet-fig .mascot-svg img { object-fit: contain; object-position: center bottom; }
  .app.lesson > .btn { order: 4; }
}

/* Две картинки рядом: предмет в жизни и он же в мире увлечения ребёнка */
.big .pics { display: flex; justify-content: center; gap: 14px; margin-bottom: 10px; }
.big .pic-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.big .pic-tile .pic, .big .pic-tile img { width: clamp(84px, 22vw, 120px); height: clamp(84px, 22vw, 120px); display: grid; place-items: center; border-radius: 18px; background: #fff; margin: 0; }
.big .pic-tile .pic { font-size: clamp(48px, 13vw, 70px); line-height: 1; }
.big .pic-tile img { object-fit: contain; padding: 6px; image-rendering: auto; }
.big .pic-tile small { font: 800 12.5px var(--sans); color: #a9b6d8; text-transform: uppercase; letter-spacing: .04em; }

.big .pics.reveal .pic-tile:last-child { animation: twin-in .45s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes twin-in { from { transform: scale(.3) rotate(-12deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .big .pics.reveal .pic-tile:last-child { animation: none; } }

/* ---------- Список уровней предмета на главном экране ---------- */
.board-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; }
.board-tab { flex: none; min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 2px; font-size: 12px; letter-spacing: .02em; }
.board-tab .tab-ic { font-size: 22px; line-height: 1; filter: grayscale(.6) opacity(.75); }
.board-tab[aria-selected=true] .tab-ic { filter: none; }
.board-body { display: block; padding: 14px 14px 18px; }
.lv-wrap { display: none; flex-direction: column; gap: 12px; align-items: stretch; }
.lv-wrap.active, .app.map .lv-wrap.active { display: flex; }
.app.map .lv-wrap:not(.active) { display: none; }
.lv-head { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 10px; color: #fff; }
.lv-head b { font: 800 20px var(--sans); }
.lv-head span { color: #a9b6d8; font: 700 14px var(--sans); }
.lv-bar { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: #0f1830; overflow: hidden; }
.lv-bar i { display: block; height: 100%; border-radius: 99px; background: #ffb81c; transition: width .4s; }
.lv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; position: relative; }
.lv-list::before { content: ""; position: absolute; left: 27px; top: 26px; bottom: 26px; width: 4px; border-radius: 4px; background: #24345c; }
.lv { position: relative; display: flex; align-items: center; gap: 14px; padding: 6px 10px 6px 4px; min-height: 58px; }
.lv-node { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: #24345c; color: #6f7fa8; box-shadow: 0 4px 0 #101a34; position: relative; z-index: 1; }
.lv-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.lv-text b { font: 800 16px/1.25 var(--sans); color: #fff; }
.lv-text small { font: 600 13px/1.3 var(--sans); color: #a9b6d8; }
.lv.lock .lv-text b { color: #7786a8; font-weight: 700; }
.lv.done .lv-node { background: #ffc93c; color: #8a5a00; box-shadow: 0 4px 0 #c98f12; }
.lv.passed .lv-node, .lv.part .lv-node { background: #3a4d80; color: #ffd465; }
.lv.now { padding: 0; }
.lv-go { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 4px; border: 2px solid #ffb81c; border-radius: 20px; background: #24345c; cursor: pointer; font: inherit; box-shadow: 0 6px 0 #101a34; transition: transform .1s; }
.lv-go:active { transform: translateY(4px); box-shadow: 0 2px 0 #101a34; }
.lv-go:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.lv.now .lv-node { width: 60px; height: 60px; border-radius: 20px; margin-left: -2px; background: #ffb81c; color: #3b2500; box-shadow: 0 5px 0 #c47f00; animation: now-ring2 1.8s ease-out infinite; }
.lv.now .lv-text b { font-size: 18px; }
.lv.now .lv-text small { color: #ffd465; }
.lv-dots { display: flex; gap: 5px; margin-top: 5px; }
.lv-dots i { width: 22px; height: 7px; border-radius: 99px; background: #0f1830; }
.lv-dots i.on { background: #4ccf7f; }
@media (prefers-reduced-motion: reduce) { .lv.now .lv-node { animation: none; } }

/* ---------- Карта уровней на главном экране ---------- */
.mp-wrap { display: none; flex-direction: column; gap: 0; align-items: stretch; }
.mp-wrap.active, .app.map .mp-wrap.active { display: flex; }
.app.map .mp-wrap:not(.active) { display: none; }
.board-body { padding: 0; }
.mp-banner { position: sticky; top: 0; z-index: 4; display: flex; flex-direction: column; gap: 4px; padding: 12px 16px 12px; background: #1f2d52; border-bottom: 2px solid rgba(255, 255, 255, .1); }
.mp-lvl { font: 800 12.5px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: #ffd465; }
.mp-banner b { font: 800 19px/1.2 var(--sans); color: #fff; }
.mp-bar { height: 8px; margin-top: 4px; border-radius: 99px; background: #0f1830; overflow: hidden; }
.mp-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffb81c, #ffd965); }
.mp-track { position: relative; width: 100%; max-width: 380px; margin: 0 auto; }
.mp-road { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mp-road path { fill: none; stroke: #2c3d6b; stroke-width: 20; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mp-road path.walked { stroke: #ffb81c; }
.mp-stop { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.mp-node { width: 78px; height: 78px; display: grid; place-items: center; border-radius: 50%; border: 5px solid #fff3c4; background: radial-gradient(circle at 35% 28%, #ffe58a, #ffb81c 62%); color: #5a3600; font: 800 32px var(--sans); box-shadow: 0 7px 0 #c47f00, 0 12px 18px rgba(8, 14, 30, .45); }
.mp-stop.passed .mp-node { border-color: #dfe7ff; }
.mp-stop.part .mp-node { background: radial-gradient(circle at 35% 28%, #7f93c9, #4a5f99 62%); border-color: #a9b6d8; color: #fff; box-shadow: 0 7px 0 #24345c, 0 12px 18px rgba(8, 14, 30, .45); }
.mp-stop.lock .mp-node { width: 66px; height: 66px; border-color: #3a4b78; background: #24345c; color: #6f7fa8; box-shadow: 0 6px 0 #101a34; }
.mp-stars { display: flex; gap: 1px; margin-top: 2px; font-size: 19px; line-height: 1; }
.mp-stars i { font-style: normal; color: #33456f; text-shadow: 0 2px 0 rgba(8, 14, 30, .5); }
.mp-stars i.on { color: #ffd23e; }
.mp-stars i:nth-child(2) { transform: translateY(5px); font-size: 22px; }
.mp-stop.now { z-index: 2; }
.mp-stop.now .mp-node { width: 104px; height: 104px; border: 6px solid #fff; background: radial-gradient(circle at 35% 28%, #8df0a8, #2fbf63 62%); color: #0c4a22; box-shadow: 0 9px 0 #1b8544, 0 16px 26px rgba(8, 14, 30, .5); cursor: pointer; animation: mp-pulse 1.6s ease-in-out infinite; }
.mp-stop.now .mp-node:active { transform: translateY(6px); box-shadow: 0 3px 0 #1b8544; animation: none; }
.mp-stop.now .mp-node:focus-visible { outline: 5px solid #ffd465; outline-offset: 4px; }
/* Ночью текущий уровень - не кнопка (решение 27): спокойный, не пульсирует и не зовёт нажать */
.mp-stop.now.night .mp-node { width: 92px; height: 92px; font-size: 40px; border-color: #a9b6d8; background: radial-gradient(circle at 35% 28%, #7f93c9, #4a5f99 62%); box-shadow: 0 7px 0 #24345c, 0 12px 18px rgba(8, 14, 30, .45); cursor: default; animation: none; }
.mp-stop.now.night .mp-hero { animation: none; }
@keyframes mp-pulse { 50% { transform: scale(1.07); box-shadow: 0 9px 0 #1b8544, 0 0 0 12px rgba(141, 240, 168, .22), 0 16px 26px rgba(8, 14, 30, .5); } }
.mp-tag { margin-top: 12px; padding: 5px 16px; border-radius: 99px; background: #fff; color: #17233f; font: 800 15px var(--sans); text-transform: uppercase; letter-spacing: .05em; box-shadow: 0 4px 0 rgba(8, 14, 30, .4); pointer-events: none; }
.mp-hero { position: absolute; top: -8px; width: 104px; height: 104px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 6px 5px rgba(8, 14, 30, .45)); animation: mp-hop 1.6s ease-in-out infinite; }
.mp-hero.left { right: 96px; }
.mp-hero.right { left: 96px; transform: scaleX(-1); }
@keyframes mp-hop { 50% { translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) { .mp-stop.now .mp-node, .mp-hero { animation: none; } }

/* Рисунок растения вместо значка */
.big .pic.drawn { display: grid; place-items: center; margin: 0 auto 10px; width: clamp(110px, 30vw, 170px); height: clamp(110px, 30vw, 170px); border-radius: 20px; background: #fff; }
.big .pic img { width: 100%; height: 100%; object-fit: contain; padding: 6px; display: block; }
.big .pic-tile .pic img { padding: 4px; }

/* Кабинет: отметка «что проходят в школе» */
.sc-list { display: flex; flex-direction: column; gap: 6px; }
.sc-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1.5px solid var(--pf-line); border-radius: 12px; background: #fff; color: var(--pf-ink); cursor: pointer; text-align: left; font-family: var(--sans); }
.sc-row:hover { border-color: #b9c2d8; }
.sc-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #b9c2d8; }
.sc-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sc-text b { font-size: 15px; font-weight: 700; }
.sc-text small { color: var(--pf-muted); font-size: 13px; }
.sc-row em { flex: none; font-style: normal; font-size: 12px; font-weight: 800; color: #1f7d47; }
.sc-row[aria-pressed=true] { border-color: var(--pf-accent); background: #f1f5ff; }
.sc-row[aria-pressed=true] .sc-dot { border-color: var(--pf-accent); background: radial-gradient(circle, var(--pf-accent) 45%, #fff 50%); }
.sc-row[aria-pressed=true] .sc-text b { font-weight: 800; }
.sc-old { color: #8a5a00; }

/* ---------- Домашка по фото ---------- */
.side-row { flex-wrap: wrap; }
.side-btn.hw { flex: 1 1 100%; order: -1; }
.hw-pick { display: inline-flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; }
.hw-shot { width: 100%; max-width: 300px; max-height: 240px; object-fit: contain; border-radius: 14px; border: 3px solid rgba(255, 255, 255, .85); background: #fff; }
.hw-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 18px; background: #17233f; border: 2px solid rgba(255, 255, 255, .16); color: #fff; }
.hw-card img { flex: none; width: 92px; height: 92px; object-fit: contain; border-radius: 12px; background: #fff; }
.hw-card small { font: 800 12px var(--sans); text-transform: uppercase; letter-spacing: .05em; color: #ffd465; }
.hw-card p { margin: 2px 0 4px; font: 600 15px/1.4 var(--sans); color: #e2e8f8; max-height: 6.4em; overflow: auto; }
.hw-card .link { color: #a9c4ff; font: 700 13px var(--sans); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

.talk-controls .hw-card { align-self: stretch; text-align: left; background: #0f1830; }
.hw-card p { max-height: none; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.hw-rest { text-align: left; padding: 12px 14px; border-radius: 14px; background: rgba(255, 184, 28, .14); border: 1.5px solid rgba(255, 184, 28, .5); font: 600 15px/1.4 var(--sans); }
.hw-rest ul { margin: 6px 0 4px; padding-left: 20px; }
.hw-rest .link { color: #ffd465; background: none; border: 0; padding: 0; font: 800 14px var(--sans); text-decoration: underline; cursor: pointer; }

/* Вторая подсказка: кружки, которые можно пересчитать */
.say-bubble .hint-pic { display: block; margin-top: 6px; font-size: 24px; line-height: 1.3; letter-spacing: 3px; color: #17233f; word-break: break-all; }

/* Сохранённые домашки */
.hw-list { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.hw-cap { font: 800 12.5px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: #ffd465; text-align: left; margin-top: 6px; }
.hw-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 2px solid rgba(255, 255, 255, .18); border-radius: 16px; background: #17233f; color: #fff; cursor: pointer; text-align: left; font-family: var(--sans); }
.hw-item:not(.done) { border-color: #ffb81c; }
.hw-item img, .hw-noimg { flex: none; width: 58px; height: 58px; border-radius: 10px; object-fit: cover; background: #fff; }
.hw-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hw-item-text b { font-size: 15px; font-weight: 800; text-transform: capitalize; }
.hw-item-text small { font-size: 13px; color: #a9b6d8; font-weight: 600; }
.hw-prog { height: 7px; border-radius: 99px; background: #0f1830; overflow: hidden; }
.hw-prog i { display: block; height: 100%; background: #ffb81c; border-radius: 99px; }
.hw-go { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: #ffb81c; color: #3b2500; font-weight: 800; }
.hw-item.done .hw-go { background: #1f8a4a; color: #fff; }
.cb-row.hw-row { grid-template-columns: 46px 1fr; }
.cb-row.hw-row img { grid-row: 1 / 3; width: 46px; height: 46px; border-radius: 8px; object-fit: cover; border: 1px solid var(--pf-line); }
.cb-row.hw-row b { text-transform: capitalize; }

.cb-row.hw-row .hw-seen { grid-column: 2; color: var(--pf-muted); font-size: 12.5px; line-height: 1.4; }
.hw-card p { -webkit-line-clamp: 6; }

.app.cab input[type=password], .app.pform input[type=password] { width: 100%; padding: 13px 15px; border: 1.5px solid var(--pf-line); border-radius: 12px; background: #fff; color: var(--pf-ink); font: 700 20px var(--sans); letter-spacing: .3em; }
.app.cab input[type=password]:focus, .app.pform input[type=password]:focus { outline: none; border-color: var(--pf-accent); box-shadow: 0 0 0 4px rgba(47, 95, 208, .14); }
.cb-btn:disabled { background: #c9cfdd; cursor: default; }

/* Предметы для счёта: между значками заметный промежуток, чтобы на каждый можно было показать пальцем */
.big.count { letter-spacing: .55em; line-height: 1.9; }
.big.count .rows { display: inline-block; text-align: left; margin-right: -.55em; }
@media (max-width: 520px) { .big.count { letter-spacing: .3em; } .big.count .rows { margin-right: -.3em; } }

/* Кнопка, к которой зовёт герой, мигает: ребёнок не читает подписи и ищет глазами */
@keyframes nudge { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 209, 102, .0); } 50% { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(255, 209, 102, .45); } }
.side-btn.talk.nudge, .side-btn.school.nudge, .side-btn.hw.nudge, .mic-btn.nudge { animation: nudge 1s ease-in-out infinite; outline: 3px solid #ffd166; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .side-btn.talk.nudge, .side-btn.school.nudge, .mic-btn.nudge { animation: none; } }

/* Числовой луч и цепочка примеров длинные: шрифт меньше, чтобы строка не рвалась */
.big.ray { font-size: clamp(15px, 3.6vw, 30px); letter-spacing: 0; white-space: nowrap; }
.big.chain { font-size: clamp(22px, 4.6vw, 38px); white-space: nowrap; }
.big.clock, .app.lesson .big.clock { font-size: 96px; line-height: 1.2; }
.big.line { font-size: clamp(20px, 6vw, 44px); white-space: nowrap; letter-spacing: 0; }

/* Разговор «что было в школе»: кнопка на главной и ответы-кнопки под микрофоном */
/* Стоит в группе маленьких кнопок, первой и во всю её ширину (решение 50): без своего места в сетке колонки она
   уходила в верхнюю пустую строку, далеко от остальных кнопок */
.side-btn.school { width: 100%; flex: 1 1 100%; order: -2; justify-content: center; font-size: 22px; gap: 10px; border-color: #ffd166; }
.side-btn.school span { font-size: 16px; }
.talk-choices { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.talk-choices .btn { min-width: 110px; width: auto; }

/* Ответы-картинки в разговоре: большие значки, подпись мелко под ними */
.pic-choice { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 78px; padding: 10px 12px; border: 2px solid #3a4c7a; border-radius: 16px; background: #1b2748; color: #fff; cursor: pointer; font: inherit; }
.pic-choice span { font-size: 38px; line-height: 1.1; }
.pic-choice small { font-size: 12px; opacity: .8; }
.pic-choice:hover, .pic-choice:focus-visible { border-color: #ffd166; }

/* Встреча после перерыва: герой почти во весь экран, по нажатию начинает говорить */
.app.chat .talk-stage.huge .mascot.xl { width: min(72vh, 86vw, 620px); height: min(72vh, 86vw, 620px); }
.app.chat .talk-stage.hello, .talk-stage.hello { grid-area: 1 / 1 / -1 / -1; justify-content: center; align-self: center; justify-self: center; min-height: 82vh; }
.hello-pet { position: relative; border: 0; background: none; padding: 0; cursor: pointer; }
@keyframes wave-hand { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(18deg); } }
.hello-hand { position: absolute; right: -4%; top: 2%; font-size: clamp(54px, 12vw, 110px); transform-origin: 70% 80%; animation: wave-hand .8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hello-hand { animation: none; } }

/* Сердечки, когда героя гладят */
#fx .heart { position: fixed; font-size: 30px; pointer-events: none; z-index: 60; }
/* Прятки: облачко героя сверху, внизу на земле три больших камня. Камень впереди, герой за ним */
.side-btn .side-ic { font-size: 24px; line-height: 1; }
.app.hide { max-width: 1180px; display: flex; flex-direction: column; padding-bottom: 0; }
.hide-say { margin: 4px auto 0; max-width: 560px; text-align: center; }
.app.hide .talk-choices { margin-top: 12px; }
.hide-field { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: clamp(4px, 2vw, 32px); margin-top: auto; padding: 16px clamp(8px, 4vw, 64px) clamp(12px, 4vh, 44px); }
.hide-stone { position: relative; height: clamp(230px, 58vh, 560px); border: 0; background: none; padding: 0; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; }
.hide-stone .rock { position: relative; z-index: 2; width: 100%; max-height: 52%; object-fit: contain; object-position: 50% 100%; transition: transform .3s ease, filter .3s ease; pointer-events: none; user-select: none; }
.hide-stone:not(:disabled):hover .rock, .hide-stone:not(:disabled):focus-visible .rock { transform: translateY(-8px); }
/* Пустой камень покачнулся и потемнел: здесь уже искали */
.hide-stone.empty .rock { animation: rock-wobble .5s ease; filter: brightness(.7) saturate(.8); }
@keyframes rock-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.hide-stone:disabled { cursor: default; }
/* Мягкая тень на земле под камнем: камень стоит, а не висит */
.hide-stone::after { content: ''; position: absolute; z-index: 1; left: 6%; right: 6%; bottom: -4%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 6, 4, .55), rgba(10, 6, 4, 0)); pointer-events: none; }
/* Герой стоит за камнем на той же земле и поднимается из-за него */
.hide-pet { --dx: -50%; position: absolute; z-index: 1; left: 50%; bottom: 0; width: 150%; height: 100%; transform: translateX(var(--dx)); animation: hide-rise .55s cubic-bezier(.2, .9, .3, 1.2) both; }
/* Страница обрезает всё, что шире экрана. У крайних камней герой сдвинут внутрь, чтобы крылья не срезались по краю */
.hide-stone:first-child .hide-pet { --dx: -34%; }
.hide-stone:last-child .hide-pet { --dx: -66%; }
.hide-pet .mascot-svg, .hide-pet .poses { width: 100%; height: 100%; }
.hide-pet img { object-fit: contain; object-position: 50% 100%; }
@keyframes hide-rise { from { transform: translate(var(--dx), 45%); } to { transform: translate(var(--dx), 0); } }
@media (prefers-reduced-motion: reduce) { .hide-pet, .hide-stone.empty .rock { animation: none; } }

/* ---------- Знакомство (решение 106, мокап mockups/znakomstvo.html) ---------- */
/* Своя фиолетовая рамка и плашка «Знакомство»: с первого взгляда видно, что это не урок */
.app.lesson .run-card.diag { border: 3px solid #a67bff; }
.diag-badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  background: #a67bff; color: #fff; border-radius: 999px; padding: 6px 14px;
  font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
/* Плашка и кружки в одну строку: на низком экране не съедают место у ответов */
.diag-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
/* Кружки - только отвеченные и текущий: сколько всего вопросов, заранее неизвестно */
.diag-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.diag-dots i { width: 13px; height: 13px; border-radius: 50%; background: #33415f; }
.diag-dots i.d { background: #a67bff; }
.diag-dots i.now { background: #33415f; box-shadow: inset 0 0 0 2px #a67bff; }
/* Экран перед знакомством: короткое объяснение и одна жёлтая кнопка */
.app.lesson .diag-intro { align-items: center; text-align: center; }
.app.lesson .diag-intro .diag-badge { align-self: center; }
.app.lesson .diag-intro h2 { margin: 4px 0 0; font-size: 28px; color: #fff; }
.app.lesson .diag-intro p { margin: 0; color: #c9d2ec; font-size: 18px; line-height: 1.45; }
.app.lesson .diag-intro .btn.go-btn {
  width: min(100%, 280px); margin-top: 8px; min-height: 64px; border: 0; border-radius: 16px;
  background: #ffb81c; color: #3b2500; font-size: 22px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; box-shadow: 0 6px 0 #c47f00; animation: none;
}
.app.lesson .diag-intro .btn.go-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 #c47f00; }
@media (min-width: 900px) {
  .app.lesson .diag-intro { padding: 30px; }
  .app.lesson .diag-intro h2 { font-size: 32px; }
  .diag-dots i { width: 15px; height: 15px; }
  .diag-dots { gap: 8px; }
}

/* ---------- Занятие без прокрутки на любой высоте экрана ---------- */
/* Первоклассник не догадается прокрутить вниз: все ответы и кнопка под ними («Пока не знаю», «Дальше»)
   должны быть на экране и на низком окне (планшет лёжа 1024x768, ноутбук 1024x600, телефон 375x812).
   Место отдают картинка и слово задания, отступы и шрифт вопроса - они уменьшаются вместе с высотой экрана.
   Кнопки ответа не ниже 64 px. На высоком экране всё как раньше: каждое значение упирается в прежнее.
   --vh - процент видимой высоты (dvh учитывает панели браузера на iPad и телефоне) */
.app.lesson { --vh: 1vh; }
@supports (height: 1dvh) { .app.lesson { --vh: 1dvh; } }
@media (max-width: 899px) {
  .app.lesson { gap: clamp(8px, calc(var(--vh) * 1.7), 14px); padding-top: clamp(8px, calc(var(--vh) * 2), 16px); padding-bottom: clamp(10px, calc(var(--vh) * 2.4), 32px); }
  .app.lesson .run-card { padding: clamp(10px, calc(var(--vh) * 2), 16px) 18px; gap: clamp(6px, calc(var(--vh) * 1.2), 10px); }
  .app.lesson .run-card .question { font-size: clamp(18px, calc(var(--vh) * 2.6), 21px); }
  .app.lesson .big { font-size: clamp(28px, calc(var(--vh) * 4.4), 44px); padding: clamp(6px, calc(var(--vh) * 1.6), 18px) 10px; }
  /* Три коротких варианта (числа, слоги) - в один ряд: второй ряд ответов уходил под палец ниже экрана */
  .app.lesson .options.n3:not(.one):not(.long) { grid-template-columns: repeat(3, 1fr); }
  .app.lesson .big.emoji { font-size: clamp(24px, calc(var(--vh) * 4), 34px); }
  /* Предметы для счёта: ряды ближе друг к другу, но пятёрки всё равно разделены */
  .app.lesson .big.count { line-height: 1.6; }
  .app.lesson .big.picture { font-size: clamp(56px, calc(var(--vh) * 9), 84px); }
  .app.lesson .big .pic-tile .pic, .app.lesson .big .pic-tile img { width: clamp(60px, min(22vw, calc(var(--vh) * 10)), 120px); height: clamp(60px, min(22vw, calc(var(--vh) * 10)), 120px); }
  .app.lesson .big .pic-tile .pic { font-size: clamp(36px, min(13vw, calc(var(--vh) * 6)), 70px); }
  .app.lesson .big .pic.drawn { width: clamp(72px, min(30vw, calc(var(--vh) * 13)), 170px); height: clamp(72px, min(30vw, calc(var(--vh) * 13)), 170px); }
  /* Герой уступает место ответам: на низком экране он меньше, но не исчезает */
  .app.lesson .run-pet { margin: 2px 0 clamp(6px, calc(var(--vh) * 1.2), 26px); gap: 8px; }
  .app.lesson .run-pet .pet-fig { flex-basis: 64px; min-height: 64px; }
}
@media (min-width: 900px) {
  .app.lesson {
    padding-top: clamp(8px, calc(var(--vh) * 2.4), 24px); padding-bottom: clamp(8px, calc(var(--vh) * 2.4), 34px);
    row-gap: clamp(8px, calc(var(--vh) * 1.6), 18px);
  }
  .app.lesson .run-pet .pet-fig { width: min(calc(var(--vh) * 48), 360px); }
  .app.lesson .topbar .icon-btn { width: clamp(44px, calc(var(--vh) * 6.5), 52px); height: clamp(44px, calc(var(--vh) * 6.5), 52px); }
  .app.lesson .run-card { padding: clamp(12px, calc(var(--vh) * 2.6), 26px) 30px; gap: clamp(8px, calc(var(--vh) * 1.5), 16px); }
  .app.lesson .run-card .question { font-size: clamp(21px, calc(var(--vh) * 3.4), 30px); line-height: 1.25; }
  .app.lesson .big { font-size: clamp(32px, calc(var(--vh) * 6.6), 68px); padding: clamp(6px, calc(var(--vh) * 2.2), 26px) 16px; }
  .app.lesson .big.emoji { font-size: clamp(26px, calc(var(--vh) * 4.8), 46px); }
  .app.lesson .big.picture { font-size: clamp(60px, calc(var(--vh) * 11.5), 120px); }
  .app.lesson .big.clock { font-size: clamp(56px, calc(var(--vh) * 9.5), 96px); }
  .app.lesson .big .pic-tile .pic, .app.lesson .big .pic-tile img { width: clamp(60px, calc(var(--vh) * 11), 120px); height: clamp(60px, calc(var(--vh) * 11), 120px); }
  .app.lesson .big .pic-tile .pic { font-size: clamp(36px, calc(var(--vh) * 6.5), 70px); }
  .app.lesson .big .pic.drawn { width: clamp(72px, calc(var(--vh) * 15), 170px); height: clamp(72px, calc(var(--vh) * 15), 170px); }
  .app.lesson .options { gap: clamp(8px, calc(var(--vh) * 1.5), 16px); }
  .app.lesson .option { min-height: clamp(64px, calc(var(--vh) * 10.5), 104px); font-size: clamp(24px, calc(var(--vh) * 4), 34px); }
  .app.lesson .option.pic { font-size: clamp(40px, calc(var(--vh) * 6.5), 64px); }
  .app.lesson .entry { min-height: clamp(64px, calc(var(--vh) * 9), 88px); }
  .app.lesson .key { min-height: clamp(64px, calc(var(--vh) * 8.5), 76px); }
  .app.lesson > .btn { min-height: clamp(56px, calc(var(--vh) * 8), 70px); font-size: clamp(20px, calc(var(--vh) * 3), 24px); }
}
/* Низкое окно планшета или ноутбука: три варианта и четыре коротких встают в один ряд вместо двух */
@media (min-width: 900px) and (max-height: 900px) {
  .app.lesson .options.n3:not(.one) { grid-template-columns: repeat(3, 1fr); }
  .app.lesson .options.n4:not(.one):not(.long) { grid-template-columns: repeat(4, 1fr); }
}
/* Совсем низкое окно (ноутбук 1024x600): длинная подсказка в облачке не выталкивает героя ниже экрана */
@media (min-width: 900px) and (max-height: 700px) {
  .app.lesson .run-pet .pet-fig { width: min(calc(var(--vh) * 38), 360px); }
  .app.lesson .run-pet { gap: 12px; }
}