/* css/home.css - главный экран (вторая версия), урок в игровом стиле, остальные детские экраны, позы героя.
   Порядок файлов в index.html важен: правила ниже перекрывают правила выше; карта файлов - obsidian/Pally/architecture/code-map.md */
/* ---------- Главный экран, вторая версия: нарисованный пейзаж, герой слева, доска с дорожкой справа ---------- */
/* Пейзаж мира - отдельный слой во всё окно (position: fixed, под .app с z-index 1), а не фон body с
   background-attachment: fixed: Safari на iPad и iPhone fixed у фона не поддерживает, а Chrome рисует такой фон
   только в первом окне - на длинной странице (выбор героя на телефоне, занятие) ниже был обрыв и светлая заливка.
   Высота 100vh, а не bottom: 0: в Safari 100vh - окно со спрятанной адресной строкой, слой не отстаёт от неё
   при прокрутке. Пузырьки kid.css и облака выбора здесь по-прежнему не показываются (решение по виду не менялось) */
body[data-world="pick"]::after { display: none; }
body[data-world]::before {
  display: block; content: ""; position: fixed; top: 0; right: 0; bottom: auto; left: 0; height: 100vh; z-index: 0;
  pointer-events: none; animation: none; opacity: 1; background: none center / cover no-repeat;
}
body[data-world="pick"] { background: #9fd8ef; }
body[data-world="bear"] { background: #9fcf7f; }
body[data-world="alien"] { background: #3a2a80; }
body[data-world="dragon"] { background: #f7b56b; }
body[data-world="pick"]::before, body[data-world="bear"]::before { background-image: url(../img/bg-bear.jpg); }
body[data-world="alien"]::before { background-image: url(../img/bg-alien.jpg); }
body[data-world="dragon"]::before { background-image: url(../img/bg-dragon.jpg); }

.app.map { max-width: 1080px; gap: 14px; padding-bottom: 28px; }
.app.map .hud-pill { min-height: 44px; box-shadow: 0 3px 0 rgba(20, 40, 60, .16); }
.app.map .hud-btn { background: #fff; box-shadow: 0 3px 0 rgba(20, 40, 60, .16); }

.home-grid { display: flex; flex-direction: column; gap: 22px; }
.home-left { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.app.map .say-bubble {
  margin: 0; max-width: 420px; padding: 14px 22px; border-radius: 22px;
  font-size: 21px; text-align: center;
  box-shadow: 0 4px 0 rgba(20, 40, 60, .12);
}
.app.map .say-bubble::before { top: auto; bottom: -9px; left: 50%; width: 20px; height: 20px; transform: translateX(-50%) rotate(45deg); }
.app.map .home-hero .pet-fig { width: min(52vw, 240px); height: min(52vw, 240px); padding: 0; border: 0; background: none; cursor: pointer; }
.app.map .pet-shadow { background: rgba(20, 40, 60, .18); }

.play-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; max-width: 340px; min-height: 72px; padding: 0 28px;
  border: 0; border-radius: 22px;
  background: #34b866; color: #fff; cursor: pointer;
  font: 800 28px var(--sans); letter-spacing: .01em;
  box-shadow: 0 7px 0 #228749, 0 14px 24px rgba(20, 60, 40, .25);
  transition: transform .1s, box-shadow .1s;
}
.play-btn:hover { background: #3cc571; }
.play-btn:active { transform: translateY(6px); box-shadow: 0 1px 0 #228749; }
.side-row { display: flex; gap: 12px; width: 100%; max-width: 340px; }
.side-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 12px; border: 0; border-radius: 18px;
  background: #fff; color: var(--ink); cursor: pointer;
  font: 800 17px var(--sans);
  box-shadow: 0 5px 0 rgba(20, 40, 60, .16);
  transition: transform .1s, box-shadow .1s;
}
.side-btn.talk svg { color: #ec6630; }
.side-btn.shop svg { color: #7a4fdc; }
.side-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 rgba(20, 40, 60, .16); }
.side-btn:disabled { opacity: .6; cursor: default; }
.play-btn:focus-visible, .side-btn:focus-visible, .board-tab:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }

.board {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 30px; background: #fff;
  box-shadow: 0 8px 0 rgba(20, 40, 60, .12), 0 20px 40px rgba(20, 40, 60, .18);
}
.board-tabs { display: flex; gap: 6px; padding: 8px; background: #eef3f6; }
.board-tab {
  flex: 1; min-height: 50px; border: 0; border-radius: 22px;
  background: none; color: #6b7c88; cursor: pointer;
  font: 800 18px var(--sans);
}
.board-tab[aria-selected=true] { background: #fff; box-shadow: 0 2px 0 rgba(20, 40, 60, .1); }
.board-tab.t-math[aria-selected=true] { color: #1f78c4; }
.board-tab.t-rus[aria-selected=true] { color: #d24c33; }
.board-body { padding: 18px 12px 8px; display: flex; justify-content: center; }
.app.map .trail { display: flex; }
.app.map .trail-line .road { stroke: #e9eff3; stroke-width: 22; }
.app.map .trail-line .dash { display: none; }
.app.map .stop { margin: -38px 0 0 -88px; }
.app.map .stop.now { margin-top: -48px; }
.app.map .node { width: 76px; height: 76px; border: 0; box-shadow: 0 6px 0 rgba(20, 40, 60, .16); }
.app.map .node.done { background: #ffc93c; color: #8a5a00; box-shadow: 0 6px 0 #dba318; }
.app.map .node.part { background: #ffe7a3; color: #a87a16; box-shadow: 0 6px 0 #ecc968; }
.app.map .node.lock { background: #e6ecf0; color: #a5b2bc; box-shadow: 0 6px 0 #d2dae0; }
.app.map button.node.now { width: 96px; height: 96px; background: #34b866; box-shadow: 0 7px 0 #228749; animation: now-ring 1.8s ease-out infinite; }
.app.map .stop-label { margin-top: 12px; padding: 0; background: none; font: 700 14px/1.25 var(--sans); color: #4a5a66; }
.app.map .stop.now .stop-label { font-size: 16px; color: var(--ink); }
.app.map .stop.lock .stop-label { opacity: 1; color: #9aa7b1; }
@keyframes now-ring {
  0% { box-shadow: 0 7px 0 #228749, 0 0 0 0 rgba(52, 184, 102, .45); }
  100% { box-shadow: 0 7px 0 #228749, 0 0 0 18px rgba(52, 184, 102, 0); }
}

@media (min-width: 900px) {
  .app.map { height: 100vh; overflow: hidden; }
  .home-grid { flex: 1; min-height: 0; flex-direction: row; align-items: stretch; gap: 40px; }
  .home-left { flex: 1; justify-content: center; gap: 16px; }
  .app.map .home-hero .pet-fig { width: min(38vh, 320px); height: min(38vh, 320px); }
  .app.map .say-bubble { font-size: 23px; }
  .board { width: 440px; flex: none; }
  .board-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
}
@media (prefers-reduced-motion: reduce) { .app.map button.node.now { animation: none; } }

/* Герой стоит на земле: не подлетает, а слегка «дышит» от ступней; тень неподвижна и прямо под ногами */
@keyframes idle { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, .975); } }
@keyframes hop-soft { 0% { transform: translateY(0); } 40% { transform: translateY(-14px); } 100% { transform: translateY(0); } }
.pet-fig .mascot-svg, .mascot .mascot-svg { transform-origin: 50% 97%; filter: none; }
.pet-shadow { animation: none; width: 62%; height: 16px; margin: -15px auto 0; background: rgba(10, 20, 40, .28); filter: blur(3px); position: relative; z-index: -1; }
.home-hero, .run-pet, .pet-card { isolation: isolate; }
.app.map .home-hero .pet-fig { max-width: none; height: auto; }
.app.map .home-hero { margin-top: 4px; }

/* Игровой вид для школьника, а не для малыша: тёмные панели, плотные цвета, прямые углы покрупнее */
.app.map .hud-pill, .app.map .hud-btn { background: #17233f; color: #fff; border: 2px solid rgba(255, 255, 255, .16); box-shadow: 0 4px 0 rgba(8, 14, 30, .45); }
.app.map .hud-pill { border-radius: 14px; font-size: 18px; }
.app.map .hud-pill.lvl { background: #f5a623; border-color: #ffd27a; color: #3b2500; }
.app.map .hud-pill.ok { background: #1f8a4a; color: #fff; }
.app.map .hud-btn { border-radius: 14px; }
.app.map .say-bubble { border-radius: 16px; font-size: 21px; font-weight: 700; box-shadow: 0 4px 0 rgba(8, 14, 30, .3); }
.play-btn { border-radius: 16px; background: #ffb81c; color: #3b2500; text-transform: uppercase; letter-spacing: .06em; font-size: 26px; box-shadow: 0 7px 0 #c47f00, 0 14px 24px rgba(8, 14, 30, .35); }
.play-btn:hover { background: #ffc640; }
.play-btn:active { box-shadow: 0 1px 0 #c47f00; }
.side-btn { border-radius: 14px; background: #17233f; color: #fff; border: 2px solid rgba(255, 255, 255, .16); box-shadow: 0 5px 0 rgba(8, 14, 30, .45); }
.side-btn.talk svg { color: #ff9a5c; }
.side-btn.shop svg { color: #c3a2ff; }
.side-btn:active:not(:disabled) { box-shadow: 0 1px 0 rgba(8, 14, 30, .45); }

.board { border-radius: 22px; background: #17233f; border: 2px solid rgba(255, 255, 255, .16); box-shadow: 0 8px 0 rgba(8, 14, 30, .45), 0 24px 44px rgba(8, 14, 30, .4); }
.board-tabs { background: #0f1830; }
.board-tab { border-radius: 14px; color: #8794b8; text-transform: uppercase; letter-spacing: .05em; font-size: 16px; }
.board-tab[aria-selected=true] { background: #2a3b66; box-shadow: none; }
.board-tab.t-math[aria-selected=true] { color: #7cc4ff; }
.board-tab.t-rus[aria-selected=true] { color: #ff9c86; }
.board-tab.t-nature[aria-selected=true] { color: #7be0a4; }
.board-tab.t-world[aria-selected=true] { color: #d3a6ff; }
.board-tabs { flex-wrap: wrap; }
.board-tab { flex: 1 1 40%; }
@media (min-width: 900px) { .board-tab { font-size: 14px; letter-spacing: .02em; padding-left: 6px; padding-right: 6px; } }
.board-body { scrollbar-color: #2a3b66 transparent; }
.app.map .trail-line .road { stroke: #24345c; stroke-width: 14; stroke-dasharray: 2 22; }
.app.map .node { border-radius: 22px; }
.app.map .node.lock { background: #24345c; color: #6f7fa8; box-shadow: 0 6px 0 #101a34; }
.app.map .node.part { background: #3a4d80; color: #ffd465; box-shadow: 0 6px 0 #101a34; }
.app.map button.node.now { border-radius: 26px; background: #ffb81c; color: #3b2500; box-shadow: 0 7px 0 #c47f00; animation: now-ring2 1.8s ease-out infinite; }
.app.map .stop-label { color: #b6c2e2; }
.app.map .stop.now .stop-label { color: #fff; }
.app.map .stop.lock .stop-label { color: #6f7fa8; }
@keyframes now-ring2 {
  0% { box-shadow: 0 7px 0 #c47f00, 0 0 0 0 rgba(255, 184, 28, .5); }
  100% { box-shadow: 0 7px 0 #c47f00, 0 0 0 18px rgba(255, 184, 28, 0); }
}

@media (min-width: 900px) {
  /* Герой стоит внизу на земле во весь рост, реплика и кнопки — рядом с ним, доска — справа */
  .app.map { max-width: 1240px; padding-bottom: 34px; }
  .home-grid { gap: 28px; }
  .home-left {
    display: grid; grid-template-columns: auto minmax(260px, 340px); column-gap: 26px; row-gap: 16px;
    grid-template-areas: "hero bubble" "hero play" "hero side" "hero ribbon";
    align-content: center; justify-content: center; align-items: center;
  }
  .home-left .home-hero { grid-area: hero; align-self: end; margin: 0; height: 100%; justify-content: flex-end; }
  .home-left .say-bubble { grid-area: bubble; align-self: end; text-align: left; max-width: none; }
  .app.map .home-left .say-bubble::before { bottom: auto; top: 50%; left: -8px; transform: translateY(-50%) rotate(45deg); }
  .home-left .play-btn { grid-area: play; }
  .home-left .side-row { grid-area: side; }
  .home-left .ribbon { grid-area: ribbon; }
  .app.map .home-hero .pet-fig { width: min(58vh, 460px); }
  .board { width: 400px; }
}
/* iPad лёжа и ноутбуки поуже (900-1299): герой, реплика и доска не помещались в ширину, и доска с вкладками
   «Природа» и «Мир вокруг» уходила за правый край. Здесь размеры зависят от ширины экрана, а не от высоты:
   герой - не больше 27% ширины, доска - 36%, но не уже 360 px (иначе не влезут названия вкладок) */
/* Колонка кнопок без нижней границы ширины: при 200 px на ширине 900 герой (27vw = 243 px), промежуток и кнопки
   были на 5 px шире колонки, сетка по центру вылезала за правый край на 2-3 px (содержимое 503 px при видимых 500).
   Теперь кнопкам достаётся ровно то, что осталось после героя */
@media (min-width: 900px) and (max-width: 1299px) {
  .home-left { min-width: 0; grid-template-columns: auto minmax(0, 340px); }
  .app.map .home-hero .pet-fig { width: min(58vh, 460px, 27vw); height: auto; }
  .board { width: clamp(360px, 36vw, 400px); }
}
@media (min-width: 900px) {
  .home-left {
    grid-template-rows: 1fr auto auto auto auto 1.4fr; align-content: stretch;
    grid-template-areas: "hero ." "hero bubble" "hero play" "hero side" "hero ribbon" "hero .";
  }
  .app.map .home-left .say-bubble { text-align: left; }
}
/* Высота главного экрана - видимая часть окна. В Safari на iPad 100vh больше видимой части (не учитывает
   панель браузера), и низ экрана уходил под неё; dvh - ровно видимая часть. Браузер, не знающий dvh,
   пропустит это правило и оставит 100vh выше */
@media (min-width: 900px) {
  .app.map { height: 100dvh; }
}
/* Колонка с героем и кнопками прокручивается при любой высоте окна: на ширине 900-960 колонка узкая, реплика
   и кнопки переносятся в несколько строк, и лента «Уже твоё» уходила под низ и на высоком окне. Отступ внутрь
   равен отступу наружу: сетка стоит ровно там же, где без прокрутки.
   Прокручиваемая колонка обрезает всё, что выходит за её край. Мигающая кнопка («Что было в школе?», «Не спится?»,
   «Поболтать», анимация nudge) на пике растёт в 1.08 раза и даёт кольцо 12 px: кнопка во всю ширину колонки
   (до 340 px) выходит за свой край на 0.04*340 + 12*1.08 ≈ 27 px вбок и ≈ 16 px вверх и вниз. Поэтому запас
   справа 28 px (там кнопки; слева герой, ему хватает 8 px), сверху и снизу 18 px. Справа запас уходит в промежуток
   до доски (28 px), снизу - в нижний отступ экрана (34 px), сверху на 4 px заходит под полосу с алмазами, поэтому
   она поднята над колонкой, чтобы нажатия по ней не перехватывались. Вбок колонка не прокручивается
   (overflow-x: hidden): раньше растущая кнопка расширяла содержимое, и на планшете колонку можно было сдвинуть пальцем */
@media (min-width: 900px) {
  .home-left { min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; padding: 18px 28px 18px 8px; margin: -18px -28px -18px -8px; }
  .app.map .hud { position: relative; z-index: 2; }
}
/* Низкое окно (планшет лёжа, ноутбук с панелями): экран не прокручивается целиком, и нижние кнопки
   «Магазин», «Поболтать», «Прятки» обрезались. Здесь кнопки и реплика плотнее, а если всё равно не влезает
   (длинная реплика, лента наград) - колонка с кнопками прокручивается сама, доска справа остаётся на месте */
@media (min-width: 900px) and (max-height: 760px) {
  .app.map { padding-top: 10px; padding-bottom: 12px; gap: 10px; }
  /* Сетка стоит как раньше (6 px сверху, 8 px с боков, 12 px снизу от края колонки), а запас под кольцо мигающей
     кнопки такой же, как выше: лишнее вынесено наружу отрицательным отступом */
  .home-left { min-height: 0; overflow-x: hidden; overflow-y: auto; row-gap: 10px; padding: 18px 28px 18px 8px; margin: -12px -20px -6px 0; scrollbar-width: thin; }
  .app.map .home-left .say-bubble { font-size: 19px; padding: 10px 16px; }
  .app.map .play-btn { min-height: 56px; font-size: 22px; }
  .app.map .side-row { gap: 8px; }
  .app.map .side-btn { min-height: 46px; }
  .app.map .side-btn.school { min-height: 46px; margin-bottom: 0; }
  .app.map .ribbon { padding: 6px 14px; }
  /* Список наград на низком окне выталкивал кнопки: здесь только сколько их (решение 41) */
  .app.map .ribbon .rb-full { display: none; }
  .app.map .ribbon .rb-short { display: inline; }
}

/* ---------- Урок в игровом стиле: тёмная панель задания, яркие кнопки ответов, герой стоит на земле ---------- */
.app.lesson .icon-btn { border-radius: 14px; background: #17233f; color: #fff; border: 2px solid rgba(255, 255, 255, .16); box-shadow: 0 4px 0 rgba(8, 14, 30, .45); }
.app.lesson .steps i { border-radius: 9px; border: 2px solid rgba(255, 255, 255, .2); background: #17233f; }
.app.lesson .steps i.now { background: #ffb81c; border-color: #ffd27a; box-shadow: none; }
.app.lesson .steps i.done.star { background: #ffb81c; color: #3b2500; border-color: #ffd27a; }
.app.lesson .steps i.done.ok { background: #2fae62; border-color: #7be0a4; }
.app.lesson .steps i.done.try { background: #4a5d8f; }
.app.lesson .steps i.done.skip { background: #2a3658; border-style: dashed; border-color: #8fa3cf; color: #c9d5f0; }
.app.lesson .progress { background: #17233f; }
.app.lesson .combo { color: #fff; background: #17233f; padding: 6px 12px; border-radius: 12px; }

.app.lesson .run-card {
  border-radius: 22px; background: #17233f; color: #fff;
  border: 2px solid rgba(255, 255, 255, .16);
  box-shadow: 0 8px 0 rgba(8, 14, 30, .45), 0 24px 44px rgba(8, 14, 30, .4);
}
.app.lesson .stage { color: #ffb81c; }
.app.lesson .run-card .question { color: #fff; }
.app.lesson .run-card .big { background: #24345c; color: #fff; border-radius: 16px; }
.app.lesson .run-card .icon-btn { background: #24345c; box-shadow: none; }

.app.lesson .option { border-radius: 18px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.app.lesson .option.c0 { background: #2f7de1; box-shadow: 0 6px 0 #1d56a6; }
.app.lesson .option.c1 { background: #8a55e6; box-shadow: 0 6px 0 #5f35ad; }
.app.lesson .option.c2 { background: #12a5a0; box-shadow: 0 6px 0 #0b716e; }
.app.lesson .option.c3 { background: #ef7a2d; box-shadow: 0 6px 0 #b4541a; }
.app.lesson .option:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 rgba(8, 14, 30, .5); }
.app.lesson .option.right { background: #2fae62; box-shadow: 0 6px 0 #1b7740; }
.app.lesson .option.wrong { background: #33415f; color: #7786a8; box-shadow: none; text-shadow: none; }
.app.lesson .option:disabled:not(.right):not(.wrong) { opacity: .45; }
.app.lesson .entry { border: 3px dashed #ffb81c; background: #17233f; color: #fff; border-radius: 18px; }
.app.lesson .entry.empty { color: #6f7fa8; }
.app.lesson .entry.right { border-style: solid; border-color: #2fae62; background: #17402c; color: #9ff0bf; }
.app.lesson .key { border-radius: 16px; background: #17233f; color: #fff; border: 2px solid rgba(255, 255, 255, .14); box-shadow: 0 5px 0 rgba(8, 14, 30, .5); }
.app.lesson .key:active:not(:disabled) { background: #24345c; box-shadow: 0 1px 0 rgba(8, 14, 30, .5); }
.app.lesson .key.ok-key { background: #ffb81c; color: #3b2500; border-color: #ffd27a; box-shadow: 0 5px 0 #c47f00; }
.app.lesson .key.ok-key:disabled { background: #33415f; color: #7786a8; border-color: transparent; box-shadow: none; }
.app.lesson > .btn.go-btn {
  border: 0; border-radius: 16px; background: #ffb81c; color: #3b2500;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 800;
  box-shadow: 0 7px 0 #c47f00, 0 14px 24px rgba(8, 14, 30, .35); animation: none;
}
.app.lesson > .btn.ghost { border-radius: 14px; background: #17233f; color: #fff; border: 2px solid rgba(255, 255, 255, .16); }

.app.lesson .say-bubble.side { border-radius: 16px; box-shadow: 0 4px 0 rgba(8, 14, 30, .3); }
.app.lesson .run-pet .pet-fig { position: relative; isolation: isolate; }
.app.lesson .run-pet .pet-fig::after {
  content: ""; position: absolute; left: 19%; right: 19%; bottom: -3px; height: 14px; z-index: -1;
  border-radius: 50%; background: rgba(10, 20, 40, .3); filter: blur(3px);
}
.run-pet.think .mascot-svg { animation: idle 2.6s ease-in-out infinite; }

@media (min-width: 900px) {
  .app.lesson { max-width: 1240px; min-height: 100vh; grid-template-columns: 380px 1fr; grid-template-rows: auto auto auto auto 1fr; padding-bottom: 34px; }
  .app.lesson .run-pet {
    grid-row: 2 / -1; align-self: end; position: sticky; top: auto; bottom: 34px;
    flex-direction: column-reverse; justify-content: flex-start; gap: 22px;
  }
  .app.lesson .run-pet .pet-fig { width: min(52vh, 360px); }
  .app.lesson .say-bubble.side::before { top: auto; bottom: -9px; left: 50%; transform: translateX(-50%) rotate(45deg); }
  .app.lesson .run-card { border-radius: 22px; }
  .app.lesson .option { border-radius: 20px; }
  .app.lesson > .btn { align-self: start; min-height: 70px; font-size: 24px; }
}
@media (min-width: 900px) { .app.lesson .run-pet .pet-fig { max-width: none; } .app.lesson .say-bubble.side { max-width: 340px; } }
.app.lesson .option:disabled:not(.right):not(.wrong) { opacity: 1; background: #33415f; color: #7786a8; box-shadow: none; text-shadow: none; }

/* ---------- Игровой стиль для остальных детских экранов: выбор героя, разговор, итог, магазин ---------- */
.app.game { --panel: #17233f; --panel-2: #24345c; --line: rgba(255, 255, 255, .16); --gold: #ffb81c; --gold-dark: #c47f00; }
.app.game .brand.sm { display: none; }
.app.game .topbar h1 { color: #fff; text-shadow: 0 3px 0 rgba(8, 14, 30, .45); font-size: 30px; }
.app.game .icon-btn { border-radius: 14px; background: var(--panel); color: #fff; border: 2px solid var(--line); box-shadow: 0 4px 0 rgba(8, 14, 30, .45); }
.app.game .card {
  border-radius: 22px; background: var(--panel); color: #fff; border: 2px solid var(--line);
  box-shadow: 0 8px 0 rgba(8, 14, 30, .45), 0 24px 44px rgba(8, 14, 30, .4);
}
.app.game .card h1, .app.game .card h2, .app.game .card label { color: #fff; }
.app.game .card .muted, .app.game .card .small { color: #a9b6d8; }
.app.game .btn {
  border: 0; border-radius: 16px; background: var(--gold); color: #3b2500;
  text-transform: uppercase; letter-spacing: .05em; font-weight: 800;
  box-shadow: 0 6px 0 var(--gold-dark), 0 12px 22px rgba(8, 14, 30, .3); animation: none;
}
.app.game .btn:hover { background: #ffc640; }
.app.game .btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--gold-dark); }
.app.game .btn:disabled { background: #33415f; color: #7786a8; box-shadow: none; opacity: 1; }
.app.game .btn.ghost { background: var(--panel); color: #fff; border: 2px solid var(--line); box-shadow: 0 5px 0 rgba(8, 14, 30, .45); text-transform: none; letter-spacing: 0; }
.app.game .btn.ghost:hover { background: var(--panel-2); }
.app.game > .link, .app.game .talk-controls .link { color: #fff; text-shadow: 0 1px 3px rgba(8, 14, 30, .7); }
.app.game .chip { border-radius: 14px; background: var(--panel-2); color: #fff; border: 2px solid var(--line); }
.app.game .chip[aria-pressed=true] { background: var(--gold); border-color: #ffd27a; color: #3b2500; }
.app.game input[type=text] { border-radius: 14px; background: #0f1830; color: #fff; border: 2px solid var(--line); }
.app.game input[type=text]::placeholder { color: #7786a8; }
.app.game input[type=text]:focus { outline: none; border-color: var(--gold); }
.app.game .badge { border-radius: 10px; background: var(--panel-2); color: #fff; }
.app.game .badge.gem { background: var(--panel); border: 2px solid var(--line); }
.app.game .badge.ok { background: #1f8a4a; color: #fff; }
.app.game .progress { background: #0f1830; }
.app.game .progress > i { background: var(--gold); }
.app.game .gems-earned { font-family: var(--sans); font-weight: 800; font-size: 34px; color: var(--gold); }
.app.game .record { color: var(--gold); }
.app.game .say-bubble { border-radius: 16px; box-shadow: 0 4px 0 rgba(8, 14, 30, .3); }
.app.game .pet-fig { position: relative; isolation: isolate; }

/* Выбор героя: каждая карточка — окно в мир героя */
.app.wide.game { max-width: 1040px; }
.app.game .pick-title { color: #fff; text-shadow: 0 4px 0 rgba(8, 14, 30, .5), 0 10px 22px rgba(8, 14, 30, .35); }
.app.game .pet-card {
  border: 3px solid rgba(255, 255, 255, .85); border-radius: 22px; padding: 18px 12px 0; overflow: hidden;
  background-size: cover; background-position: center bottom;
  box-shadow: 0 8px 0 rgba(8, 14, 30, .45), 0 22px 40px rgba(8, 14, 30, .35);
}
.app.game .pet-card.w-bear { background-image: url(../img/bg-bear.jpg); }
.app.game .pet-card.w-alien { background-image: url(../img/bg-alien.jpg); }
.app.game .pet-card.w-dragon { background-image: url(../img/bg-dragon.jpg); }
.app.game .pet-card .pet-fig { max-width: 260px; margin: 0 auto; }
.app.game .pet-card b {
  display: block; align-self: stretch; margin: 6px -12px 0; padding: 12px 6px;
  background: var(--panel); color: #fff; text-transform: uppercase; letter-spacing: .06em; text-shadow: none;
}
.app.game .pet-card[aria-pressed=true] { border-color: var(--gold); box-shadow: 0 0 0 5px var(--gold), 0 18px 36px rgba(8, 14, 30, .45); }
.app.game .pet-card[aria-pressed=true] b { background: var(--gold); color: #3b2500; }
.app.game .pet-card[aria-pressed=true]::before, .app.game .pet-card[aria-pressed=true]::after { display: none; }
.app.game .pet-card.dim { opacity: 1; filter: saturate(.5) brightness(.8); }
.app.game .pet-card:hover .mascot-svg, .app.game .pet-card[aria-pressed=true] .mascot-svg { animation: idle 2.6s ease-in-out infinite; }
.app.game .name-card { border-width: 2px; border-color: var(--line); border-radius: 22px; }

/* Разговор */
.app.game .talk-stage .mascot { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.app.game .talk-stage .mascot .mascot-svg { width: 100%; height: 100%; }
.app.game .bubble { border: 0; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 4px 0 rgba(8, 14, 30, .3); font-weight: 700; }
.app.game .bubble::before { border: 0; background: #fff; }
.app.game .talk-controls { padding: 18px; border-radius: 22px; background: var(--panel); border: 2px solid var(--line); box-shadow: 0 8px 0 rgba(8, 14, 30, .45), 0 24px 44px rgba(8, 14, 30, .4); }
.app.game .talk-status { color: #fff; }
.app.game .talk-heard { color: #a9b6d8; }
.app.game .mic-btn { border-radius: 26px; background: var(--gold); color: #3b2500; box-shadow: 0 7px 0 var(--gold-dark); }
.app.game .mic-btn:disabled { background: #33415f; color: #7786a8; box-shadow: none; }
.app.game .mic-btn.listening { background: #2fae62; color: #fff; box-shadow: 0 7px 0 #1b7740; }

/* Итог занятия */
.result-hero { display: flex; justify-content: center; }
.result-hero .pet-fig { width: 180px; max-width: none; cursor: default; }
.app.game .finale { gap: 8px; }
.app.game .finale h1 { font-size: 30px; }
.app.game .stars { font-size: 44px; color: var(--gold); }

/* Магазин */
.app.game .reward-emoji { border-radius: 16px; background: var(--panel-2); border: 0; }
.app.game .reward-wait { background: #17402c; border-color: #2fae62; }

@media (min-width: 900px) {
  /* Разговор и итог: герой слева на земле, панель справа — как на главном экране */
  .app.chat, .app.result {
    max-width: 1240px; min-height: 100vh; padding-bottom: 34px;
    display: grid; grid-template-columns: 420px minmax(0, 520px); column-gap: 40px; row-gap: 18px;
    justify-content: center; align-content: stretch;
  }
  .app.chat { grid-template-rows: auto 1fr; grid-template-areas: "top top" "stage controls"; }
  .app.chat .topbar { grid-area: top; }
  .app.chat .talk-stage { grid-area: stage; flex-direction: column-reverse; justify-content: flex-start; align-self: end; gap: 22px; padding: 0; }
  .app.chat .talk-stage .mascot.xl { width: min(56vh, 400px); height: min(56vh, 400px); }
  .app.chat .bubble { font-size: 22px; max-width: 400px; }
  .app.chat .bubble::before { top: auto; bottom: -8px; }
  .app.chat .talk-controls { grid-area: controls; align-self: center; padding: 30px; gap: 16px; }
  .app.chat .mic-btn { width: 120px; height: 120px; }
  .app.result { grid-template-rows: 1fr auto auto auto 1.3fr; }
  .app.result .result-hero { grid-column: 1; grid-row: 1 / -1; align-self: end; }
  .app.result .result-hero .pet-fig { width: min(60vh, 420px); }
  .app.result > .spacer { display: block; grid-column: 2; }
  .app.result > .card, .app.result > .btn { grid-column: 2; }
  .app.result .finale { padding: 30px; }
  .app.store { max-width: 760px; }
}
.app.game .pet-fig::after {
  content: ""; position: absolute; left: 19%; right: 19%; bottom: -3px; height: 14px; z-index: -1;
  border-radius: 50%; background: rgba(10, 20, 40, .3); filter: blur(3px);
}
.app.game .pet-shadow { display: none; }
.app.game .talk-stage .mascot.xl { max-width: none; display: block; }

/* ---------- Позы героя: стопка картинок, видна одна ---------- */
.mascot-svg.poses { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1; }
.poses img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.poses[data-pose="idle"] img[data-p="idle"], .poses[data-pose="wave"] img[data-p="wave"], .poses[data-pose="happy"] img[data-p="happy"],
.poses[data-pose="think"] img[data-p="think"], .poses[data-pose="talk"] img[data-p="talk"], .poses[data-pose="oops"] img[data-p="oops"] { opacity: 1; }
/* Пока звучит голос, герой в позе «говорит» и слегка покачивается */
.talking .poses img { opacity: 0 !important; }
.talking .poses img[data-p="talk"] { opacity: 1 !important; }
.talking .poses img[data-p="talk"], .talk-stage.speaking .poses img[data-p="talk"] { transform-origin: 50% 95%; animation: talk-sway .5s ease-in-out infinite alternate; }
@keyframes talk-sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg) translateY(-3px); } }
/* Смена позы — с коротким движением, а не щелчком */
.poses[data-pose="happy"] img[data-p="happy"] { animation: pose-jump .7s cubic-bezier(.3, 1.5, .5, 1) infinite alternate; }
.poses[data-pose="wave"] img[data-p="wave"] { transform-origin: 50% 95%; animation: pose-lean .45s ease-in-out infinite alternate; }
.poses[data-pose="think"] img[data-p="think"] { transform-origin: 50% 95%; animation: pose-lean 1.4s ease-in-out infinite alternate; }
.poses[data-pose="oops"] img[data-p="oops"] { animation: pose-shock .45s ease-out; }
@keyframes pose-jump { from { transform: translateY(0); } to { transform: translateY(-18px); } }
@keyframes pose-lean { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
@keyframes pose-shock { 0% { transform: scale(.94); } 50% { transform: scale(1.05) translateY(-8px); } 100% { transform: none; } }
/* Выбор героя: выбранный машет */
.pet-card[aria-pressed=true]:not(.talking) .poses img, .pet-card:hover:not(.talking) .poses img { opacity: 0; }
.pet-card[aria-pressed=true]:not(.talking) .poses img[data-p="wave"], .pet-card:hover:not(.talking) .poses img[data-p="wave"] { opacity: 1; transform-origin: 50% 95%; animation: pose-lean .45s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .poses img { animation: none !important; } }

/* Рот под речь: в позе «говорит» два кадра — рот закрыт (talk0) и открыт (talk). Класс mouth-open на body ставит скрипт по громкости. */
.talking .poses img[data-p="talk"] { opacity: 0 !important; }
.talking .poses img[data-p="talk0"] { opacity: 1 !important; }
body.mouth-open .talking .poses img[data-p="talk"] { opacity: 1 !important; }
body.mouth-open .talking .poses img[data-p="talk0"] { opacity: 0 !important; }
.poses[data-pose="talk"] img[data-p="talk"] { opacity: 0; }
.poses[data-pose="talk"] img[data-p="talk0"] { opacity: 1; }
body.mouth-open .poses[data-pose="talk"] img[data-p="talk"] { opacity: 1; }
body.mouth-open .poses[data-pose="talk"] img[data-p="talk0"] { opacity: 0; }
/* Оба кадра качаются одинаково и одновременно, иначе при смене будет дёргаться */
.talking .poses img[data-p="talk"], .talking .poses img[data-p="talk0"],
.talk-stage.speaking .poses img[data-p="talk"], .talk-stage.speaking .poses img[data-p="talk0"] {
  transform-origin: 50% 95%; animation: talk-sway .5s ease-in-out infinite alternate;
}

/* Вокруг героя не рисуем рамку ни при наведении, ни при нажатии: он не кнопка, а персонаж */
.pet-fig, .pet-fig:hover, .pet-fig:focus, .pet-fig:focus-visible, .pet-fig:active { outline: none !important; border: 0; box-shadow: none; -webkit-tap-highlight-color: transparent; }