/* Основа игры «Мотя» — роли из брендбука docs/brendbuk.md. Числа живут только здесь. */
:root {
  /* Комната — цвета настоящей комнаты Моти с фото: голубая стена, коврик с бирюзой и волнами */
  --stena: #DCEFF4;
  --stena-uzor: #CBE6EE;
  --pol: #F2EAD3;
  --pol-polosa: #9ED5C6;
  --pol-volna: #A9CFE0;
  --okno: #FFFFFF;
  --nebo: #BFE6F7;
  --nebo-niz: #E8F7FD;
  --solnce: #FFD24A;
  --plintus: #FFFFFF;
  --pol-doska: #E6C9A0;      /* деревянный пол под ковриком */
  --pol-shov: #D4B286;
  --pol-svet: rgba(246, 236, 214, .38);  /* дымка поверх досок Perplexity: пол светлее и спокойнее рядом с ковриком */
  --zatemnenie: rgba(30, 44, 54, .45);  /* под окном выбора игр */
  --noch: rgba(22, 26, 58, .62);        /* Мотя спит по часам (МТ-25): свет погашен, комната в синеве */
  --noch-svet: rgba(22, 26, 58, .3);    /* у Моти чуть светлее — его видно в темноте */

  /* Четыре входа — по цвету на игру; «-kraj» — нижний край кнопки-подушки */
  --motya-vhod: #2FA58C;   --motya-vhod-kraj: #1F7D69;
  --naryady-vhod: #F27E93; --naryady-vhod-kraj: #C8566C;
  --kraski-vhod: #FFC83D;  --kraski-vhod-kraj: #D99A14;
  --pazly-vhod: #8F84DB;   --pazly-vhod-kraj: #665BB4;
  --bukvy-vhod: #5BB35A;   --bukvy-vhod-kraj: #3F8A40;   /* «Буквы и цифры» — травяной зелёный (МТ-18) */
  --propis-list: var(--sluzh);            /* лист прописи — белый (МТ-18) */
  --propis-lineika: var(--sluzh-kraj);     /* линейки, как в тетради */
  --propis-dorozhka: #E6EEF1;             /* бледная широкая буква, по которой ведут */
  --propis-seredina: #9DB4BC;             /* пунктир посередине черты */
  --propis-pis: var(--bukvy-vhod);        /* то, что ребёнок уже написал */
  --propis-nachalo: #E5533D;              /* точка «начни здесь» и стрелка — красный покрывала */

  /* Служебные кнопки (домой, замок) */
  --sluzh: #FFFFFF;        --sluzh-kraj: #B8CDD4;   --sluzh-znak: #3C5A66;

  /* Желание Моти: облачко над ним и тёплое сияние вокруг нужной кнопки */
  --oblachko: #FFFFFF;
  --oblachko-kraj: #B8CDD4;
  --zhelanie: #FFD24A;

  /* Мотя: чёрный гладкий, жёлто-зелёные круглые глаза */
  /* Шерсть — три тона: свет от окна, середина, глубокая тень; так чёрный кот выглядит объёмным */
  --motya-sherst-svet: #4A4656;
  --motya-sherst: #24212B;
  --motya-sherst-temn: #0E0D12;
  --motya-siyanie: #8A93AE;      /* блеск гладкой шерсти */
  --motya-kontur-svet: #6C7894;  /* отсвет окна по краю головы */
  --motya-mordochka: #2E2A35;    /* подушечки усов */
  --motya-tochki: #4C4756;
  --motya-ushi: #7A5A69;
  --motya-ushi-glub: #3A2A33;
  --motya-iris-centr: #EEF29A;
  --motya-iris: #CBD653;
  --motya-iris-kraj: #7E922E;
  --motya-zrachok: #0B0A0E;
  --motya-nos: #6E5664;
  --motya-nos-temn: #3A2D35;
  --motya-shov: #7C7689;         /* рот прежнего рисунка (motya-risunok.js) */
  --motya-shcheki: #8A5F70;
  --motya-rot: #3A1F2A;
  --motya-usy: #ECE9F1;
  --motya-yazyk: #F58FA0;
  --motya-murchanie: #2FA58C;
  --ten-pola: rgba(36, 33, 43, .14);
  --ten-predmeta: rgba(36, 33, 43, .32);  /* мягкая тень под предметом комнаты на полу; у кусочка пазла в пальце */
  --ten-kusochka: rgba(36, 33, 43, .28);  /* тень кусочка пазла в лотке */
  --ten-lista: rgba(36, 33, 43, .12);     /* тень листа прописи (МТ-18) */
  --kraj-kusochka: rgba(255, 255, 255, .7);  /* тонкий белый край кусочка пазла */

  /* Текст — только для взрослых (замок, настройки) */
  --tekst: #2B2733;
  --tekst-tihij: #6B6675;
  --shrift: 'Nunito', sans-serif;

  /* Размеры: палец четырёхлетки ≈ 1,5 см — цель не меньше --cel-min */
  --cel-min: 88px;
  --vhod: clamp(132px, 19vw, 220px);
  --vhod-zastavka: clamp(150px, 26vmin, 260px);  /* картинка игры на заставке — крупнее входа: она рядом с Мотей, а не в ряду */
  --deistvie: 104px;
  --pazl-podskazka: .22;                            /* бледность картинки-подсказки на поле */
  --sluzh-razmer: var(--cel-min);
  --kraj: 8px;
  --zdes-ramka: 11px;  /* белая рамка «где ребёнок сейчас» выходит за вход: 6 толщина + 5 зазор; поле окна игр считается от неё */
  --skrug-vhod: 36px;
  --skrug-deistvie: 28px;
  --skrug-pole: 12px;      /* поле пазла внутри белой рамки */
  --pazl-ramka: 10px;      /* белая рамка поля пазла и картинки выбора */
  --shag: 8px;
  --otstup: clamp(16px, 3vw, 40px);
  --promezhutok: clamp(16px, 2.6vw, 32px);
  --promezhutok-ryad: clamp(16px, 1.4vw, 24px);   /* окно «Домой»: шесть входов и шестерёнка в один ряд на iPad лёжа (МТ-30) */

  /* Движение */
  --bystro: 120ms;
  --pruzhina: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--stena);
  font-family: var(--shrift);
  color: var(--tekst);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* Кнопка-подушка: крупная, цветная, с нижним краем; нажатие — проваливается на край */
