/* Моя кошка — оформление. Цвета и размеры — в переменных ниже.
   Стиль «Сцена» (решение 0025): комната на весь экран, как в мобильной игре; верхняя полоса и нижний блок
   (полка + кнопки) лежат поверх неё полупрозрачными плашками. Свет из окна, шторы, пол уходит вглубь.
   Шрифты: Golos Text — для чтения (сделан для русского текста), Unbounded — для заголовков, имени, цифр. */
:root {
  --bg: #fbe7d6;          /* фон экранов — тёплый, как стена комнаты, только светлее */
  --panel: #fffaf3;       /* карточки, кнопки, задание */
  --glass: rgba(255, 250, 243, .84);  /* плашки поверх комнаты */
  --ink: #2a1f2d;         /* текст */
  --muted: #6f5f6b;       /* пояснения */
  --accent: #ff5e3a;      /* коралловый — «Играть», выбранное, пропуск в задании */
  --accent-2: #ff8a3d;
  --accent-dark: #d6431f;
  --good: #1fa387;        /* бирюзовый — купить, верно */
  --good-dark: #147a65;
  --warn: #ff9f43;
  --sun: #ffc93c;
  --hint-bg: #fff1c4;
  --cat-say: #8b6cf0;     /* сиреневый — голос кошки в мини-игре: её фраза и её ответ в «Проверь кошку» */
  --line: #ecd9c8;        /* рамки полей ввода и пунктиры */
  --tile-edge: #dcc3ad;   /* нижний край «толстых» плиток-ответов */
  --wall: #cdeadb;
  --wall-low: #a6d4bd;
  --floor: #e2bf8c;
  --floor-line: #cfa86f;
  --edge: rgba(42, 31, 45, .14);
  --shadow: 0 3px 0 var(--edge);
  --float-shadow: 0 8px 20px -10px rgba(70, 30, 15, .55);
  --radius: 20px;
  /* Высота нижнего блока поверх комнаты: полка (вкладки + вещи) и кнопки. Пол комнаты начинается выше него. */
  --hud-b: calc(192px + env(safe-area-inset-bottom));
  --floor-y: calc(var(--hud-b) + 3%);
  --font: 'Golos Text', system-ui, sans-serif;
  --font-display: 'Unbounded', 'Golos Text', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 600;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Значки интерфейса (G.Art.ui): размер — от размера шрифта, стоят в строке с текстом. */
[data-ui] { display: inline-flex; font-style: normal; }
.ui-ico { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: -.28em; }

#app {
  position: relative;
  height: 100vh;
  height: 100dvh;
  max-width: 600px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--wall);
}

/* ---------- Верхняя полоса: имя, четыре кружка-шкалы, монетки ---------- */
.topbar {
  position: absolute;
  z-index: 8;
  left: 10px; right: 10px;
  top: calc(env(safe-area-inset-top) + 10px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--float-shadow);
}
.pet-name { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.needs { display: flex; gap: 5px; flex: none; }
/* Кружок-шкала: обод заполняется по кругу (--v — от 0 до 100), внутри значок по ступеням (решение 0038).
   Это кнопка: нажатие открывает полку на кнопке этой шкалы. */
.need {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--need) calc(var(--v) * 1%), rgba(42, 31, 45, .12) 0);
}
.need::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--panel); }
.need:active { transform: scale(.92); }
.need-icon { position: relative; display: flex; font-size: 16px; }
/* Цвет обода — по ступени, одинаково на всех кружках (решение 0038): розовый → оранжевый → салатовый → зелёный.
   Две нижние — «нужна забота» (мягко, не «беда»), две верхние — «хорошо» и «отлично»; жёлтый и голубой не взяли:
   жёлтый читается как «внимание», голубой — как «уже отлично». Мигает только нижняя ступень — просьбу ниже CONFIG.askBelow кошка скажет сама. */