.podushka {
  position: relative;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: var(--skrug-vhod);
  box-shadow: 0 var(--kraj) 0 var(--kraj-cvet), 0 calc(var(--kraj) + 6px) 14px rgba(36, 33, 43, .16);
  transition: transform var(--bystro) ease-out, box-shadow var(--bystro) ease-out;
}
.podushka:active, .podushka.nazhata {
  transform: translateY(var(--kraj));
  box-shadow: 0 0 0 var(--kraj-cvet), 0 2px 6px rgba(36, 33, 43, .16);
}
.podushka:focus-visible { outline: 5px solid var(--tekst); outline-offset: 6px; }

.vhod { width: var(--vhod); height: var(--vhod); }
.vhod svg { width: 78%; height: 78%; overflow: visible; }
.vhod--motya  { background: var(--motya-vhod);  --kraj-cvet: var(--motya-vhod-kraj); }
.vhod--naryady { background: var(--naryady-vhod); --kraj-cvet: var(--naryady-vhod-kraj); }
.vhod--kraski { background: var(--kraski-vhod); --kraj-cvet: var(--kraski-vhod-kraj); }
.vhod--pazly  { background: var(--pazly-vhod);  --kraj-cvet: var(--pazly-vhod-kraj); }
.vhod--bukvy  { background: var(--bukvy-vhod);  --kraj-cvet: var(--bukvy-vhod-kraj); }
.vhod--minigry { background: var(--minigry-vhod); --kraj-cvet: var(--minigry-vhod-kraj); }   /* МТ-30 */

.deistvie {
  width: var(--deistvie); height: var(--deistvie);
  border-radius: var(--skrug-deistvie);
  background: var(--sluzh); --kraj-cvet: var(--sluzh-kraj);
}
.deistvie svg { width: 72%; height: 72%; }

.sluzh {
  width: var(--sluzh-razmer); height: var(--sluzh-razmer);
  border-radius: 50%;
  background: var(--sluzh); --kraj-cvet: var(--sluzh-kraj);
  --kraj: 6px;
  color: var(--sluzh-znak);
  font-size: 46px;
}

.motya { display: block; overflow: visible; }

@keyframes dyshit { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.01); } }   /* едва заметно — Полякова 11.11.2026 */
@keyframes murr { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.motya-zhivoj { transform-origin: 50% 100%; animation: dyshit 3.2s ease-in-out infinite; }
.motya-volny { animation: murr 1s ease-in-out infinite; }
/* Мотя живой: моргает, шевелит ушами, машет хвостом, поворачивает голову, тянет лапу (МТ-1).
   Точка поворота у каждой части задана в motya.js; разные длительности — чтобы движения не совпадали. */
.motya-uho, .motya-morgaet, .motya-hvost, .motya-golova, .motya-lapa { transform-box: view-box; }
@keyframes morgaet { 0%, 92%, 98.5%, 100% { transform: scaleY(1); opacity: 1; } 93.5%, 97% { transform: scaleY(.06); opacity: 0; } }
@keyframes uho { 0%, 84%, 100% { transform: rotate(0); } 87% { transform: rotate(var(--uho-ugol)); } 90% { transform: rotate(0); } 93% { transform: rotate(calc(var(--uho-ugol) * .6)); } 96% { transform: rotate(0); } }
@keyframes hvost { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(7deg); } }
@keyframes golova { 0%, 30%, 100% { transform: rotate(0) translateY(0); } 42%, 55% { transform: rotate(-5deg) translateY(-1px); } 68%, 80% { transform: rotate(4deg); } }
@keyframes udivlen { 0% { transform: translateY(6px) scale(.97); } 40% { transform: translateY(-5px) scale(1.02); } 100% { transform: translateY(0) scale(1); } }
@keyframes lapa { 0%, 40%, 100% { transform: translateX(0); } 60%, 75% { transform: translateX(-9px); } }
.motya-morgaet { animation: morgaet 4.6s ease-in-out infinite; }
/* закрытые глаза из Perplexity на миг моргания — в такт с morgaet */
@keyframes veko { 0%, 92%, 98.5%, 100% { opacity: 0; } 93.5%, 97% { opacity: 1; } }
.motya-veko { opacity: 0; animation: veko 4.6s ease-in-out infinite; }
.motya-uho-l { --uho-ugol: -9deg; animation: uho 5.3s ease-in-out infinite; }
.motya-uho-p { --uho-ugol: 9deg; animation: uho 7.1s ease-in-out 2.4s infinite; }
.motya-hvost { animation: hvost 2.8s ease-in-out infinite; }
.motya-hvost--truba { animation-duration: 1.4s; }
@keyframes hvost-pol { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg); } }
.motya-hvost--pol { animation: hvost-pol 3.4s ease-in-out infinite; }
.motya-golova { animation: golova 9s ease-in-out 1.5s infinite; }
.motya-golova--udivlen { animation: udivlen .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.motya-lapa { animation: lapa 5s ease-in-out infinite; }
/* лёжа лапа тянется к зрителю — вправо и вниз (МТ-9, тело нарисовано заново 11.11.2026) */
@keyframes lapa-vpered { 0%, 40%, 100% { transform: translate(0, 0); } 60%, 75% { transform: translate(7px, 4px); } }
.motya-lapa--vpered { animation-name: lapa-vpered; }
/* Кнопка, которую Мотя сейчас хочет: тёплое кольцо и мягкое покачивание, без вспышек */
@keyframes kachaetsya { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.podushka.hochet { animation: kachaetsya 1.4s ease-in-out infinite; box-shadow: 0 var(--kraj) 0 var(--kraj-cvet), 0 0 0 8px var(--zhelanie), 0 0 26px 10px var(--zhelanie); }

@media (prefers-reduced-motion: reduce) {
  .motya-zhivoj, .motya-volny, .podushka.hochet, .motya-uho, .motya-morgaet, .motya-veko, .motya-hvost, .motya-golova, .motya-lapa { animation: none; }
  .podushka { transition: none; }
}

/* Основа игры (МТ-2): игра стоит иконкой на экране «Домой» и открывается на весь экран.
   Палец не увеличивает страницу двойным касанием и не вызывает меню долгим нажатием. */
html, body { touch-action: manipulation; -webkit-touch-callout: none; overscroll-behavior: none; }

/* Окно выбора игр — одно на все игры (igry.js): выезжает сверху, комната затемнена; нажать мимо — закрыть */
.igry-fon { position: fixed; inset: 0; background: var(--zatemnenie); z-index: 4; opacity: 0; pointer-events: none; transition: opacity 200ms ease-out; }
.igry {
  position: fixed; left: 50%; top: 0; z-index: 5;
  transform: translate(-50%, -110%);
  transition: transform 260ms var(--pruzhina), visibility 0s 260ms;
  visibility: hidden;
  background: var(--stena);
  border-radius: 0 0 var(--skrug-vhod) var(--skrug-vhod);
  padding: calc(var(--otstup) + var(--zdes-ramka) + env(safe-area-inset-top)) calc(var(--otstup) + var(--zdes-ramka)) calc(var(--otstup) + var(--kraj));
  display: flex; gap: var(--shag); align-items: center;
  box-shadow: 0 10px 0 var(--sluzh-kraj), 0 18px 40px rgba(36,33,43,.25);
}
/* Настройки — пятая закладка: служебный белый цвет, крупная шестерёнка; вход чуть меньше, чтобы пять закладок встали в ряд */
.vhod--nastrojki { background: var(--sluzh); --kraj-cvet: var(--sluzh-kraj); color: var(--sluzh-znak); font-size: calc(var(--vhod) * .5); }
/* Мотя спит (МТ-25): двери других игр закрыты до утра — вход бледный, приглушённый, не нажимается и не проваливается */
.igry .vhod--spit { filter: grayscale(.7) brightness(.8); opacity: .45; cursor: default; }
.igry .vhod--spit:active { transform: none; box-shadow: 0 var(--kraj) 0 var(--kraj-cvet); }
.igry .vhod.zdes { outline: 6px solid var(--sluzh); outline-offset: calc(var(--zdes-ramka) - 6px); }
.igry-otkryty .igry { transform: translate(-50%, 0); visibility: visible; transition: transform 260ms var(--pruzhina); }
.igry-otkryty .igry-fon { opacity: 1; pointer-events: auto; }
/* Сколько входов в ряду: шесть игр — в ряд, шесть игр и шестерёнка — в ряд с промежутком теснее (МТ-30);
   вход — сколько влезает в ширину экрана, не меньше 132 и не больше 200 */
.igry { --v-ryad: 6; --shag: var(--promezhutok); --vhod: clamp(132px, calc((100vw - 2 * (var(--otstup) + var(--zdes-ramka)) - (var(--v-ryad) - 1) * var(--shag)) / var(--v-ryad)), 200px); }
.igry--s-nastrojkami { --v-ryad: 7; --shag: var(--promezhutok-ryad); }
/* в ряд не встают на iPhone лёжа и iPad стоя — два ряда: 3 + 3, с шестерёнкой 4 + 3 (МТ-30); вход не выше трети экрана, чтобы два ряда влезли на iPhone лёжа */
@media (max-width: 1099px) {
  .igry { --vhod: clamp(132px, min(19vw, 30vh), 220px); display: grid; grid-template-columns: repeat(3, auto); row-gap: calc(var(--promezhutok) + var(--kraj)); }
  .igry--s-nastrojkami { --shag: var(--promezhutok); grid-template-columns: repeat(4, auto); }
}
/* iPhone стоя — по два в ряд (Полякова 10.11.2026) */
@media (orientation: portrait) and (max-width: 700px) { .igry, .igry--s-nastrojkami { --vhod: clamp(132px, 15.5vw, 200px); display: grid; grid-template-columns: repeat(2, auto); row-gap: calc(var(--promezhutok) + var(--kraj)); } }
@media (prefers-reduced-motion: reduce) { .igry, .igry-fon { transition: none; } }

/* Заставка игры, которую ещё делают (zastavka.js): комната, посредине Мотя и крупная картинка игры */
.zastavka { position: fixed; inset: 0; overflow: hidden; background: var(--stena); }
.zastavka .pol { position: absolute; left: 0; right: 0; bottom: 0; height: 30vh; background: var(--pol-doska); border-top: 12px solid var(--plintus); box-shadow: 0 -3px 0 var(--sluzh-kraj); }
.zastavka .verh { position: absolute; left: 0; top: 0; padding: calc(var(--otstup) + env(safe-area-inset-top)) var(--otstup) 0; z-index: 3; }
.zastavka-scena {
  position: absolute; left: 0; right: 0; bottom: 14vh; top: calc(var(--otstup) + var(--sluzh-razmer) + env(safe-area-inset-top));
  display: flex; align-items: flex-end; justify-content: center; gap: calc(var(--promezhutok) * 2); padding: 0 var(--otstup);
}
.zastavka .motya-mesto { height: min(60vh, 60vw); cursor: pointer; }
.zastavka .motya-mesto .motya { height: 100%; width: auto; }
.zastavka-kartinka { --vhod: var(--vhod-zastavka); margin-bottom: 2vh; }
/* iPhone стоя: картинка игры висит на стене над Мотей, Мотя сидит на полу */
@media (orientation: portrait) and (max-width: 700px) {
  .zastavka-scena { bottom: 12vh; flex-direction: column-reverse; align-items: center; justify-content: space-evenly; gap: var(--promezhutok); }
  .zastavka-kartinka { margin-bottom: 0; }
  .zastavka .motya-mesto { height: min(42vh, 70vw); }
}

/* Пазлы (МТ-6, pazly.js): выбор картинки — крупные подушки с картинками; в игре — поле с бледной подсказкой,
   кусочки вокруг; кусочек в руке крупнее и с тенью, на месте — без тени; собрал — картинка целая, рядом Мотя */
.pazly { position: fixed; inset: 0; overflow: hidden; background: var(--stena); touch-action: none; }
.pazly .verh { position: absolute; left: 0; top: 0; z-index: 3; display: flex; gap: var(--promezhutok);
  padding: calc(var(--otstup) + env(safe-area-inset-top)) var(--otstup) 0 calc(var(--otstup) + env(safe-area-inset-left)); }
.pazly[data-sostoyanie="vybor"] #k-kartinkam, .pazly[data-sostoyanie="vybor"] .pazly-igra { display: none; }
.pazly[data-sostoyanie="igra"] .pazly-vybor { display: none; }

.pazly-vybor {
  /* десять картинок сразу, без прокрутки (Полякова 11.11.2026): лёжа — 5 × 2, стоя — 2 × 5;
     картинка — самая крупная, при которой влезают все и по ширине, и по высоте */
  --kol: 5; --ryad: 2; --zazor: var(--promezhutok);
  --verh-vybora: calc(var(--otstup) * 2 + var(--sluzh-razmer) + env(safe-area-inset-top));
  --pazl-kartinka: min(
    (100vw - var(--otstup) * 2 - var(--zazor) * (var(--kol) - 1)) / var(--kol),
    (100dvh - var(--verh-vybora) - var(--otstup) - var(--zazor) * (var(--ryad) - 1)) / var(--ryad) * 4 / 3 - 24px);  /* 24 — край подушки снизу и запас скругления */
  position: absolute; inset: var(--verh-vybora) var(--otstup) var(--otstup);
  display: grid; grid-template-columns: repeat(var(--kol), var(--pazl-kartinka));
  align-content: center; justify-content: center; gap: var(--zazor);
}
.pazly-kartinka { width: var(--pazl-kartinka); aspect-ratio: 4 / 3; background: var(--pazly-vhod); --kraj-cvet: var(--pazly-vhod-kraj); padding: var(--pazl-ramka); }
.pazly-kartinka img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--skrug-vhod) - var(--pazl-ramka)); display: block; pointer-events: none; }
@media (orientation: portrait) { .pazly-vybor { --kol: 2; --ryad: 5; } }