.need.step-0 { --need: #f27ba0; animation: pulse 1.4s ease-in-out infinite; }
.need.step-1 { --need: var(--warn); }
.need.step-2 { --need: #9fd356; }
.need.step-3 { --need: #2fb86b; }
/* Пять кружков (с бодростью, решение 0047) на узком телефоне: кружки и отступы чуть меньше, чтобы имя питомца помещалось. */
@media (max-width: 400px) {
  .topbar { gap: 7px; padding-left: 12px; }
  .pet-name { font-size: 15px; }
  .needs { gap: 3px; }
  .need { width: 32px; height: 32px; }
  .need::before { inset: 3.5px; }
  .topbar .coins { padding: 5px 9px 5px 5px; }
}
.coins {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 6px 12px 6px 7px;
  border-radius: 999px;
  background: #fff1c4;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.coins .ui-ico { width: 24px; height: 24px; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
  font-size: 20px;
  box-shadow: var(--shadow);
  flex: none;
}
.icon-btn .ui-ico { width: 24px; height: 24px; }
.icon-btn:active { transform: translateY(2px); box-shadow: none; }

/* ---------- Комната: на весь экран ---------- */
.room {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  background:
    radial-gradient(ellipse 75% 34% at 50% 20%, rgba(255, 246, 214, .95), transparent 70%),
    linear-gradient(var(--wall), var(--wall-low) 70%);
}
/* Края комнаты чуть темнее — свет идёт из окна. */
.room::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; box-shadow: inset 0 0 90px rgba(30, 70, 50, .22); }
.floor {
  position: absolute;
  left: -12%; right: -12%; bottom: 0;
  height: calc(var(--floor-y) + 19%);
  background:
    linear-gradient(rgba(60, 40, 10, .28), transparent 25%),
    repeating-linear-gradient(90deg, var(--floor) 0 54px, var(--floor-line) 54px 56px);
  transform: perspective(520px) rotateX(16deg);
  transform-origin: bottom;
}
/* Плетёный коврик посреди пола. */
.floor::after { content: ''; position: absolute; left: 24%; right: 24%; bottom: 8%; height: 46%; border-radius: 50%;
  background: repeating-radial-gradient(ellipse at center, #f1dca8 0 5px, #d9bc7c 5px 8px); box-shadow: 0 0 0 4px #c9a766, 0 4px 8px rgba(80, 50, 10, .3); }
/* Плинтус — по верхнему краю пола. */
.floor::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; background: #fff3e6; box-shadow: 0 3px 0 rgba(120, 60, 30, .2); }
.window {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 92px);
  left: 50%;
  transform: translateX(-50%);
  width: 46%;
  max-width: 230px;
  aspect-ratio: 1 / .92;
  border: 9px solid #fff7ee;
  border-radius: 999px 999px 12px 12px;
  background: linear-gradient(#77c6f4, #d3f0ff);
  box-shadow: 0 12px 26px -10px rgba(120, 60, 30, .55);
}
.window::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 7px; background: #fff7ee; transform: translateX(-50%); }
.window .sun { position: absolute; width: 28%; aspect-ratio: 1; border-radius: 50%; background: #ffd34d; top: 20%; left: 14%; box-shadow: 0 0 0 8px rgba(255, 211, 77, .35); }
.window::after {
  content: ''; position: absolute; left: -16%; right: -16%; bottom: -17px; height: 62px; pointer-events: none;
  background:
    radial-gradient(ellipse 11px 15px at 14% 24px, #3f9e63 97%, transparent) no-repeat,
    radial-gradient(ellipse 8px 12px at 11% 26px, #5cba7a 97%, transparent) no-repeat,
    radial-gradient(ellipse 9px 22px at 50% 18px, #2f8a55 97%, transparent) no-repeat,
    radial-gradient(circle 10px at 86% 26px, #ff8fa8 97%, transparent) no-repeat,
    radial-gradient(circle 13px at 83% 32px, #5cba7a 97%, transparent) no-repeat,
    linear-gradient(#e8805a, #c9633f) 14% calc(100% - 8px) / 24px 17px no-repeat,
    linear-gradient(#f2f0e8, #d9d2c0) 50% calc(100% - 8px) / 22px 17px no-repeat,
    linear-gradient(#e8805a, #c9633f) 86% calc(100% - 8px) / 24px 17px no-repeat,
    linear-gradient(#fffaf0, #e8dcc3) 50% 100% / 100% 9px no-repeat;
}
.window.night { background: linear-gradient(#22306a, #44569a); }
.window.night .sun { background: #f4f1e3; box-shadow: none; }
.rod { position: absolute; top: calc(env(safe-area-inset-top) + 76px); left: 50%; width: min(78%, 400px); height: 7px; transform: translateX(-50%); border-radius: 4px; background: #b58a5a; }
.curtain { position: absolute; top: calc(env(safe-area-inset-top) + 80px); width: min(14%, 72px); height: 26%; border-radius: 0 0 24px 24px; background: linear-gradient(90deg, #efe6cf, #fffaf0 40%, #efe6cf 70%, #fffaf0); }
.curtain.left { left: calc(50% - min(39%, 200px)); }
.curtain.right { right: calc(50% - min(39%, 200px)); }
/* Луч света из окна на пол; ночью его нет. */
.beam { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 200px); width: 70%; height: 50%; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(rgba(255, 244, 200, .5), transparent 80%); clip-path: polygon(32% 0, 68% 0, 100% 100%, 0 100%); }
.window.night ~ .beam { display: none; }
/* Картинка на стене — пейзаж: небо, солнышко, два холма. */
.frame {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 120px);
  left: 5%;
  width: 13%;
  aspect-ratio: 1 / 1.2;
  border: 4px solid #fff7ee;
  border-radius: 6px;
  background:
    radial-gradient(circle at 70% 26%, var(--sun) 0 12%, transparent 13%),
    radial-gradient(ellipse 80% 50% at 20% 100%, #46b38f 0 98%, transparent 100%),
    radial-gradient(ellipse 90% 40% at 85% 100%, #7ccf9f 0 98%, transparent 100%),
    #ffe1d6;
  box-shadow: 0 6px 12px -6px rgba(90, 40, 20, .5);
  transform: rotate(-3deg);
}

.room-item { position: absolute; bottom: var(--floor-y); transform: translateX(-50%); }
/* Место в игровой (решение 0047): когтеточка или супердомик — одно из двух. */
.play-spot { width: 22%; max-width: 120px; bottom: calc(var(--floor-y) + 3%); z-index: 1; cursor: pointer; }
.play-spot.super { max-width: none; bottom: var(--floor-y); }
.bed { width: 38%; z-index: 2; cursor: pointer; }
.bed-3 { width: 34%; }
/* Супердомик (решение 0044): ширина задаётся из js (G.SUPERBED.widthPct). Бубенцы на цветке качаются, пока кошка играет. */
.play-spot.super .sb-bell { transform-box: fill-box; transform-origin: 50% 0; }
.play-spot.swing .sb-bell { animation: sb-swing .5s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }

/* ---------- Пять комнат (решение 0047): свои цвета стен и пола в том же светлом стиле ---------- */
.room.r-kitchen { --wall: #fdeec2; --wall-low: #f3d796; --floor: #ead6b5; --floor-line: #d9bd92; }
.room.r-bathroom { --wall: #d8f0fa; --wall-low: #b0dbef; --floor: #f1f8fb; --floor-line: #cfe3ec; }
.room.r-playroom { --wall: #cdeadb; --wall-low: #a6d4bd; }
.room.r-wardrobe { --wall: #ece2fb; --wall-low: #d3c2f1; --floor: #e7c79a; --floor-line: #d2ad78; }
.room.r-bedroom { --wall: #fde3dc; --wall-low: #f4c4b9; --floor: #d9b08a; --floor-line: #c2946b; }
/* Коврик: на кухне нет, в ванной — голубой, в гардеробе — розовый, в спальне — сиреневый. */
.room.r-kitchen .floor::after { display: none; }
.room.r-bathroom .floor::after { background: repeating-radial-gradient(ellipse at center, #bfe6f7 0 5px, #8fd0ee 5px 8px); box-shadow: 0 0 0 4px #6cbfe6, 0 4px 8px rgba(30, 80, 110, .25); }
.room.r-wardrobe .floor::after { background: repeating-radial-gradient(ellipse at center, #ffd6e6 0 5px, #f7b2cc 5px 8px); box-shadow: 0 0 0 4px #ee9bbb, 0 4px 8px rgba(110, 40, 70, .25); }
.room.r-bedroom .floor::after { background: repeating-radial-gradient(ellipse at center, #e4d6f7 0 5px, #c9b4ec 5px 8px); box-shadow: 0 0 0 4px #b39ddf, 0 4px 8px rgba(70, 40, 110, .25); }
/* Картинка на стене — там, где у левой стены нет мебели. */
.room.r-bathroom .frame, .room.r-playroom .frame, .room.r-wardrobe .frame { display: none; }

/* Мебель: нажал — открылась, вещи из неё на полке. Стоит на полу у края комнаты, кошка ходит посередине и её не заслоняет. */
.furniture-layer { position: absolute; inset: 0; pointer-events: none; }
.furn { position: absolute; bottom: calc(var(--floor-y) + 1%); transform: translateX(-50%); padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; z-index: 1; }
.furn svg { display: block; width: 100%; overflow: visible; }
.furn-fridge { width: 21%; max-width: 116px; }
.furn-washstand { width: 24%; max-width: 124px; }
.furn-toyshelf { width: 21%; max-width: 120px; }
.furn-closet { width: 23%; max-width: 124px; }
.furn-vanity { width: 25%; max-width: 132px; }
.furn.open { filter: drop-shadow(0 0 8px #fff6c9) drop-shadow(0 0 3px #ffbb7c); }
/* Кошка просит вещь из этой мебели — мебель покачивается: «тут внутри». */
.furn.wiggle { animation: furn-wiggle .5s ease-in-out 4; }
@keyframes furn-wiggle { 0%, 100% { transform: translateX(-50%) rotate(0); } 30% { transform: translateX(-50%) rotate(-3deg); } 70% { transform: translateX(-50%) rotate(3deg); } }
.decor { position: absolute; transform: translateX(-50%); pointer-events: none; z-index: 1; }
.decor svg { display: block; width: 100%; }
.decor-bath { left: 76%; bottom: calc(var(--floor-y) - 1%); width: 44%; max-width: 230px; }
@keyframes sb-swing { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.bowl { width: 22%; z-index: 4; bottom: calc(var(--floor-y) - 2%); pointer-events: none; }
.bowl-food { opacity: 0; transition: opacity .3s; }
.bowl.full .bowl-food { opacity: 1; }
.fountain .jet { animation: jet 1.2s ease-in-out infinite; }

/* Беспорядок на полу (решение 0037): лежит на переднем краю пола — перед кошкой и миской, чтобы его было видно и можно было нажать.
   Слой без своего z-index, поэтому мусор и игрушки встают поверх кошки и вещей комнаты. */
.mess-layer { position: absolute; inset: 0; pointer-events: none; }
.mess { position: absolute; bottom: calc(var(--floor-y) - 1%); width: 22%; max-width: 120px; transform: translateX(-50%); z-index: 5; pointer-events: none; transition: opacity .3s; }
.mess-soil { width: 30%; max-width: 160px; }
.mess-toy { position: absolute; bottom: calc(var(--floor-y) - 1%); width: 14%; max-width: 64px; padding: 0; border: 0; background: none;
  transform: translateX(-50%) rotate(var(--rot, 0deg)); z-index: 6; pointer-events: auto; cursor: pointer; }
.mess-toy.away { animation: put-away .35s ease-in forwards; }
@keyframes put-away { to { transform: translate(-50%, 140px) scale(.3); opacity: 0; } }

/* ---------- Кошка ---------- */
.room .cat {
  position: absolute;
  bottom: calc(var(--floor-y) + var(--lift, 0px));
  width: min(40%, 210px);
  transform: translateX(-50%);
  z-index: 3;
  transition-property: left, bottom;
  transition-timing-function: linear;
  touch-action: none;
}
.room .cat.sleeping { transition: left 0s, bottom .4s ease-out; }
.cat-body { position: relative; transform-origin: 50% 100%; }
.cat .tail { transform-origin: 142px 204px; animation: wag 2.6s ease-in-out infinite; }
.cat .pose-sleep .tail { transform-origin: 176px 200px; animation-duration: 4s; }
.cat .head { transform-origin: 100px 134px; transition: transform .3s; }
.cat .eye { transform: translate(var(--lx, 0), var(--ly, 0)); transition: transform .15s; }
.cat .eyes-open { transform-origin: 100px 88px; animation: blink 4.5s infinite; }
.cat .eyes-closed, .cat .mouth-open, .cat .paw-up, .cat .pose-sleep, .cat .outfit, .cat .cream-drops, .cat .blanket { display: none; }
.cat .paw { transform-box: fill-box; transform-origin: center; }
.cat.wear-neck .outfit-neck, .cat.wear-head .outfit-head, .cat.wear-ear .outfit-ear { display: inline; }
.cat.facing-left .head { transform: rotate(-5deg); }

.cat.sleeping .pose-awake { display: none; }
.cat.sleeping .pose-sleep { display: inline; }
.cat.sleeping .cat-body { animation: breathe 3s ease-in-out infinite; }

.cat.eyes-shut .eyes-open, .cat.grooming .eyes-open, .cat.purring .eyes-open, .cat.proud .eyes-open, .cat.kneading .eyes-open, .cat.curling .eyes-open { display: none; }
.cat.eyes-shut .eyes-closed, .cat.grooming .eyes-closed, .cat.purring .eyes-closed, .cat.proud .eyes-closed, .cat.kneading .eyes-closed, .cat.curling .eyes-closed { display: inline; }
.cat.meowing .mouth { display: none; }
.cat.meowing .mouth-open { display: inline; }

.cat.walking .cat-body { animation: hop .32s ease-in-out infinite; }
.cat.eating .head { transform: translateY(52px) rotate(4deg); animation: chew .4s ease-in-out infinite; }
.cat.grooming .head { transform: rotate(-10deg); }
.cat.grooming .paw-up { display: inline; animation: lick .5s ease-in-out infinite; transform-origin: 86px 150px; }
.cat.jumping .cat-body { animation: jump .6s ease-out; }
.cat.purring .cat-body { animation: purr .12s linear infinite; }
.cat.scratching .paw-up { display: inline; animation: scratch .25s linear infinite; transform-origin: 86px 150px; }
.cat.scratching .cat-body { transform: scaleY(1.06); }
.cat.looking .eye { transform: translate(0, -5px); }
.cat.looking .head { transform: rotate(-6deg) translateY(-3px); }
.cat.shaking .cat-body { animation: shake .35s ease-in-out infinite; }
.cat.proud .head { transform: rotate(-5deg) translateY(-4px); }
.cat.kneading .paw-l { animation: knead .35s ease-in-out infinite; }
.cat.kneading .paw-r { animation: knead .35s ease-in-out infinite .17s; }
.cat.asking .cat-body { animation: ask .7s ease-in-out infinite; }
.cat.splashing .paw-up { display: inline; animation: lick .3s ease-in-out infinite; transform-origin: 86px 150px; }
.cat.thinking .head { transform: rotate(12deg); }
.cat.twirling .cat-body { animation: twirl .6s ease-in-out 2; }
.cat.sparkly .cat-svg { animation: sparkle-glow 1.2s ease-in-out infinite; }

/* Позы и пометки реакций на вещи (js/reactions.js). Стоят после общих поз, чтобы перекрывать их
   (например, мышку кошка выслеживает крадучись — без подпрыгивающей походки). */
.carry { display: none; position: absolute; left: 50%; top: 42%; width: 30%; transform: translateX(-50%) rotate(-10deg); pointer-events: none; }
.carry.on { display: block; }
.cat.creamy .cream-drops, .cat.wrapped .blanket { display: inline; }
.cat.fluffy .cat-svg { filter: drop-shadow(0 0 3px var(--cat-light)) drop-shadow(0 0 8px var(--cat-light)); }
/* Чистюля (придумала Арина): пена шампуня, зубки, реснички. */
.cat .foam, .cat .teeth, .cat .lashes, .cat .lashes-curly { display: none; }
.cat.foamy .foam { display: inline; animation: foam-wobble .5s ease-in-out infinite alternate; transform-origin: 100px 50px; }
.cat.toothy .teeth { display: inline; }
.cat.neatlash .lashes, .cat.curlylash .lashes-curly { display: inline; }
.cat.curlylash .lashes { display: none; }
/* Признаки грязи (решение 0028): видны, пока признак не убран нужной вещью ухода. */
.cat .dirt { display: none; }
.cat.dirt-fur .dirt-fur, .cat.dirt-spots .dirt-spots { display: inline; }
.cat.dirt-teeth .dirt-teeth { display: inline; animation: stink 1.6s ease-in-out infinite; }
.cat.dirt-paws .dirt-paws, .cat.dirt-crumbs .dirt-crumbs { display: inline; }
/* Грязные лапки оставляют следы на полу (Cat.walkTo, решение 0034): след виден несколько секунд и бледнеет. */
.pawprint { position: absolute; bottom: calc(var(--floor-y) - 1%); width: 18px; color: #6b4a2b; z-index: 2; pointer-events: none;
  transform: translateX(-50%) rotate(var(--rot, 0deg)); animation: print-fade 5s ease-in forwards; }
.pawprint .ui-ico { width: 18px; height: 18px; }
@keyframes print-fade { 0% { opacity: .7; } 60% { opacity: .5; } 100% { opacity: 0; } }
/* Полотенце: кошка подаёт лапку, её вытирают. */
.cat.wiping .paw-up { display: inline; animation: wipe .35s ease-in-out infinite alternate; transform-origin: 86px 150px; }
@keyframes wipe { from { transform: rotate(-6deg); } to { transform: rotate(8deg) translateX(3px); } }
@keyframes stink { 0%, 100% { transform: translateY(0); opacity: .85; } 50% { transform: translateY(-4px); opacity: .45; } }
.cat.fluttering .eyes-open { animation: flutter .3s ease-in-out 4; }
.cat.happytail .tail { animation-duration: .45s; }
.cat.sniffing .head { animation: sniff .3s ease-in-out infinite; }
.cat.lapping .head { animation: lap .2s ease-in-out infinite; }
.cat.lapping .mouth { display: none; }
.cat.lapping .mouth-open { display: inline; }
.cat.polishing .head { animation: polish .45s ease-in-out infinite; }
.cat.batting .paw-up { display: inline; animation: bat .25s ease-in-out infinite; transform-origin: 86px 150px; }
.cat.highjump .cat-body { animation: highjump .8s ease-out; }
.cat.highjump .paw-up { display: inline; transform: translateY(-40px); }
.cat.crouching .cat-body { animation: crouch .3s ease-in-out infinite; }
.cat.crouching .head { transform: translateY(16px); }
.cat.pouncing .cat-body { animation: pounce .7s ease-out; }
.cat.leaning .head { transform: rotate(-14deg) translateX(-6px); }
.cat.kicking .paw-r { animation: kick .18s ease-in-out infinite; }
.cat.headshake .head { animation: headshake .22s ease-in-out infinite; }
.cat.lookup .head { transform: translateY(-6px) rotate(5deg); }
.cat.lookup .eye { transform: translate(0, -7px); }
.cat.lookup .cat-body { animation: wobble .9s ease-in-out; }
.cat.prancing .cat-body { animation: prance .6s ease-in-out 2; }
.cat.circling .cat-body { animation: circling .5s ease-in-out 3; }
.cat.curling .cat-body { transform: scale(1.06, .84); transition: transform .4s; }
.cat.flop .cat-body { animation: flop .5s ease-out; }
/* Распорядок дня и неожиданности (brain.js, решение 0014). */
.cat.yawning .head { transform: translateY(-4px) rotate(-4deg); }
.cat.yawning .cat-body { animation: stretch 1.4s ease-in-out; }
.cat.yawning .eyes-open, .cat.sneeze .eyes-open, .cat.yawning .mouth, .cat.sneeze .mouth { display: none; }
.cat.yawning .eyes-closed, .cat.sneeze .eyes-closed, .cat.yawning .mouth-open, .cat.sneeze .mouth-open { display: inline; }
.cat.tailchase .cat-body { animation: circling .3s ease-in-out infinite; }
.cat.tailchase .tail { animation-duration: .3s; }
.cat.sneeze .head { animation: sneeze .7s ease-out; }
/* Супердомик (решение 0044): катится с горки — лёжа на животе, мордочкой вниз; выглядывает из окошка мини-домика — видна одна мордочка
   (низ обрезан по подбородок), кошка уменьшена до размера окошка (число 0,42 — в brain.js, PEEK_HEAD). */
.cat.sliding .cat-body { transform: rotate(-32deg); transition: transform .2s; }
.cat.peeking .cat-body { transform: scale(.42); clip-path: inset(-30% -30% 38% -30%); transition: transform .3s; }

.bubble {
  position: absolute;
  bottom: calc(100% - 6px);
  left: 50%;
  transform: translate(calc(-50% + var(--bx, 0px)), 6px) scale(.9);
  width: max-content;
  max-width: 200px;
  background: var(--panel);
  border-radius: 16px;
  padding: 8px 12px;
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  z-index: 5;
}
.bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--panel);
  border-bottom: 0;
}
.bubble.show { opacity: 1; transform: translate(calc(-50% + var(--bx, 0px)), 0) scale(1); }
.cat.sleeping .bubble { bottom: 55%; }

.particle {
  position: absolute;
  font-size: 26px;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  animation: float-up 1.4s ease-out forwards;
}

/* Гости комнаты для неожиданностей: муха у мордочки, бабочка за окном, солнечный зайчик на полу. */
.critter { position: absolute; pointer-events: none; }
.critter .wings { transform-box: fill-box; transform-origin: center; animation: flap .12s linear infinite; }
.critter.fly { width: 34px; bottom: calc(var(--floor-y) + 150px); z-index: 6; animation: fly-loop 4.6s ease-in-out forwards; }
.critter.butterfly { width: 30%; left: -32%; top: 38%; animation: flutter-by 5.2s ease-in-out forwards; }
.critter.butterfly .wings { animation-duration: .3s; }
.critter.sunbeam {
  bottom: calc(var(--floor-y) - 8px);
  width: 72px; height: 24px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(#fffef2, rgba(255, 236, 120, .85) 50%, transparent 72%);
  transition: left .35s ease-out;
  animation: shimmer .5s ease-in-out infinite alternate;
  z-index: 2;
}

.room.drop-cat .cat-body { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 6px var(--accent)); }

/* ---------- Нижняя панель: полка и кнопки — сплошная, во всю ширину, у нижнего края (не плавает в комнате) ---------- */
.hud-bottom {
  position: absolute;
  z-index: 8;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  border-radius: 24px 24px 0 0;
  background: var(--panel);
  box-shadow: 0 -8px 22px -12px rgba(70, 30, 15, .5);
}
/* Полка: сверху кнопки комнат (решение 0047, раньше — кнопки по потребностям, их придумала Арина), под ними — общие вещи и вещи открытой мебели. */
.tray { padding: 10px 10px 8px; }
.shelf-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.shelf-tabs::-webkit-scrollbar { display: none; }
.shelf-tab {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  height: 46px;
  padding: 0 2px;
  margin-bottom: 3px;
  border-radius: 12px;
  background: linear-gradient(#fffdf9, #f3e4d3);
  box-shadow: 0 2px 0 var(--tile-edge), inset 0 1px 0 #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.tab-art { display: flex; width: 20px; height: 20px; flex: none; }
.tab-art .ui-ico { width: 100%; height: 100%; }
/* Кошка зовёт в эту комнату — кнопка мягко пульсирует. */
.shelf-tab.call { animation: tab-call 1s ease-in-out infinite; }
@keyframes tab-call { 50% { background: linear-gradient(#fff3c4, #ffd77a); transform: translateY(-2px); } }
.shelf-tab:active { transform: translateY(2px); box-shadow: 0 0 0 var(--tile-edge), inset 0 1px 0 #fff; }
/* Нажатая кнопка — мягкий оранжевый (так захотела Арина, вместо чёрного). */
.shelf-tab.on { background: linear-gradient(#ffd9b3, #ffbb7c); box-shadow: 0 2px 0 #e39a57, inset 0 1px 0 rgba(255, 255, 255, .7); color: var(--ink); }
.shelf {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 8px 2px 2px;
  touch-action: pan-x;
  scrollbar-width: none;
}
.shelf::-webkit-scrollbar { display: none; }
/* Подсказка после общих вещей: «Вещи — внутри. Нажми на холодильник!» */
.shelf-hint { flex: none; align-self: center; max-width: 210px; padding: 0 4px; color: var(--muted, #7a6a7e); font-size: 13px; font-weight: 700; line-height: 1.25; white-space: normal; }
.shelf-item {
  position: relative;
  flex: none;
  width: 54px;
  height: 54px;
  padding: 7px;
  border-radius: 16px;
  background: linear-gradient(#fffaf3, #f4e1cc);
  box-shadow: 0 4px 0 var(--tile-edge), inset 0 2px 0 #fff, inset 0 -3px 0 rgba(180, 120, 70, .12);
  margin-bottom: 4px;
  touch-action: pan-x;
}
.shelf-item:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--tile-edge), inset 0 2px 0 #fff; }
.shelf-item.worn { background: linear-gradient(#e6f8f1, #c2ebdc); box-shadow: 0 4px 0 #8fcdb8, inset 0 0 0 3px var(--good); }
.badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 22px;
}
.badge.ok { background: var(--good); }
/* Звёздочка «новенькое»: кошка эту вещь ещё не видела или давно забыла (решение 0038). */
.novel-star { position: absolute; top: -8px; left: -8px; display: flex; font-size: 18px; filter: drop-shadow(0 1px 1px rgba(120, 70, 0, .45)); animation: pulse 1.8s ease-in-out infinite; }
.drag-ghost {
  position: fixed;
  left: -36px;
  top: -36px;
  width: 72px;
  height: 72px;
  pointer-events: none;
  z-index: 100;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .25));
}

/* Кнопки: «Играть» по центру — круглая, чуть крупнее и выше остальных; по бокам по две кнопки. От полки отделены линией. */
.nav {
  display: grid;
  grid-template-columns: 1fr 1fr 80px 1fr 1fr;
  align-items: end;
  height: 60px;
  margin: 0 12px;
  padding-bottom: 8px;
  border-top: 1.5px solid var(--line);
}
.nav-btn {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.nav-ico { font-size: 22px; line-height: 1; }
.nav-btn.play { color: var(--accent-dark); font-weight: 800; }
.play-disc {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-top: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--accent-2), var(--accent) 70%);
  box-shadow: 0 0 0 3px var(--panel), 0 8px 14px -6px rgba(200, 60, 30, .7);
}
.play-disc .nav-ico { font-size: 21px; }
.nav-btn:active, .big-btn:active, .buy:active { transform: translateY(2px); }

.toast {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top) + 76px);
  transform: translate(-50%, -20px);
  max-width: calc(100% - 32px);
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 18px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 200;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Экраны поверх комнаты ---------- */
.screen {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  background: var(--bg);
  z-index: 50;
  overflow-y: auto;
}
.screen.open { display: flex; }
.screen-head {
  position: sticky;          /* шапка с кнопкой «назад» остаётся наверху, пока листаешь экран */
  top: 0;
  z-index: 5;
  flex-shrink: 0;
  background: var(--bg);
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
}
.screen-head > span:empty { width: 44px; }
.screen-head h1 { margin: 0; font-size: 19px; text-align: center; }
.screen-inner { width: 100%; max-width: 600px; margin: 0 auto; padding: 0 16px 28px; }
.screen-inner.center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 100%; text-align: center; }
h1 { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
h2 { font-size: 20px; font-weight: 800; margin: 22px 0 10px; }
.big-btn {
  padding: 15px 36px;
  border-radius: var(--radius);
  background: linear-gradient(var(--accent-2), var(--accent));
  color: #fff;
  font-size: 21px;
  font-weight: 800;
  box-shadow: 0 5px 0 var(--accent-dark), 0 12px 20px -10px rgba(200, 60, 30, .6);
}

/* Знакомство */
.ob-cat { width: 170px; }
.toggle { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: var(--panel); }
.toggle button { padding: 9px 22px; border-radius: 999px; font-size: 18px; font-weight: 700; }
.toggle button.on { background: var(--ink); color: #fff; }
.swatches { display: flex; gap: 14px; }
.swatch { width: 48px; height: 48px; border-radius: 50%; border: 4px solid var(--panel); box-shadow: var(--shadow); }
.swatch.on { outline: 4px solid var(--accent); }
.ob-label { font-size: 19px; font-weight: 700; }
.ob-name {
  width: 100%;
  max-width: 280px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 3px solid var(--line);
  background: var(--panel);
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  -webkit-user-select: text;
  user-select: text;
}
.ob-name:focus { outline: none; border-color: var(--accent); }
.shake { animation: shake .25s 2; }

/* Стартовый экран и вход */
.welcome-text { font-size: 19px; color: var(--muted); max-width: 320px; margin: 0; line-height: 1.35; }
.big-btn.second { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); font-size: 19px; }
.big-btn:disabled { opacity: .6; }
.ob-name.code { max-width: 160px; letter-spacing: 8px; }

/* Магазин и «Мои вещи»: три карточки в ряд — видно больше вещей, меньше листать. */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px 12px;
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  text-align: center;
}
.card-art { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; }
.color-cat { width: 50px; }
.card-name { font-size: 15px; font-weight: 700; line-height: 1.15; min-height: 2.3em; display: flex; align-items: center; }
.card-note { font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.2; }
.buy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: var(--good);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  box-shadow: 0 3px 0 var(--good-dark);
}
.buy .ui-ico { width: 20px; height: 20px; }
.buy:disabled { background: #e7e3ee; color: var(--muted); box-shadow: none; cursor: default; }
.buy:disabled .ui-ico { filter: grayscale(1); opacity: .6; }
.need-more { font-size: 12px; color: var(--muted); }
.owned { margin-top: 4px; color: var(--good-dark); font-size: 15px; font-weight: 800; }
button.card { font: inherit; color: inherit; border: 0; }

/* Книжка */
.book-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow);
  font-size: 17px;
}
.mark { font-size: 24px; }
.book-tip { color: var(--muted); font-size: 15px; }
.book-actions { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
/* Вход на экран взрослого (решение 0047): неприметная шестерёнка без подписи — ребёнок не подумает нажать. */
.gear-btn { width: 26px; height: 26px; padding: 0; color: var(--muted); opacity: .4; }
.gear-btn .ui-ico { width: 100%; height: 100%; }
.link-btn { margin-top: 20px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; font-size: 15px; }

/* Дневник */
.nav-btn { position: relative; }
.nav-badge { top: -6px; right: -4px; }
.secrets-card { padding: 12px 14px; border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.secrets-card summary { font-size: 18px; font-weight: 700; cursor: pointer; }
.secrets-card .book-row { box-shadow: none; background: var(--bg); }
.diary-day { color: var(--muted); font-size: 16px; font-weight: 700; margin: 20px 0 8px; }
.diary-entry {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow);
  text-align: left;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.45;
}
.diary-entry.draft { background: var(--hint-bg); border: 2px dashed var(--accent); }
.diary-pen { display: block; margin-top: 6px; color: var(--accent-dark); font-size: 16px; font-weight: 700; }
.diary-note { margin-top: 6px; color: var(--muted); font-weight: 500; font-style: italic; }
.diary-mood { font-size: 22px; }
.draft-ask { font-size: 19px; color: var(--muted); text-align: center; margin: 4px 0 10px; }
.draft-text {
  min-height: 70px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
}
.draft-text:empty { display: none; }
.draft-text .gap { color: var(--accent); letter-spacing: 2px; }
.draft-field { position: relative; margin-top: 10px; }
.draft-field .pick-box { min-height: 0; }
.draft-field .order-item { font-size: 20px; }
.draft-extra { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 14px; }
.mood-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mood-btn { width: 52px; height: 52px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); font-size: 28px; }
.mood-btn.on { outline: 4px solid var(--accent); }
.diary-input {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 3px solid var(--line);
  background: var(--panel);
  font: inherit;
  font-size: 18px;
  color: var(--ink);
  -webkit-user-select: text;
  user-select: text;
}
.diary-input:focus { outline: none; border-color: var(--accent); }

/* Выбор предмета: три большие карточки во всю высоту экрана, зверёк выглядывает справа. */
#gamesBody { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.game-card {
  position: relative;
  flex: 1;
  max-height: 200px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 18px 44% 18px 20px;
  border-radius: 26px;
  text-align: left;
  box-shadow: 0 4px 0 var(--edge);
  overflow: hidden;
}
.game-card.skin-mouse { background: #ffdcb5; }
.game-card.skin-fish { background: #c3e8fb; }
.game-card.skin-bird { background: #cdeed4; }
.game-art { position: absolute; right: 14px; top: 50%; width: 40%; max-width: 170px; transform: translateY(-50%); }
.game-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.1; }
.game-about { font-size: 16px; color: var(--ink); opacity: .7; }

/* ---------- Мини-игра ---------- */
/* Задание — в той же комнате: тёплая стена со светом из окна, задание и поле лежат на ней карточками. */
#play {
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 30% at 50% 8%, rgba(255, 246, 214, .9), transparent 70%),
    linear-gradient(var(--wall), var(--wall-low));
}
#play .screen-head { background: transparent; }
#play .play-meta { padding: 6px 12px 6px 7px; border-radius: 999px; background: #fff1c4; }
.play-progress { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; width: calc(100% - 32px); max-width: 568px; margin: 0 auto 12px; }
.play-progress i { height: 8px; border-radius: 4px; background: rgba(42, 31, 45, .14); }
.play-progress i.done { background: var(--accent); }
.play-progress i.cur { background: var(--panel); box-shadow: inset 0 0 0 2px var(--accent); }
.play-meta { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
#playCoins { display: inline-flex; align-items: center; gap: 3px; }
#playCoins .ui-ico { width: 20px; height: 20px; }
/* Кошка слева от задания, задание — её облачко с хвостиком к ней (решение 0030). Кошка сидит на нижнем крае строки. */
.prompt-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 16px;
}
.play-cat { width: 88px; flex: none; margin-bottom: -4px; pointer-events: none; }
.prompt-bubble {
  position: relative;
  flex: 1;
  min-width: 0;             /* иначе облачко растягивается под длинный пример шире экрана, и он не уменьшается */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 104px;
  padding: 12px 14px;
  border-radius: 26px;
  background: var(--panel);
  box-shadow: 0 16px 30px -18px rgba(70, 30, 15, .6);
}
.prompt-bubble::before {
  content: '';
  position: absolute;
  left: -9px;
  bottom: 24px;
  border: 10px solid transparent;
  border-left: 0;
  border-right-color: var(--panel);
}
/* Фраза кошки — первой строкой облачка, мельче и своим цветом: это она говорит, а ниже — само задание. */
.cat-line { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--cat-say); text-align: center; }
.cat-line[hidden] { display: none; }
.prompt {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
/* Узкий телефон: кошка меньше, чтобы задание оставалось крупным. */
@media (max-width: 370px) {
  .play-cat { width: 68px; }
  .prompt-row { gap: 8px; }
}
.prompt .big { max-width: 100%; overflow: hidden; font-size: 44px; letter-spacing: 1px; white-space: nowrap; }
.prompt .pic { font-size: 56px; line-height: 1; }
.prompt .word { font-size: 36px; letter-spacing: 2px; white-space: nowrap; }
/* Пропуск — клеточка с пунктирной рамкой (решение 0022): в математике с бледным «?», в русском пустая; ответ влетает в неё. */
.prompt .gap, .prompt .slot, .card-ex .gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15em;
  height: 1.2em;
  padding: 0 .1em;
  margin: 0 .06em;
  border: 3px dashed var(--accent);
  border-radius: .18em;
  color: rgba(255, 107, 74, .4);
  line-height: 1;
  vertical-align: middle;
}
.prompt .gap.wide { min-width: 2.2em; }
.prompt .gap.filled { border-style: solid; border-color: var(--good); color: var(--good); animation: pulse .3s; }
.prompt .gap.closed { min-width: 0; width: 0; padding: 0; margin: 0; border-width: 0; }
.prompt .gap svg, .gap-fly svg { width: 1em; height: 1em; }
.gap-fly { position: fixed; z-index: 60; color: var(--good); line-height: 1; pointer-events: none; transform: translate(-50%, -50%); }
.prompt .got { color: var(--good); margin: 0 2px; }
.screen-head .play-title { min-width: 0; overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
/* Шапка мини-игры: крестик, название, 🔊 и 💡, монетки. */
#play .play-head { grid-template-columns: 44px 1fr auto auto; gap: 6px; }
/* «Проверь кошку» (решение 0030): ответ кошки в её фразе — крупнее и тёмным; картинка-ответ (лента, фигура) — маленькой. */
.cat-ans { font-size: 20px; color: var(--ink); }
.cat-ans.pic { display: block; margin-top: 4px; }
.cat-ans.pic svg { display: block; width: 100%; height: 32px; }
.hint {
  max-width: 600px;
  width: calc(100% - 32px);
  margin: 8px auto 0;
  padding: 8px 12px;
  border-radius: 16px;
  background: var(--hint-bg);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  display: none;
}
.hint.show { display: block; }
/* После ошибки ответы на пару секунд не принимаются, пока звучит подсказка (решение 0022). */
.field.wait { pointer-events: none; filter: saturate(.5) brightness(.92); transition: filter .2s; }

/* Лампочка 💡 и карточка-объяснение темы (решение 0022) */
.play-tools { display: flex; gap: 6px; }
.play-tools .icon-btn { width: 44px; height: 44px; box-shadow: var(--float-shadow); }
.topic-card {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(43, 35, 64, .4);
}
.topic-card[hidden] { display: none; }
.topic-card-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 520px;
  max-height: 100%;
  overflow-y: auto;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.topic-card-head { display: flex; align-items: center; gap: 10px; }
.topic-card-head h2 { flex: 1; margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.2; }
.card-cat { width: 56px; flex: none; }
/* Правило — главное в строке: крупнее и темнее; пример под ним — мельче, на белой подложке, как пример в учебнике. */
.card-new { margin: 0; padding: 10px 14px; border-radius: 16px; background: #ffe3c2; color: var(--ink); font-size: 18px; font-weight: 800; line-height: 1.3; }
.card-new[hidden] { display: none; }
.card-row { padding: 12px 14px; border-radius: 16px; background: var(--hint-bg); }
.card-row p { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.35; }
.card-ex { margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: var(--panel); font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--accent-dark); overflow-wrap: anywhere; }
.card-ex b { color: var(--good); }
.card-ex svg { max-width: 100%; }
.card-ex .ribbon { width: 220px; }
.card-ex .pencil { display: block; width: auto; height: 20px; margin: 4px 0; }
.card-ex .tenbox { font-size: 15px; }
.card-ex .ribbon { display: block; }
.card-ex .sticks { max-height: 64px; width: auto; display: inline-block; }
.card-ex .ruler { width: 100%; max-width: 312px; }
.card-ex .tbl { margin: 4px 0; color: var(--ink); }
.topic-card .big-btn { align-self: center; }
.dots { letter-spacing: 2px; }
.dots.a { color: var(--accent); }
.dots.b { color: #3a86ff; }

.field {
  position: relative;
  flex: 1;
  width: 100%;
  width: calc(100% - 24px);
  max-width: 576px;
  margin: 12px auto calc(env(safe-area-inset-bottom) + 12px);
  border-radius: 26px;
  overflow: hidden;
  touch-action: none;
  box-shadow: inset 0 2px 0 rgba(42, 31, 45, .06);
}
.field.scroll { overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
.field.skin-mouse {
  background: repeating-linear-gradient(90deg, #f6d6aa 0 78px, #efc994 78px 80px);
}
.field.skin-fish {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .25) 0 6px, transparent 7px) 0 0 / 90px 90px,
    linear-gradient(#7ec8e3, #2f7fb5);
}
.field.skin-bird {
  background:
    radial-gradient(ellipse 40px 16px at 30% 25%, rgba(255, 255, 255, .55) 98%, transparent) 0 0 / 180px 130px,
    linear-gradient(#bde0fe, #e9f5db);
}
.runner {
  position: absolute;
  left: 0;
  width: 110px;
  height: 80px;
  padding: 0;
  animation: run var(--dur) linear infinite;
  animation-delay: var(--delay);
}
.runner-art { position: absolute; inset: 0; animation: face var(--dur) step-end infinite; animation-delay: var(--delay); }
.runner-label {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  min-width: 46px;
  padding: 0 6px;
  border-radius: 14px;
  background: #fff;
  font-size: 28px;
  line-height: 40px;
  font-weight: 800;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
}
.skin-fish .runner-label { top: 50%; }
.runner.nope .runner-label { animation: shake .3s 2; background: #ffd6d6; }
.runner.caught { animation-play-state: paused; pointer-events: none; }
.runner.caught .runner-label { background: #c8f2d8; }
.skin-mouse .runner.caught > * { animation: caught-pop .6s ease-in forwards; }
.skin-fish .runner.caught > * { animation: caught-up .7s ease-in forwards; }

/* Задания: инструкция и картинки в вопросе */
.prompt { flex-wrap: wrap; text-align: center; }
.prompt .ask { flex-basis: 100%; font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.prompt .solved { color: var(--good); }
.prompt .story { flex-basis: 100%; font-size: 22px; font-weight: 500; line-height: 1.4; }
.prompt .pic-row { flex-basis: 100%; min-width: 0; font-size: 30px; letter-spacing: 2px; white-space: nowrap; }

/* Выбери карточку */
.pick-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  padding: 16px;
  align-content: center;
  min-height: 100%;
}
.pick-box.letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pick-card {
  min-height: 96px;
  padding: 10px;
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 6px 0 var(--tile-edge);
  display: flex;
  align-items: center;
  justify-content: center;
}
.letters .pick-card { min-height: 0; width: 52px; height: 64px; padding: 0; font-size: 34px; }
.pick-card.off { background: rgba(255, 255, 255, .55); color: var(--muted); box-shadow: none; }
.pick-card .shape { width: 72px; }
.card-big { font-size: 48px; line-height: 1; }
.card-word { font-size: 24px; }
.pick-card.right { background: #c8f2d8; }
.pick-card.nope, .sort-item.nope, .order-item.nope { animation: shake .3s 2; background: #ffd6d6; }

/* Разложи по домикам */
.sort-bins { display: flex; gap: 10px; padding: 14px 14px 0; }
.sort-bin {
  flex: 1;
  min-height: 150px;
  padding: 8px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .8);
  border: 3px dashed var(--line);
  text-align: center;
}
.sort-bin.over { border-color: var(--accent); background: #fff; }
.sort-bin-title { font-size: 18px; line-height: 1.2; margin-bottom: 6px; }
.sort-bin-items, .sort-pile { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sort-pile { padding: 18px 14px; }
.sort-item, .order-item {
  min-width: 60px;
  height: 60px;
  padding: 0 12px;
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 5px 0 var(--tile-edge);
  font-size: 28px;
  touch-action: none;
}
.sort-item.picked { outline: 4px solid var(--accent); }
.sort-item.dragging { position: relative; z-index: 10; box-shadow: 0 10px 18px rgba(0, 0, 0, .25); }
.sort-item.placed { min-width: 46px; height: 46px; font-size: 22px; background: #c8f2d8; box-shadow: none; }
.vow { color: #e63946; }
.cons, .hard { color: #1d4ed8; }
.soft { color: #2b9348; }

/* По порядку */
.order-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 18px 14px 0; }
.order-slot {
  min-width: 64px;
  height: 68px;
  border-radius: 16px;
  border: 3px dashed var(--line);
  background: rgba(255, 255, 255, .6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.order-slot.filled { border-style: solid; border-color: var(--good); }
.order-slot .order-item { box-shadow: none; background: #c8f2d8; }
.order-pile { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 24px 14px; }
.order-item { font-size: 24px; }
.order-slots.column, .order-pile.column { flex-direction: column; align-items: flex-start; padding-left: 20px; }
.order-slots.column, .order-pile.column { gap: 6px; padding-top: 12px; padding-bottom: 6px; }
.order-slots.column .order-slot { min-width: 200px; height: 46px; justify-content: flex-start; }
.column .order-item { height: 40px; }
.order-item svg { display: block; }
/* Плитки «по порядку» только нажимаются, не перетаскиваются — палец, начавший на плитке, может листать поле. */
.order-item { touch-action: manipulation; }
/* Фразы сказки (Что сначала, что потом): длинные плитки столбиком, шрифт мельче; длинная фраза переносится, а не уезжает за край. */
.phrases .order-item { font-size: 18px; max-width: 100%; height: auto; min-height: 40px; padding-top: 4px; padding-bottom: 4px; text-align: left; line-height: 1.2; }
.order-slots.column.phrases, .order-pile.column.phrases { align-items: stretch; padding-right: 20px; }
.order-slots.phrases .order-slot { min-width: 0; height: auto; min-height: 46px; }
.tile-pic { font-size: 38px; line-height: 1; }

/* Кнопка 🔊 — прочитать задание вслух (решение 0018) */
.say-btn { font-size: 24px; }

/* Картинки в вопросе (математика) */
.prompt .pic svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.prompt .pic .ruler { width: 312px; }
.prompt .pic .lines { width: 150px; }
.prompt .pic .sticks { max-height: 76px; width: auto; }
.tenbox {
  display: inline-grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 2px 4px;
  border: 3px solid var(--accent);
  border-radius: 8px;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 2px;
}
.cmp-pics { flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 24px; }
.cmp-pics > span:not(.gap) { max-width: 40%; line-height: 1.2; word-break: break-all; }
.cmp-pics .gap { font-size: 36px; }
.pair-rows { flex-basis: 100%; display: grid; gap: 4px; justify-content: center; }
.pair-rows > div { display: grid; grid-template-columns: repeat(8, 32px); font-size: 26px; text-align: center; }
.tbl { border-collapse: collapse; margin: 4px auto 0; font-size: 22px; }
.tbl th, .tbl td { border: 2px solid var(--line); padding: 4px 10px; text-align: center; }
.tbl th { background: var(--bg); }
.odd-row { flex-basis: 100%; display: flex; justify-content: center; gap: 6px; }
.odd-row svg { width: 54px; }
.odd-row .odd-mark { border: 3px dashed var(--accent); border-radius: 12px; }
.hint .sides { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; font-size: 16px; }

/* Выбери карточку: раскладки (js/mechanics.js — layout) */
.pick-box.line { display: flex; flex-wrap: nowrap; justify-content: center; gap: 4px; padding: 16px 8px; align-items: center; }
.pick-box.line .pick-card { flex: 1 1 0; min-width: 0; max-width: 72px; min-height: 72px; padding: 4px 2px; }
.pick-box.line .card-big { font-size: clamp(24px, 8vw, 40px); }
.pick-box.line .tree { width: 100%; }
.pick-box.from-left::before, .pick-box.from-right::after { align-self: center; font-size: 22px; }
.pick-box.from-left::before { content: '➡️'; }
.pick-box.from-right::after { content: '⬅️'; }
.pick-box.track .pick-card { flex-direction: column; justify-content: flex-end; font-size: 26px; font-weight: 800; min-height: 84px; }
.pick-box.track .pick-card.mark { outline: 4px solid var(--accent); }
.pick-box.track .frog { font-size: 26px; line-height: 1; }
.pick-box.stack { grid-template-columns: 1fr; gap: 10px; }
.pick-box.stack .pick-card { min-height: 64px; }
.pick-box.stack .ribbon { width: 100%; }
.pick-box.bookcase { grid-template-columns: repeat(3, 1fr); gap: 0; min-height: 0; margin: 40px 16px; padding: 8px 10px 0; background: #fbe9d0; border: 6px solid #b08d57; border-radius: 10px; }
.pick-box.bookcase .pick-card { min-height: 80px; border-radius: 0; box-shadow: none; background: transparent; border-bottom: 8px solid #b08d57; }
.card-text { font-size: 20px; line-height: 1.25; }
.sort-item .shape { width: 44px; display: block; }
.sort-item:has(.shape) { padding: 0 6px; }
.dot-red { color: #ef476f; } .dot-blue { color: #3a86ff; } .dot-green { color: #52b788; } .dot-yellow { color: #ffb703; }

/* Соедини пары */
.match { display: flex; justify-content: center; gap: 28px; padding: 16px; min-height: 100%; }
.match-col { display: flex; flex-direction: column; justify-content: center; gap: 10px; flex: 1; max-width: 220px; }
.match-item {
  min-height: 60px;
  padding: 6px 10px;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.match-item .card-big { font-size: 34px; }
.match-item.picked { outline: 4px solid var(--accent); }
.match-item.nope { animation: shake .3s 2; background: #ffd6d6; }
.match-item.paired { box-shadow: none; }
.match-item.pair0 { background: #c8f2d8; }
.match-item.pair1 { background: #cfe8ff; }
.match-item.pair2 { background: #ffe3a3; }
.match-item.pair3 { background: #f3d1ff; }

/* Код для взрослых */
.pin-title { font-size: 20px; margin: 0; }
.pin-dots { display: flex; gap: 14px; }
.pin-dot { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--ink); }
.pin-dot.on { background: var(--ink); }
.pin-note { min-height: 20px; margin: 0; color: #c0392b; font-size: 15px; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; }
.pin-pad button { height: 64px; border-radius: 18px; font-weight: 700; background: var(--panel); box-shadow: var(--shadow); font-size: 26px; }
.pin-pad button:active { transform: translateY(2px); }
.forgot-row { display: block; font-size: 22px; margin: 10px 0; }
.forgot-input {
  width: 110px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 3px solid var(--line);
  font: inherit;
  font-size: 22px;
  text-align: center;
  -webkit-user-select: text;
  user-select: text;
}

/* Экран взрослого */
.parent-tip { color: var(--muted); font-size: 15px; font-weight: 500; line-height: 1.45; }
#parent h3 { font-size: 15px; font-weight: 700; color: var(--muted); margin: 14px 0 6px; }
.topic-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  column-gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow);
  font-size: 16px;
}
.topic-row input { width: 22px; height: 22px; accent-color: var(--accent); grid-row: span 2; }
.topic-status { font-size: 13px; font-weight: 600; color: var(--muted); }
.st-hard { color: #d35400; }
.st-learned { color: var(--good); }
.parent-actions { display: flex; justify-content: space-between; gap: 12px; }

/* Как дела в учёбе */
.try-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.try-row .big-btn { flex: 1 1 140px; padding: 12px 14px; font-size: 17px; }
.energy-row { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; font-weight: 600; }
.try-select { flex: 1 1 100%; width: 100%; padding: 10px; border: none; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--panel); color: var(--ink); font: inherit; font-size: 17px; }
.test-tag { margin: 6px 12px 0; padding: 4px 10px; border-radius: 10px; background: var(--panel); color: var(--muted); font-size: 13px; font-weight: 700; text-align: center; }
.pg-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pg-sum div { padding: 10px 8px; border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.25; }
.pg-sum b { display: block; font-size: 26px; font-weight: 800; color: var(--accent-dark); }
.pg-topic, .pg-week { padding: 10px 12px; margin-bottom: 8px; border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
.pg-title { font-size: 16px; font-weight: 800; }
.pg-subj { font-size: 13px; font-weight: 600; color: var(--muted); }
.pg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pg-chip { padding: 3px 8px; border-radius: 10px; background: var(--bg); font-size: 13px; font-weight: 600; }
.pg-up { color: var(--good); }
.pg-dn { color: #d35400; }
.pg-tip { margin: 8px 0 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.pg-trap { margin-top: 4px; font-size: 14px; font-weight: 800; color: #d35400; }
.pg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); vertical-align: middle; margin-left: 4px; }

/* Проверка скорости чтения */
.speed-remind { color: var(--accent-dark); }
.speed-text { margin: 10px 0; padding: 16px; border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); font-size: 22px; font-weight: 500; line-height: 1.55; text-align: left; }
.speed-timer { margin: 4px 0 14px; font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; color: var(--accent-dark); }
.speed-history { margin-top: 6px; }
.speed-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; margin-bottom: 6px; border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); font-size: 15px; font-weight: 600; }
.speed-row b { font-size: 20px; font-weight: 800; color: var(--accent-dark); }

/* Итоги */
.result-stars { font-size: 52px; letter-spacing: 6px; }
#resultBody p { font-size: 20px; font-weight: 700; margin: 6px 0; }
.level-up { color: var(--accent-dark); }

/* ---------- Анимации ---------- */
@keyframes twirl { 50% { transform: scaleX(-1) translateY(-6px); } }
@keyframes sparkle-glow { 0%, 100% { filter: drop-shadow(0 0 4px #fff6a8); } 50% { filter: drop-shadow(0 0 12px #ffe066) drop-shadow(0 0 4px #fff) brightness(1.08); } }
@keyframes pulse { 50% { transform: scale(1.05); } }
@keyframes wag { 50% { transform: rotate(9deg); } }
@keyframes foam-wobble { to { transform: scale(1.04, .97); } }
@keyframes flutter { 50% { transform: scaleY(.15); } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes breathe { 50% { transform: scale(1.03, .97); } }
@keyframes hop { 50% { transform: translateY(-9px); } }
@keyframes chew { 50% { transform: translateY(56px) rotate(4deg); } }
@keyframes lick { 50% { transform: translateY(-14px) rotate(-12deg); } }
@keyframes jump { 40% { transform: translateY(-70px) scale(.95, 1.05); } 75% { transform: translateY(0) scale(1.08, .92); } }
@keyframes purr { 50% { transform: translateX(1px); } }
@keyframes scratch { 0%, 100% { transform: translateY(-30px); } 50% { transform: translateY(-6px); } }
@keyframes shake { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes knead { 50% { transform: translateY(-8px); } }
@keyframes sniff { 0%, 100% { transform: translateY(40px) rotate(4deg); } 50% { transform: translateY(44px) rotate(1deg); } }
@keyframes lap { 0%, 100% { transform: translateY(52px) rotate(4deg); } 50% { transform: translateY(58px) rotate(4deg); } }
@keyframes polish { 0%, 100% { transform: translateY(52px) rotate(-8deg); } 50% { transform: translateY(52px) rotate(8deg); } }
@keyframes bat { 50% { transform: translate(-18px, -10px) rotate(-30deg); } }
@keyframes highjump { 40% { transform: translateY(-120px) scale(.9, 1.15); } 75% { transform: translateY(0) scale(1.1, .9); } }
@keyframes crouch { 0%, 100% { transform: scale(1.06, .8) rotate(-2deg); } 50% { transform: scale(1.06, .8) rotate(2deg); } }
@keyframes pounce { 0% { transform: scale(1.06, .8); } 40% { transform: translateY(-50px) scale(.92, 1.1); } 80% { transform: translateY(0) scale(1.1, .88); } }
@keyframes kick { 50% { transform: translate(10px, -16px) rotate(20deg); } }
@keyframes headshake { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes wobble { 25% { transform: rotate(-7deg); } 50% { transform: rotate(5deg); } 75% { transform: rotate(-3deg); } }
@keyframes prance { 25% { transform: translate(-10px, -16px); } 50% { transform: translate(0, 0); } 75% { transform: translate(10px, -16px); } }
@keyframes circling { 50% { transform: scaleX(-1) scaleY(.94); } }
@keyframes flop { 40% { transform: translateY(-10px); } 100% { transform: scale(1.1, .8); } }
@keyframes stretch { 30% { transform: scale(1.08, .9); } 70% { transform: scale(.96, 1.05); } }
@keyframes sneeze { 45% { transform: translateY(-6px) rotate(-8deg); } 60% { transform: translateY(8px) rotate(6deg); } }
@keyframes flap { 50% { transform: scaleX(.35); } }
@keyframes fly-loop {
  0% { opacity: 0; transform: translate(70px, -30px); }
  10% { opacity: 1; transform: translate(40px, 0); }
  25% { transform: translate(-35px, -25px); }
  40% { transform: translate(25px, 10px); }
  55% { transform: translate(-15px, -18px); }
  70% { transform: translate(10px, -6px); }
  85% { opacity: 1; transform: translate(60px, -90px); }
  100% { opacity: 0; transform: translate(150px, -210px); }
}
@keyframes flutter-by {
  0% { transform: translate(0, 0); }
  30% { transform: translate(160%, -70%); }
  60% { transform: translate(300%, 20%); }
  100% { transform: translate(560%, -60%); }
}
@keyframes shimmer { from { opacity: .7; } to { opacity: 1; } }
@keyframes ask { 50% { transform: translateY(-5px) rotate(-2deg); } }
@keyframes float-up { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-90px) scale(1.2); } }
@keyframes jet { 50% { transform: translateY(-4px); opacity: .7; } }
@keyframes run { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(var(--travel)); } }
@keyframes face { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
@keyframes caught-pop { 30% { transform: scale(1.3); } 100% { transform: scale(0); opacity: 0; } }
@keyframes caught-up { 100% { transform: translateY(-260px) rotate(-20deg); opacity: 0; } }

/* Русский язык (js/topics.js): звуковые схемы, клеточки «где звук», слова строкой, знаки в конце, слова на плитках */
.scheme { display: inline-flex; gap: 4px; vertical-align: middle; }
.scheme i { width: 26px; height: 26px; border-radius: 5px; border: 2px solid rgba(0, 0, 0, .2); }
.scheme .sq-v { background: #e63946; }
.scheme .sq-h { background: #3a6fe0; }
.scheme .sq-s { background: #2b9348; }
.prompt .big .scheme i { width: 36px; height: 36px; }
.pick-card .scheme + .card-word { margin-left: 12px; }
.cells { display: inline-flex; gap: 3px; margin-right: 12px; }
.cells i { width: 18px; height: 18px; border: 2px solid var(--muted); border-radius: 4px; }
.cells i.on { background: var(--accent); border-color: var(--accent); }
.pick-box.words { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pick-box.words .pick-card { min-height: 56px; padding: 6px 14px; }
.pic-word { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.card-big.mark { font-size: 64px; line-height: .8; }
.card-sub { margin-left: 8px; font-size: 16px; color: var(--muted); }
.tile-word { font-size: 20px; white-space: nowrap; }
/* Название книги на плитке «разложи по домикам»: может быть длинным, переносится. */
.tile-title { font-size: 18px; line-height: 1.15; }
.sort-item:has(.tile-title) { height: auto; min-height: 52px; padding: 6px 12px; }
.sort-item.placed:has(.tile-title) { min-height: 36px; }
.sort-item.placed .tile-title { font-size: 14px; }
/* Автор стихотворения — под текстом, справа (Сказка, загадка, потешка). */
.story .author { display: block; margin-top: 4px; font-size: 17px; color: var(--muted); text-align: right; }
.sort-item.placed .tile-word { font-size: 15px; }
/* Автор, название, оглавление: обложка книги — части обложки и есть карточки (js/topics.js, bookParts). */
.pick-box.cover { display: flex; flex-direction: column; gap: 10px; width: min(260px, 78%); min-height: 0; margin: 24px auto;
  padding: 18px 14px 18px 28px; border-radius: 6px 18px 18px 6px; background: var(--cover, #3a86ff);
  box-shadow: inset 12px 0 0 rgba(0, 0, 0, .18), 0 6px 14px rgba(61, 44, 41, .25); }
.pick-box.cover.c1 { --cover: #3a86ff; } .pick-box.cover.c2 { --cover: #e5383b; } .pick-box.cover.c3 { --cover: #2b9348; }
.pick-box.cover.c4 { --cover: #7b2cbf; } .pick-box.cover.c5 { --cover: #e07a00; }
.pick-box.cover .pick-card { min-height: 0; padding: 8px; background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; text-align: center; }
.pick-box.cover .pick-card.right { background: #c8f2d8; color: var(--ink); }
.pick-box.cover .pick-card.nope { background: #ffd6d6; color: var(--ink); }
.pick-box.cover .cover-author { font-size: 18px; }
.pick-box.cover .cover-title { font-size: 28px; font-weight: 800; line-height: 1.1; }
.pick-box.cover .cover-pic { font-size: 72px; line-height: 1.1; }
/* Оглавление: строчки «название ........ страница»; нажимается номер (или название — by-page). */
.pick-box.toc { grid-template-columns: 1fr 64px; gap: 6px 4px; min-height: 0; margin: 16px; padding: 14px; background: #fffaf0;
  border-radius: 8px; box-shadow: var(--shadow); }
.pick-box.toc .pick-card { min-height: 48px; padding: 4px 8px; font-size: 22px; font-weight: 700; }
.pick-box.toc .pick-card:nth-child(odd) { justify-content: flex-start; text-align: left; font-size: 19px; font-weight: 400; }
.pick-box.toc .pick-card.off { background: transparent; color: var(--ink); }
.toc-t { display: flex; flex: 1; align-items: baseline; gap: 4px; }
.toc-t::after { content: ''; flex: 1; min-width: 12px; border-bottom: 3px dotted var(--muted); }
.runner-label.long { font-size: 20px; }
.prompt .story.glued { word-break: break-all; letter-spacing: 1px; }
.prompt .story .gap { margin-left: 3px; }
.hint .abc { display: block; margin-top: 4px; font-size: 14px; letter-spacing: 1px; word-break: break-all; }

@media (prefers-reduced-motion: reduce) {
  .runner { animation-duration: calc(var(--dur) * 1.6); }
  .runner-art { animation-duration: calc(var(--dur) * 1.6); }
}

/* ---------- Взрослые экраны: светлый деловой стиль (решение 0042) ----------
   Вход по коду, экран взрослого, «Как дела в учёбе», проверка скорости. Те же классы, что в игре, но другие значения:
   краски переопределены на самом экране (.adult), поэтому игра для ребёнка остаётся прежней. */
.screen.adult {
  --bg: #f5f6f8;
  --panel: #fff;
  --ink: #1b2130;
  --muted: #586172;
  --accent: #3446c8;
  --accent-2: #3446c8;
  --accent-dark: #2837a8;
  --good: #17734f;
  --line: #e1e4ea;
  --soft: #eceef3;
  --warn-ink: #a94a00;
  --shadow: 0 0 0 1px var(--line);
  --radius: 12px;
  --font-display: var(--font);
}
.adult .screen-head { border-bottom: 1px solid var(--line); }
.adult .screen-head h1 { font-size: 17px; font-weight: 650; letter-spacing: 0; }
.adult .icon-btn { background: transparent; box-shadow: none; }
.adult .icon-btn:active { background: var(--soft); transform: none; }
.adult .screen-inner { padding-top: 16px; }
.adult h2 { margin: 28px 0 8px; font-size: 15px; font-weight: 650; }
.adult #parent h3, #parent.adult h3 { margin: 16px 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.adult .parent-tip { font-size: 14px; line-height: 1.5; max-width: 70ch; text-wrap: pretty; }
.adult .big-btn { padding: 12px 20px; border-radius: 10px; background: var(--accent); font-size: 16px; font-weight: 600; box-shadow: none; }
.adult .big-btn.second { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); font-size: 15px; }
.adult .big-btn:active { background: var(--accent-dark); }
.adult .big-btn.second:active { background: var(--soft); }
.adult .try-select { padding: 11px 12px; border-radius: 10px; font-size: 16px; }
.adult .toggle { padding: 3px; border-radius: 10px; background: var(--soft); }
.adult .toggle button { padding: 9px 20px; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--muted); }
.adult .toggle button.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.adult .link-btn { font-size: 14px; }
.adult .topic-row { padding: 12px 14px; margin-bottom: 6px; border-radius: 10px; }
.adult .topic-title { font-weight: 550; }
.adult .st-hard, .adult .pg-dn, .adult .pg-trap { color: var(--warn-ink); }
.adult .pg-topic, .adult .pg-week, .adult .speed-row, .adult .speed-text { border-radius: 10px; }
.adult .pg-title { font-weight: 650; }
.adult .pg-trap { font-weight: 650; }
.adult .pg-chip { border-radius: 8px; background: var(--soft); }
.adult .pg-sum div { border-radius: 10px; }
.adult .pg-sum b { font-weight: 650; color: var(--ink); }
.adult .speed-timer, .adult .speed-row b { color: var(--ink); font-weight: 650; }
.adult .speed-remind { color: var(--warn-ink); }
.adult .pin-dot { border-width: 2px; }
.adult .pin-pad button { border-radius: 12px; font-weight: 600; }
.adult .pin-pad button:active { background: var(--soft); transform: none; }
.adult .pin-note { color: var(--warn-ink); }
.adult .forgot-input { border: 1px solid var(--line); border-radius: 10px; }
.sp-dot { display: inline-block; width: 9px; height: 9px; margin: 0 2px; border-radius: 50%; vertical-align: baseline; background: #b8bec9; }
.sp-dot.ok { background: var(--good); }
.sp-dot.mid { background: #d9a21b; }

/* Список переходов: «Как дела в учёбе», «Проверка скорости» */
.ad-nav { margin: 12px 0 0; border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.ad-nav-row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 0 16px; font-size: 16px; font-weight: 550; text-align: left; color: var(--ink); }
.ad-nav-row + .ad-nav-row { border-top: 1px solid var(--line); }
.ad-nav-row:active { background: var(--soft); }

/* Стрелка-шеврон: вправо в списке, вниз — когда блок раскрыт */
.ad-chev { flex: none; width: 8px; height: 8px; margin: 0 4px 0 12px; border: solid var(--muted); border-width: 2px 2px 0 0; transform: rotate(45deg); transition: transform .18s cubic-bezier(.25, 1, .5, 1); }

/* «Сегодня»: свёрнутый блок */
.ad-today { border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); }
.ad-today > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 64px; padding: 10px 16px; cursor: pointer; list-style: none; }
.ad-today > summary::-webkit-details-marker { display: none; }
.ad-today > summary:active { background: var(--soft); border-radius: 12px; }
.ad-today > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.ad-today[open] > summary .ad-chev { transform: rotate(135deg); }
.ad-sum-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ad-sum-title { font-size: 17px; font-weight: 650; }
.ad-sum-brief { font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--muted); }
.ad-today-body { padding: 0 16px 16px; border-top: 1px solid var(--line); }
.ad-h { margin: 16px 0 4px; font-size: 15px; font-weight: 650; color: var(--ink); }
#parent .ad-today .ad-h { font-size: 15px; color: var(--ink); margin: 18px 0 4px; }
.ad-list, .ad-needs { margin: 0; padding: 0; list-style: none; }
.ad-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ad-row-main { display: flex; flex-direction: column; min-width: 0; }
.ad-row-title { font-size: 15px; font-weight: 600; }
.ad-row-sub { font-size: 13px; color: var(--muted); }
.ad-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13.5px; color: var(--muted); text-align: right; }
.ad-row-side b { color: var(--ink); font-weight: 650; }
.ad-up { color: var(--good); font-weight: 600; }
.ad-dn { color: var(--warn-ink); font-weight: 600; }
.ad-note { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.ad-note b { color: var(--ink); font-weight: 650; }
.ad-need { padding: 12px 0; border-bottom: 1px solid var(--line); }
.ad-need:last-child { border-bottom: 0; }
.ad-need-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ad-need-val { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ad-need-val.asks { color: var(--warn-ink); font-weight: 600; }
.ad-bar { height: 6px; margin: 8px 0 10px; border-radius: 3px; background: var(--soft); overflow: hidden; }
.ad-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.ad-bar.asks i { background: #d9772b; }
.ad-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-chip { padding: 4px 10px; border-radius: 999px; background: var(--soft); font-size: 13.5px; }
.ad-chip b { font-weight: 650; font-variant-numeric: tabular-nums; }
.ad-chip.task { background: #e8ebfb; color: var(--accent-dark); }

@media (prefers-reduced-motion: reduce) {
  .ad-chev { transition: none; }
}