.pazly-igra { position: absolute; inset: 0; }
.pazly-pole { position: absolute; border-radius: var(--skrug-pole); background: var(--sluzh); box-shadow: 0 0 0 var(--pazl-ramka) var(--sluzh), 0 var(--pazl-ramka) 0 var(--pazl-ramka) var(--sluzh-kraj); }
.pazly-pole img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.pazly-podskazka { opacity: var(--pazl-podskazka); }
.pazly-shvy { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pazly-shvy path { fill: none; stroke: var(--sluzh-kraj); stroke-width: 2; stroke-dasharray: 6 6; }
.pazly-celaya { opacity: 0; transition: opacity 400ms ease-out; }

.pazly-kusok { position: absolute; left: 0; top: 0; overflow: visible; cursor: grab; transform-origin: 50% 50%;
  filter: drop-shadow(0 4px 5px var(--ten-kusochka)); transition: transform 260ms var(--pruzhina); will-change: transform; }
.pazly-kusok-kraj { fill: none; stroke: var(--kraj-kusochka); stroke-width: 2; }
.pazly-kusok.v-ruke { transition: none; cursor: grabbing; filter: drop-shadow(0 14px 14px var(--ten-predmeta)); }
.pazly-kusok.na-meste { filter: none; cursor: default; }
.pazly-kusok.na-meste .pazly-kusok-kraj { stroke: transparent; transition: stroke 300ms; }

.pazly-motya { position: absolute; translate: -50% 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transform: translateY(30px); transition: opacity 300ms, transform 400ms var(--pruzhina); }
.pazly-motya .motya { height: min(100%, 46vh); width: auto; max-width: 100%; }
.sobrano .pazly-celaya { opacity: 1; }
.sobrano .pazly-kusok { opacity: 0; transition: opacity 400ms; pointer-events: none; }
.sobrano .pazly-pole { cursor: pointer; }
.sobrano .pazly-motya { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .pazly-kusok, .pazly-motya, .pazly-celaya { transition: none; } }

/* ——— Мини-игры (МТ-30): общий фон, экран выбора, «Пузыри с буквами» ——— */
:root {
  --minigry-vhod: #FF9F43; --minigry-vhod-kraj: #D97A1E;   /* дверь «Мини-игры» — оранжевый из цветов рисунков */
  --puzyr: clamp(120px, 21vmin, 200px);                   /* пузырь не меньше 120 на iPhone, до 200 на iPad (проект МТ-30) */
  --puzyr-voda: rgba(255, 255, 255, .1);                  /* середина пузыря — почти прозрачная */
  --puzyr-kraj: rgba(191, 230, 247, .75);                 /* к краю пузырь гуще, голубоватый */
  --puzyr-raduga: conic-gradient(from 200deg, #FF9F43, #FFD24A, #9ED5C6, #8CC4DC, #8F84DB, #F27E93, #FF9F43);  /* радужный край */
  --puzyr-blik: rgba(255, 255, 255, .9);
}
/* стена и пол комнаты Моти — те же картинки Perplexity, что в комнате */
.minigry, .puzyri { position: fixed; inset: 0; overflow: hidden; background: var(--stena); touch-action: none; --pol-vys: 26vh; }
.fon-stena { position: absolute; inset: 0 0 var(--pol-vys) 0;
  background: radial-gradient(ellipse 60% 70% at 22% 25%, rgba(255,255,255,.35), transparent 70%),
    linear-gradient(transparent 70%, rgba(36,33,43,.07)), url(komnata/stena.webp) 0 0 / 256px 256px, var(--stena); }
.fon-pol { position: absolute; left: 0; right: 0; bottom: 0; height: var(--pol-vys);
  background: linear-gradient(rgba(36,33,43,.22), transparent 28%), linear-gradient(var(--pol-svet), var(--pol-svet)),
    url(komnata/pol.webp) center top / cover, var(--pol-doska);
  border-top: 12px solid var(--plintus); box-shadow: 0 -3px 0 var(--sluzh-kraj); }
.minigry .verh, .puzyri .verh { position: absolute; left: 0; top: 0; z-index: 3;
  padding: calc(var(--otstup) + env(safe-area-inset-top)) var(--otstup) 0 calc(var(--otstup) + env(safe-area-inset-left)); }

/* экран выбора: картинка — как картинка пазла, в оранжевом цвете двери; одна — крупно посередине */
.minigry-setka {
  --verh-vybora: calc(var(--otstup) * 2 + var(--sluzh-razmer) + env(safe-area-inset-top));
  --plitka: min(62vw, (100dvh - var(--verh-vybora) - var(--otstup) * 2) * 4 / 3 - 24px, 640px);  /* 24 — край подушки снизу */
  position: absolute; inset: var(--verh-vybora) var(--otstup) var(--otstup);
  display: flex; align-items: center; justify-content: center; gap: var(--promezhutok);
}
@media (orientation: portrait) { .minigry-setka { --plitka: min(100vw - var(--otstup) * 2, 640px); } }
.minigra-plitka { width: var(--plitka); aspect-ratio: 4 / 3; padding: var(--pazl-ramka); background: var(--minigry-vhod); --kraj-cvet: var(--minigry-vhod-kraj); }
.minigra-scena { position: relative; width: 100%; height: 100%; overflow: hidden; container-type: inline-size; pointer-events: none;
  border-radius: calc(var(--skrug-vhod) - var(--pazl-ramka)); --pol-vys: 24%; }
.minigra-scena .fon-stena { background-size: auto, auto, 128px 128px, auto; }
.minigra-scena .fon-pol { border-top-width: 6px; }
.minigra-scena .puzyr { pointer-events: none; }

/* Мотя сидит на полу: лёжа — слева внизу, стоя — внизу посередине (проект МТ-30) */
.puzyri { --puzyr-px: var(--puzyr); }
.puzyri .motya-mesto { position: absolute; z-index: 1; left: calc(var(--otstup) + env(safe-area-inset-left)); bottom: 3vh; height: min(46vh, 30vw); cursor: pointer; }
.puzyri .motya-mesto .motya { height: 100%; width: auto; display: block; }
@media (orientation: portrait) { .puzyri .motya-mesto { left: 50%; translate: -50% 0; height: min(30vh, 52vw); } }
/* провожает нужный пузырь головой */
.puzyri .motya-golova { animation: none; transform: rotate(var(--povorot, 0deg)); transition: transform .9s ease-in-out; }

.puzyri-nebo { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.puzyr { position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); pointer-events: auto; cursor: pointer; will-change: transform; }
.puzyr-telo {
  position: relative; width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, var(--puzyr-voda) 58%, var(--puzyr-kraj));
  box-shadow: 0 0 calc(var(--d) * .06) rgba(255, 255, 255, .6);
}
/* радужный край — тонкое кольцо */
.puzyr-telo::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--puzyr-raduga); opacity: .75;
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 66%, #000 70%, transparent 72%);
          mask: radial-gradient(circle, transparent 64%, #000 66%, #000 70%, transparent 72%); }
/* блик сверху слева */
.puzyr-telo::after { content: ''; position: absolute; left: 18%; top: 14%; width: 26%; height: 14%; border-radius: 50%;
  background: var(--puzyr-blik); rotate: -35deg; }
.puzyr-telo span { position: relative; font-family: var(--shrift); font-weight: 800; font-size: calc(var(--d) * .54); line-height: 1; color: var(--tekst); }

/* не тот — мягко качнулся (без звука ошибки) */
.puzyr.kachnulsya .puzyr-telo { animation: kachnulsya .6s ease-in-out; }
@keyframes kachnulsya { 25% { rotate: -9deg; scale: 1.05; } 60% { rotate: 7deg; } }
/* ничего не трогает — нужный тихо светится жёлтым сиянием желания */
.puzyr.zovyot .puzyr-telo { animation: zovyot 1.6s ease-in-out infinite; }
@keyframes zovyot { 50% { box-shadow: 0 0 0 calc(var(--d) * .06) var(--zhelanie), 0 0 calc(var(--d) * .3) var(--zhelanie); } }
/* лопнул — раздулся и исчез, брызги в стороны */
.puzyr.lopnul { pointer-events: none; }
.puzyr.lopnul .puzyr-telo { animation: lopnul .25s ease-out forwards; }
@keyframes lopnul { to { scale: 1.35; opacity: 0; } }
.bryzgi { position: absolute; inset: 0; pointer-events: none; }
.bryzgi i { position: absolute; left: 50%; top: 50%; width: calc(var(--d) * .09); height: calc(var(--d) * .09); margin: calc(var(--d) * -.045);
  border-radius: 50%; background: var(--puzyr-kraj); box-shadow: inset 0 0 0 2px var(--puzyr-blik);
  animation: bryzgi .5s ease-out forwards; }
.bryzgi i:nth-child(1) { --u: 0deg; } .bryzgi i:nth-child(2) { --u: 45deg; } .bryzgi i:nth-child(3) { --u: 90deg; } .bryzgi i:nth-child(4) { --u: 135deg; }
.bryzgi i:nth-child(5) { --u: 180deg; } .bryzgi i:nth-child(6) { --u: 225deg; } .bryzgi i:nth-child(7) { --u: 270deg; } .bryzgi i:nth-child(8) { --u: 315deg; }
@keyframes bryzgi { from { transform: rotate(var(--u)) translateY(0); } to { transform: rotate(var(--u)) translateY(calc(var(--d) * -.75)) scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .puzyr.kachnulsya .puzyr-telo, .puzyr.zovyot .puzyr-telo { animation: none; }
  .puzyr.zovyot .puzyr-telo { box-shadow: 0 0 0 calc(var(--d) * .06) var(--zhelanie), 0 0 calc(var(--d) * .3) var(--zhelanie); }
  .puzyr.lopnul .puzyr-telo { animation-duration: .01s; }
  .puzyri .motya-golova { transition: none; }
}