/* ===== Цвета игры =====
   Переменные: меняешь цвет в одном месте, и он меняется везде. */
:root {
  /* Мягкая пастельная палитра. Контраст текста — не ниже 4.5:1 (WCAG AA):
     светлый текст на --space и --space-2, тёмный (--space) — на розовом,
     жёлтом и мятном. Проверяет tools/smoke.js (сценарий «Контраст»). */
  --space: #34375F;    /* ночное небо (основной фон) */
  --space-2: #4A4E7E;  /* небо посветлее (фон окон) */
  --nose: #F4A7B9;     /* розовый кошачий нос */
  --star: #F5D88E;     /* звёздный жёлтый */
  --mint: #9FD8C8;     /* мятный, для хороших новостей */
  --fur: #FAF7F2;      /* светлый текст */
  --font: 'Baloo 2', 'Trebuchet MS', 'Segoe UI', sans-serif;
}

html, body {
  height: 100%;
  margin: 0;
  font-family: var(--font);
  background: var(--space);
  color: var(--fur);
}

/* Карта растягивается на весь экран */
#map {
  position: absolute;
  inset: 0;
}

/* ===== Стартовый экран ===== */
.start-screen {
  position: absolute;
  inset: 0;
  z-index: 1000;              /* поверх карты */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  background:
    radial-gradient(circle at 20% 15%, var(--space-2) 0, transparent 45%),
    radial-gradient(circle at 85% 80%, var(--space-2) 0, transparent 40%),
    var(--space);
}

.start-screen.hidden {
  display: none;
}

/* Логотип с кошачьими ушками над буквой M */
.logo {
  position: relative;
  margin: 0;
  font-size: clamp(64px, 20vw, 120px);
  font-weight: 800;
  line-height: 1;
  color: var(--star);
}

.logo::before,
.logo::after {
  content: '';
  position: absolute;
  top: -0.22em;
  width: 0;
  height: 0;
  border-left: 0.14em solid transparent;
  border-right: 0.14em solid transparent;
  border-bottom: 0.24em solid var(--nose);
}
.logo::before { left: 0.04em; }
.logo::after  { left: 0.46em; }

.story {
  max-width: 30ch;
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
}

.safety {
  max-width: 30ch;
  padding: 12px 18px;
  border: 2px dashed var(--mint);
  border-radius: 18px;
  font-size: 16px;
  line-height: 1.35;
}
.safety p { margin: 4px 0; }

.big-button {
  padding: 14px 36px;
  border: none;
  border-radius: 999px;
  background: var(--nose);
  color: var(--space);
  font-family: var(--font);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
}

/* ===== Интерфейс поверх карты ===== */
.status {
  position: absolute;
  z-index: 900;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 12px;
  /* ширина — по содержимому, но не шире экрана */
  max-width: calc(100% - 24px);
  padding: 6px;
  border-radius: 16px;
  background: var(--space);
  font-size: 15px;
  line-height: 1.3;
  box-sizing: border-box;
}

/* Сообщение («Ищем спутники…»). Пустое — не занимает места. */
.status-message {
  margin: 0 8px 6px;
}
.status-message:empty {
  display: none;
}

/* Значки-счётчики: 🐱 экипаж, 🐟 рыбки, 👣 метры */
.status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  position: relative; /* «+3» всплывает от значка */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--space-2);
  color: var(--fur);
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
}
.chip.hidden {
  display: none;
}
.chip-value {
  font-weight: 800;
}

/* «+3» над значком (создаёт game.js, setChip) */
.chip-float {
  position: absolute;
  left: 50%;
  top: 100%; /* строка состояния у верхнего края — «+3» выпадает вниз */
  margin-left: -1.2em;
  width: 2.4em;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--space-2);
  color: var(--star);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  pointer-events: none;
  opacity: 0; /* без анимации («уменьшить движение») «+3» не показываем */
}

/* Текст только для экранного диктора: на экране его нет */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Компас к ближайшей капсуле ===== */
/* Плашка внизу, между ⚙️ и круглыми кнопками справа.
   data-warmth (game.js): холодно → тепло → горячо → рядом */
.capsule-pointer {
  position: absolute;
  z-index: 900;
  left: 76px;
  right: 100px;
  bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 12px;
  border: 3px solid var(--fur);
  border-radius: 999px;
  background: var(--space);
  color: var(--fur);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  box-sizing: border-box;
  pointer-events: none; /* плашка не мешает нажимать на карту */
  box-shadow: 0 5px 0 var(--space-deep);
}
.capsule-pointer.hidden,
body.mode-home .capsule-pointer {
  display: none;
}
.pointer-arrow {
  display: block;
  flex: none;
  width: 26px;
  height: 26px;
}
.pointer-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
/* Рядом стрелка не нужна — капсула прямо тут */
.capsule-pointer[data-warmth="рядом"] .pointer-arrow {
  display: none;
}
/* Тепло: жёлтая рамка */
.capsule-pointer[data-warmth="тепло"] {
  border-color: var(--star);
}
/* Горячо: жёлтая плашка */
.capsule-pointer[data-warmth="горячо"] {
  border-color: var(--fur);
  background: var(--star);
  color: var(--space);
  box-shadow: 0 5px 0 var(--star-deep);
}
/* Рядом: розовая плашка — «нажми на капсулу!» */
.capsule-pointer[data-warmth="рядом"] {
  border-color: var(--fur);
  background: var(--nose);
  color: var(--space);
  box-shadow: 0 5px 0 var(--nose-deep);
}

.round-button {
  position: absolute;
  z-index: 900;
  right: 16px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: 72px;
  height: 72px;
  border: 3px solid var(--fur);
  border-radius: 50%;
  background: var(--star);
  color: var(--space);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

/* Кнопка «Экипаж» — такая же круглая, стоит над кнопкой «Где я?» */
.crew-button {
  bottom: calc(110px + env(safe-area-inset-bottom, 0px));
  background: var(--nose);
  font-size: 14px;
  line-height: 1.1;
}

button:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 3px;
}

/* ===== Значок игрока на карте ===== */
/* MapLibre сам ставит маркер так, чтобы его центр был в точке игрока.
   Важно: не задаём маркерам position и transform — ими MapLibre
   передвигает маркер по карте, и наши правила бы ему помешали. */
.player-dot {
  width: 22px;
  height: 22px;
  border: 4px solid var(--fur);
  border-radius: 50%;
  background: var(--nose);
  box-sizing: border-box;
}

/* Пульсирующее кольцо вокруг игрока */
.player-dot::after {
  content: '';
  position: absolute;
  inset: -10px;
  border: 3px solid var(--nose);
  border-radius: 50%;
  animation: pulse 1.8s ease-out infinite;
}

@keyframes pulse {
  from { transform: scale(0.5); opacity: 1; }
  to   { transform: scale(1.4); opacity: 0; }
}

/* Если в телефоне включено «уменьшить движение» — не пульсируем */
@media (prefers-reduced-motion: reduce) {
  .player-dot::after { animation: none; opacity: 0.5; }
}

/* Круг точности GPS рисует сама карта — его цвет задан в game.js */

/* ===== Капсула с котом на карте ===== */
/* Это кнопка: на неё нажимают, чтобы открыть капсулу */
/* Картинка капсулы — SVG из art.js (capsuleIcon), сама кнопка прозрачная */
.capsule {
  width: 40px;
  height: 54px;
  padding: 0;
  border: none;
  background: none;
  /* свечение вокруг картинки, чтобы капсулу было видно на карте */
  filter: drop-shadow(0 0 6px var(--star));
  cursor: pointer;
  animation: bob 2.4s ease-in-out infinite;
}

/* SVG-картинки на карте (капсула, маяк) заполняют свою кнопку */
.map-icon {
  display: block;
  width: 100%;
  height: 100%;
}

/* Капсула слегка покачивается вверх-вниз.
   Используем свойство translate, а не transform — transform занят MapLibre. */
@keyframes bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -5px; }
}

/* Капсула рядом (ближе 40 м): светится ярче и чуть крупнее — её можно открыть.
   Размер меняем свойством scale, а не transform — transform занят MapLibre. */
.capsule.capsule-near {
  filter: drop-shadow(0 0 6px var(--star)) drop-shadow(0 0 14px var(--nose));
  scale: 1.2;
}

/* Кот смутился: капсула тусклая, серая и не покачивается */
.capsule.capsule-shy {
  opacity: 0.45;
  filter: grayscale(1);
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .capsule { animation: none; }
}

/* ===== Маяк у реального места ===== */
/* Полосатая башенка с кошачьими ушками и огоньком — SVG из art.js
   (beaconIcon). Сама кнопка прозрачная.
   Как и у капсулы, не задаём position и transform — ими двигает MapLibre. */
.beacon {
  width: 36px;
  height: 64px;
  padding: 0;
  border: none;
  background: none;
  filter: drop-shadow(0 0 4px var(--mint));
  cursor: pointer;
  font-family: var(--font);
}

/* Огонёк маяка мигает (в SVG у него класс beacon-light) */
.beacon .beacon-light {
  animation: beacon-blink 1.6s ease-in-out infinite;
}

@keyframes beacon-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* Игрок ближе 40 м: маяк крупнее и светится сильнее */
.beacon.beacon-near {
  scale: 1.2;
  filter: drop-shadow(0 0 6px var(--mint)) drop-shadow(0 0 14px var(--mint));
}

/* Перезарядка: маяк серый и тусклый, огонёк не мигает */
.beacon.beacon-charging {
  filter: grayscale(1);
  opacity: 0.6;
}
.beacon.beacon-charging .beacon-light {
  animation: none;
  opacity: 0.2;
}

/* Таймер перезарядки под маяком */
.beacon-timer {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -26px;
  width: 52px;
  margin-top: 3px;
  border-radius: 8px;
  background: var(--space);
  color: var(--fur);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.beacon-timer:empty {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .beacon .beacon-light { animation: none; }
}

/* ===== Потерявшийся капитан на карте ===== */
/* Круглая кнопка с портретом капитана (SVG из art.js), висит над маяком.
   position и transform не задаём — ими двигает MapLibre. */
.captain {
  width: 62px;
  height: 62px;
  padding: 0;
  border: 4px solid var(--star);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--star), var(--nose));
  box-shadow: 0 0 14px var(--star);
  cursor: pointer;
  animation: bob 2.4s ease-in-out infinite;
}

/* Портрет внутри кнопки капитана обрезаем по кругу */
.captain .portrait {
  display: block;
  width: 100%;
  height: 100%;
  clip-path: circle(50%);
}

/* Корона над капитаном — нарисована рамками, как ушки у логотипа */
.captain::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 50%;
  width: 26px;
  height: 12px;
  margin-left: -13px;
  background: var(--star);
  border: 2px solid var(--fur);
  border-radius: 3px 3px 2px 2px;
  clip-path: polygon(0 100%, 0 0, 25% 55%, 50% 0, 75% 55%, 100% 0, 100% 100%);
}

.captain.captain-near {
  scale: 1.15;
  box-shadow: 0 0 12px var(--star), 0 0 32px var(--star), 0 0 50px var(--nose);
}

/* После проигрыша капитан отдыхает: серый, не качается, виден таймер */
.captain.captain-resting {
  filter: grayscale(1);
  opacity: 0.6;
  box-shadow: none;
  animation: none;
}

.captain-timer {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 52px;
  margin-left: -26px;
  margin-top: 4px;
  border-radius: 8px;
  background: var(--space);
  color: var(--fur);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.captain-timer:empty {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .captain { animation: none; }
}

/* ===== Всплывающая подсказка ===== */
.toast {
  position: absolute;
  z-index: 1350; /* выше окон кухни, ремонта и заботы (1100), чтобы подсказку было видно */
  pointer-events: none; /* подсказка не мешает нажимать кнопки под ней */
  left: 16px;
  right: 16px;
  /* над кнопками «Где я?», «Экипаж» и подписью об авторах карты, чтобы их не закрывать */
  bottom: calc(196px + env(safe-area-inset-bottom, 0px));
  padding: 12px 16px;
  border: 2px solid var(--star);
  border-radius: 16px;
  background: var(--space);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.toast.visible {
  opacity: 1;
  visibility: visible;
}

/* ===== Подпись об авторах карты ===== */
/* Обязательна по условиям OpenFreeMap и OpenStreetMap. Сужаем её,
   чтобы она не залезала под кнопку «Где я?» справа. */
.maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib {
  max-width: calc(100vw - 120px);
  font-size: 11px;
  /* Тёмный текст: иначе подпись берёт светлый цвет страницы (--fur)
     и слова «Data from» не видно на светлом фоне подписи */
  color: #333;
}

/* ===== Окно «Знакомство с котом» ===== */
/* Тёмная подложка на весь экран, поверх карты и строки состояния */
.encounter,
.overlay {
  position: absolute;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(52, 55, 95, 0.88); /* это --space, но полупрозрачный */
  overflow-y: auto; /* на маленьком экране окно можно прокрутить */
  box-sizing: border-box;
}

.encounter.hidden,
.overlay.hidden {
  display: none;
}

/* Сама карточка окна */
.encounter-card,
.overlay-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 100%;
  overflow-y: auto;
  padding: 24px 20px;
  border: 3px solid var(--star);
  border-radius: 28px;
  background: var(--space-2);
  text-align: center;
  box-sizing: border-box;
}

/* Кнопка ✕ в правом верхнем углу. 64×64 — удобно попасть пальцем */
.close-button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--fur);
  font-family: var(--font);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.screen.hidden {
  display: none;
}

.screen-title {
  margin: 8px 56px 12px; /* по бокам место, чтобы заголовок не залез под ✕ */
  color: var(--star);
  font-size: 30px;
  line-height: 1.1;
}

.screen-text {
  margin: 12px 0;
  font-size: 19px;
  line-height: 1.4;
}

.rules {
  font-size: 17px;
}

/* Все большие кнопки — не ниже 64 px */
.big-button {
  min-height: 64px;
}

.encounter .big-button,
.overlay .big-button {
  width: 100%;
  margin-top: 12px;
}

.big-button.hidden {
  display: none;
}

/* Цветной круг с котом */
.cat-circle {
  width: 130px;
  height: 130px;
  margin: 8px auto;
  border: 4px solid var(--fur);
  border-radius: 50%;
  overflow: hidden; /* портрет обрезается по кругу */
}

/* Портрет кота (SVG из art.js) заполняет круг целиком */
.cat-circle .portrait,
.mini-circle .portrait {
  display: block;
  width: 100%;
  height: 100%;
}

/* Фон круга — светлый оттенок цвета скафандра, чтобы скафандр
   был хорошо виден на фоне */
.circle-water     { background: #DCEBF6; } /* водный — голубой */
.circle-forest    { background: #DDF0DA; } /* лесной — зелёный */
.circle-city      { background: #F9EDC9; } /* городской — жёлтый */
.circle-legendary { background: #F8DCE3; } /* легендарный — розовый */
.circle-twilight  { background: linear-gradient(160deg, #E3DAF5, #F9E1D2); } /* сумеречный — закатный */
.circle-captain   { background: linear-gradient(135deg, #F9EDC9, #F8DCE3); } /* капитан — золотой */

/* Кот смутился: круг тёмный, портрет серый и полупрозрачный */
.cat-circle.shy   { background: var(--space); }
.cat-circle.shy .portrait {
  filter: grayscale(1);
  opacity: 0.6;
}

.cat-name {
  margin: 4px 0;
  font-size: 32px;
  font-weight: 800;
}

/* Звёздочки редкости */
.stars {
  margin: 0;
  color: var(--star);
  font-size: 26px;
  letter-spacing: 2px;
}

/* ----- «Поймай сигнал» ----- */
.signal-bar {
  position: relative;
  height: 48px;
  margin: 20px 0 8px;
  border: 3px solid var(--fur);
  border-radius: 24px;
  background: var(--space);
  overflow: hidden;
}

/* Зелёная зона: left и width задаёт encounter.js */
.signal-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--mint);
}

/* Огонёк: left задаёт encounter.js (от 0% до 100%).
   margin-left сдвигает его на половину ширины, чтобы центр огонька
   был ровно в точке, которую считает игра. */
.signal-light {
  position: absolute;
  top: 6px;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  border: 3px solid var(--fur);
  border-radius: 50%;
  background: var(--star);
  box-sizing: border-box;
  box-shadow: 0 0 12px var(--star);
}

.result-text {
  min-height: 1.4em;
  margin: 12px 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}

/* ----- «Лапка, Коготь, Клубок» ----- */
.hint {
  margin: 8px 0;
  padding: 8px 12px;
  border: 2px dashed var(--mint);
  border-radius: 14px;
  font-size: 18px;
}
.hint.hidden {
  display: none;
}

.score {
  margin: 8px 0;
  color: var(--star);
  font-size: 24px;
  font-weight: 800;
}



/* ----- Помощники в бою с капитаном ----- */
.helper-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* Кнопка-кот: нажал — выбран (aria-pressed="true"), нажал снова — нет */
.helper-button {
  min-height: 56px;
  padding: 8px 14px;
  border: 3px solid var(--fur);
  border-radius: 18px;
  background: var(--space);
  color: var(--fur);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.helper-button[aria-pressed="true"] {
  background: var(--mint);
  color: var(--space);
  border-color: var(--star);
}

/* Кнопки «Помоги, <имя>!» после проигранного раунда */
.rps-helpers.hidden,
.screen-text.hidden {
  display: none;
}
.helper-call {
  background: var(--mint);
}
.helper-refuse {
  background: var(--space);
  color: var(--fur);
  border: 3px solid var(--fur);
}

/* ----- «Кот найден!» ----- */
.fact {
  margin: 12px 0;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--space);
  font-size: 18px;
  line-height: 1.4;
  text-align: left;
}
.fact p {
  margin: 4px 0;
}
.fact-title {
  color: var(--mint);
  font-weight: 800;
}

/* ===== Альбом экипажа ===== */
/* Спрятанные части альбома (карточка, подтверждение) */
#album-main.hidden,
#album-launch-confirm.hidden,
#album-cat.hidden,
#album-confirm.hidden {
  display: none;
}

.album-fish {
  margin: 4px 0;
  font-size: 20px;
  font-weight: 700;
}

/* Шкала «Ремонт корабля» */
.repair {
  margin: 8px 0 16px;
}
.repair-text {
  margin: 4px 0;
  font-size: 17px;
}
.repair-bar {
  height: 20px;
  border: 3px solid var(--fur);
  border-radius: 12px;
  background: var(--space);
  overflow: hidden;
}
/* Заполненная часть: ширину в процентах задаёт album.js */
.repair-fill {
  height: 100%;
  width: 0;
  background: var(--mint);
}

/* Сетка котов: 3 клетки в ряд */
.album-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.album-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 120px;
  padding: 8px 4px;
  border: 2px solid var(--fur);
  border-radius: 18px;
  background: var(--space);
  color: var(--fur);
  font-family: var(--font);
  cursor: pointer;
}

/* Ненайденный кот: серый, нажимать не на что */
.album-unknown {
  border-style: dashed;
  opacity: 0.7;
  cursor: default;
}

/* Маленький круг с котом */
.mini-circle {
  width: 60px;
  height: 60px;
  border: 3px solid var(--fur);
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
}
.mini-circle span {
  display: block;
  width: 100%;
  height: 100%;
}

/* Серый силуэт: круг серый, а портрет того же кота — тёмная тень */
.mini-circle.silhouette {
  background: #9A96B4;
}
.mini-circle.silhouette span {
  filter: brightness(0);
  opacity: 0.55;
}
/* У силуэта прячем стекло шлема, иначе вместо кота — тёмный круг */
.mini-circle.silhouette .helmet {
  display: none;
}

/* Маленький портрет в кнопке выбора помощника */
.helper-face {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-right: 6px;
  border-radius: 50%;
  overflow: hidden;
  vertical-align: middle;
  background: var(--space-2);
}
.helper-face .portrait {
  display: block;
  width: 100%;
  height: 100%;
}

.album-name {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
}

.album-stars {
  color: var(--star);
  font-size: 14px;
  letter-spacing: 1px;
}

/* Маленькая кнопка «Начать заново» внизу альбома */
.small-button {
  margin-top: 24px;
  padding: 8px 16px;
  min-height: 44px;
  border: 2px solid var(--fur);
  border-radius: 999px;
  background: transparent;
  color: var(--fur);
  font-family: var(--font);
  font-size: 15px;
  cursor: pointer;
}

/* Кнопка «Да, начать заново» — другого цвета, чтобы не нажать случайно */
.danger-button {
  background: var(--space);
  color: var(--fur);
  border: 3px solid var(--nose);
}

/* Заголовок альбома чуть меньше, чтобы «Экипаж: N из M» влезал в строку */
.album-title {
  font-size: 26px;
}

/* Подзаголовок «Капитаны» в альбоме */
.album-subtitle {
  margin: 20px 0 10px;
  color: var(--star);
  font-size: 22px;
}

/* ===== Анимации в окне знакомства ===== */
/* Кот на экране «Кот рядом!» слегка покачивается.
   Внутри окна transform можно — это не маркер карты. */
.cat-circle.sway .portrait {
  transform-origin: 50% 90%;
  animation: sway 3s ease-in-out infinite;
}

@keyframes sway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

/* Победа: круг с котом и звёздочки вокруг */
.celebrate {
  position: relative;
  width: 138px;
  margin: 0 auto;
}

/* Кот подпрыгивает (два раза) */
.celebrate-go .cat-circle {
  animation: jump 0.7s ease-out 2;
}

@keyframes jump {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-22px) scale(1.05); }
  70%      { transform: translateY(0) scale(0.97); }
}

/* Звёздочки: сначала спрятаны в центре круга */
.celebrate-star {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -14px 0 0 -10px;
  color: var(--star);
  font-size: 26px;
  opacity: 0;
  pointer-events: none;
}

/* …и разлетаются в разные стороны. --x и --y — куда летит звезда */
.celebrate-go .celebrate-star {
  animation: star-burst 1.1s ease-out forwards;
}
.celebrate-star:nth-of-type(1) { --x: -95px; --y: -40px; }
.celebrate-star:nth-of-type(2) { --x: 95px;  --y: -40px; }
.celebrate-star:nth-of-type(3) { --x: -80px; --y: 45px; }
.celebrate-star:nth-of-type(4) { --x: 80px;  --y: 45px; }
.celebrate-star:nth-of-type(5) { --x: -30px; --y: -85px; }
.celebrate-star:nth-of-type(6) { --x: 30px;  --y: -85px; }

@keyframes star-burst {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.3); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.2); }
}

/* «Уменьшить движение» — без покачивания, прыжков и звёздочек */
@media (prefers-reduced-motion: reduce) {
  .cat-circle.sway .portrait,
  .celebrate-go .cat-circle,
  .celebrate-go .celebrate-star {
    animation: none;
  }
}

/* ===== Кнопка «Настройки» ===== */
/* Маленькая, слева внизу — над подписью об авторах карты */
.settings-button {
  position: absolute;
  z-index: 900;
  left: 12px;
  bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  width: 52px;
  height: 52px;
  border: 3px solid var(--fur);
  border-radius: 50%;
  background: var(--space);
  color: var(--fur);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

/* ===== Окно «Настройки» ===== */
/* Выше всех окон и выше экрана «На сегодня всё!» */
.overlay.settings {
  z-index: 1600;
}

#settings-main.hidden,
#settings-lock.hidden,
#settings-adult.hidden,
#settings-gps.hidden,
.small-text.hidden,
.small-button.hidden {
  display: none;
}

/* Переключатель: «нажатая» кнопка (включено) — мятная */
.toggle-button[aria-pressed="false"] {
  background: var(--space);
  color: var(--fur);
  border: 3px solid var(--fur);
}
.toggle-button[aria-pressed="true"] {
  background: var(--mint);
}

.small-text {
  font-size: 16px;
}

/* Родительский замок: крупный пример и поле для ответа */
.lock-question {
  margin: 8px 0;
  color: var(--star);
  font-size: 36px;
  font-weight: 800;
}
.lock-input {
  width: 160px;
  min-height: 56px;
  border: 3px solid var(--fur);
  border-radius: 16px;
  background: var(--space);
  color: var(--fur);
  font-family: var(--font);
  font-size: 30px;
  text-align: center;
}
.lock-input:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 3px;
}

/* Кнопки выбора ограничения времени */
.limit-buttons {
  display: flex;
  gap: 8px;
}
.limit-button {
  flex: 1;
  min-height: 56px;
  border: 3px solid var(--fur);
  border-radius: 16px;
  background: var(--space);
  color: var(--fur);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.limit-button[aria-pressed="true"] {
  background: var(--mint);
  color: var(--space);
  border-color: var(--star);
}

.data-info {
  font-size: 16px;
}

/* ===== Экран «На сегодня всё!» ===== */
/* Поверх всей игры (карты, окон), но под окном настроек */
.time-up {
  position: absolute;
  inset: 0;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: var(--space);
}
.time-up.hidden {
  display: none;
}

/* ===== Стартовый экран: две кнопки ===== */
.start-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
}
.start-buttons .big-button.hidden {
  display: none;
}
.home-start {
  background: var(--mint);
}
.home-only-note {
  margin: 0;
  font-size: 16px;
}
.home-only-note.hidden {
  display: none;
}

/* ===== Режим «Дом» ===== */
/* Убежище закрывает место карты; строка состояния и кнопки — поверх */
.home {
  position: absolute;
  inset: 0;
  z-index: 800;
  overflow: hidden;
  background: var(--space-2);
}
.home.hidden {
  display: none;
}

/* Картинка отсека растягивается на весь экран */
.home-scene,
.home-cats {
  position: absolute;
  inset: 0;
}
.shelter-scene {
  display: block;
  width: 100%;
  height: 100%;
}

/* Кот в убежище: круг с портретом и имя. left и top задаёт home.js,
   а translate ставит кнопку центром в эту точку (это не маркер карты,
   поэтому так можно). */
.home-cat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 84px;
  padding: 0;
  border: none;
  background: none;
  color: var(--fur);
  font-family: var(--font);
  translate: -50% -50%;
  cursor: pointer;
}
.home-cat-circle {
  display: block;
  width: 70px;
  height: 70px;
  border: 3px solid var(--fur);
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
}
.home-cat-circle .portrait {
  display: block;
  width: 100%;
  height: 100%;
}
.home-cat-name {
  margin-top: 2px;
  padding: 0 8px;
  border-radius: 10px;
  background: var(--space);
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis; /* слишком длинное имя обрезается «…» */
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  box-sizing: border-box;
}

/* Гость: светится и покачивается, подпись «Гость!» жёлтая */
.home-guest .home-cat-circle {
  border-color: var(--star);
  box-shadow: 0 0 16px var(--star);
  animation: bob 2.4s ease-in-out infinite;
}
.home-guest .home-cat-name {
  color: var(--space);
  background: var(--star);
}
@media (prefers-reduced-motion: reduce) {
  .home-guest .home-cat-circle { animation: none; }
}

.home-empty {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 60%;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--space);
  font-size: 18px;
  text-align: center;
}
.home-empty.hidden {
  display: none;
}

/* Дома нет карты: кнопка «Где я?» не нужна, а «Экипаж» и ⚙️
   опускаются ниже — на их место */
body.mode-home #center-button {
  display: none;
}
body.mode-home .crew-button {
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
body.mode-home .settings-button {
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
body.mode-home .toast {
  bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}

/* Сердечки дружбы */
.hearts {
  margin: 0;
  color: var(--nose);
  font-size: 28px;
  letter-spacing: 3px;
}
.album-hearts {
  color: var(--nose);
  font-size: 13px;
  letter-spacing: 1px;
}

/* ===== Ежедневные задания (в альбоме) ===== */
.quests {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  text-align: left;
}
.quest {
  margin: 6px 0;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--space);
  font-size: 16px;
  line-height: 1.35;
}
.quest-done {
  opacity: 0.7;
}

/* ===== Окно «Как разрешить геолокацию» ===== */
/* Выше окон игры, но ниже настроек */
.overlay.gps-help {
  z-index: 1550;
}
.help-steps {
  font-size: 15px;
}

/* Отчёт «Проверка GPS»: моноширинный шрифт, строки переносятся */
.gps-report {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--space);
  color: var(--fur);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  white-space: pre-wrap;   /* длинные строки переносятся */
  word-break: break-word;
  user-select: text;       /* текст можно выделить и скопировать пальцем */
  -webkit-user-select: text;
}

/* ===== Финал главы: кнопка «Запустить корабль» ===== */
.launch-button {
  background: var(--star);
}
.launch-button.hidden {
  display: none;
}
.album-badges {
  margin: 8px 0;
  color: var(--star);
  font-size: 18px;
  font-weight: 700;
}
.album-badges.hidden {
  display: none;
}

/* ===== Сцена взлёта ===== */
/* Поверх всего, кроме настроек */
.launch {
  position: absolute;
  inset: 0;
  z-index: 1400;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--space);
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
}
.launch.hidden,
.launch-text.hidden,
.launch .big-button.hidden,
.launch .small-button.hidden {
  display: none;
}
.launch-scene {
  flex: 1;
  width: 100%;
  min-height: 0;
}
.launch-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.launch-text {
  flex: none;
}
.launch-badge {
  color: var(--star);
  font-size: 20px;
  font-weight: 800;
}
.launch-next {
  width: 100%;
  max-width: 360px;
}
.launch-skip {
  margin-top: 8px;
}

/* Внутри картинки двигаем части корабля свойством transform —
   это SVG, а не маркер карты, поэтому так можно */
.launch-ship,
.launch-paw,
.launch-flame {
  transform-box: fill-box;
}
.launch-flame {
  transform-origin: 50% 0;
  opacity: 0;
}
/* Лапка машет, поворачиваясь вокруг своего низа («запястья») */
.launch-paw {
  transform-origin: 50% 100%;
}

/* Анимация идёт, пока у окна класс launch-go:
   0–1,8 с — корабль трясётся и пламя разгорается, лапки машут;
   1,8–5,8 с — корабль улетает вверх; текст появляется в конце */
.launch-go .launch-ship {
  animation: launch-shake 0.12s linear 15, launch-fly 4s ease-in 1.8s forwards;
}
.launch-go .launch-flame {
  animation: launch-flame 0.2s ease-in-out infinite alternate;
}
.launch-go .launch-paw {
  animation: launch-wave 0.5s ease-in-out infinite alternate;
}
.launch-go .launch-text {
  opacity: 0;
  animation: launch-text 1s ease-out 4.5s forwards;
}

/* После сцены (или «Пропустить»): корабль улетел, текст виден */
.launch-done .launch-ship {
  transform: translateY(-120%);
}

@keyframes launch-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}
@keyframes launch-fly {
  from { transform: translateY(0); }
  to   { transform: translateY(-120%); }
}
@keyframes launch-flame {
  from { opacity: 0.7; transform: scaleY(0.8); }
  to   { opacity: 1;   transform: scaleY(1.3); }
}
@keyframes launch-wave {
  from { transform: rotate(-25deg); }
  to   { transform: rotate(25deg); }
}
@keyframes launch-text {
  to { opacity: 1; }
}

/* «Уменьшить движение»: корабль стоит на месте, всё без анимации */
@media (prefers-reduced-motion: reduce) {
  .launch-go .launch-ship,
  .launch-go .launch-flame,
  .launch-go .launch-paw,
  .launch-go .launch-text {
    animation: none;
    opacity: 1;
  }
  .launch-done .launch-ship {
    transform: none;
  }
}

/* ===== Главы в альбоме ===== */
.album-tabs {
  display: flex;
  gap: 8px;
  margin: 0 56px 8px 0; /* справа место для кнопки ✕ */
}
.album-tabs.hidden,
.album-tab.hidden {
  display: none;
}
.album-tab {
  flex: 1;
  min-height: 48px;
  border: 3px solid var(--fur);
  border-radius: 16px;
  background: var(--space);
  color: var(--fur);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.album-tab[aria-pressed="true"] {
  background: var(--star);
  color: var(--space);
  border-color: var(--star);
}
/* Подпись в клетке: «Вернулся домой», «Нашёлся!» */
.album-note {
  color: var(--mint);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

/* Помощник «на связи по рации» */
.helper-radio {
  display: block;
  color: var(--mint);
  font-size: 13px;
  font-weight: 700;
}

/* Убежище: «Ещё N — в альбоме» */
.home-more {
  position: absolute;
  left: 50%;
  top: 88%;
  margin: 0;
  padding: 4px 12px;
  border-radius: 12px;
  background: var(--space);
  font-size: 14px;
  translate: -50% 0;
  white-space: nowrap;
}
.home-more.hidden {
  display: none;
}

/* ===== Обучение «Как играть» ===== */
/* Поверх стартового экрана и игры, но под настройками */
.tutorial {
  position: absolute;
  inset: 0;
  z-index: 1450;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--space);
  text-align: center;
  box-sizing: border-box;
}
.tutorial.hidden,
.tutorial .small-button.hidden {
  display: none;
}
.tutorial-picture {
  width: 100%;
  max-width: 420px;
}
.tutorial-svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Крупный текст — чтобы легко читалось */
.tutorial-text {
  max-width: 30ch;
  margin: 4px 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
}
.tutorial-text.tutorial-safety {
  padding: 10px 14px;
  border: 2px dashed var(--mint);
  border-radius: 18px;
}
.tutorial-count {
  margin: 0;
  color: var(--star);
  font-size: 16px;
}
.tutorial-next {
  width: 100%;
  max-width: 360px;
}

/* Подсказка новичку в мини-игре */
.tip {
  margin: 8px 0;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--star);
  color: var(--space);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}
.tip.hidden {
  display: none;
}

/* ===== Мини-игры ===== */
.game-area {
  margin: 8px 0;
}
.game-hud {
  margin: 4px 0 8px;
  color: var(--star);
  font-size: 18px;
  font-weight: 800;
}
/* Плашка с правилами при первом знакомстве с игрой */
.game-rules {
  padding: 14px 16px;
  border: 2px dashed var(--mint);
  border-radius: 18px;
  font-size: 18px;
  line-height: 1.4;
}
.game-rules-title {
  margin: 0 0 6px;
  color: var(--star);
  font-weight: 800;
}
/* Поле игры. touch-action: none — чтобы палец двигал корзинку,
   а не прокручивал страницу */
.game-field {
  position: relative;
  height: 340px;
  border: 3px solid var(--fur);
  border-radius: 20px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.sprite {
  display: block;
  width: 100%;
  height: 100%;
}

/* «Поймай рыбок»: голубая «вода» */
.fish-field {
  background: linear-gradient(#DCEBF6, #A9C8E6);
}
.fish-item {
  position: absolute;
  top: 0;
  width: 40px;
  height: 30px;
  margin-left: -20px; /* центр предмета — в его точке */
  pointer-events: none;
}
.fish-basket {
  position: absolute;
  bottom: 6px;
  height: 44px;
  translate: -50% 0; /* центр корзинки — в её точке */
  pointer-events: none;
}

/* «Повтори узор»: 4 светлячка в сетке 2×2 */
.pattern-field {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 18px;
  background: #3E5A55;
  box-sizing: border-box;
}
.firefly {
  border: 3px solid transparent;
  border-radius: 24px;
  background: rgba(250, 247, 242, 0.08);
  cursor: pointer;
}
.firefly .firefly-glow {
  opacity: 0.35;
}
/* Светлячок горит: брюшко ярче, вокруг свечение */
.firefly.lit {
  border-color: var(--star);
  box-shadow: 0 0 22px var(--star);
}
.firefly.lit .firefly-glow {
  opacity: 1;
}

/* «Ритм»: круг в центре и сжимающееся кольцо */
.rhythm-field {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4A4E7E;
}
.rhythm-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1; /* всегда круг, а не овал */
  border: 6px solid var(--mint);
  border-radius: 50%;
  translate: -50% -50%;
  box-sizing: border-box;
  pointer-events: none;
}
.rhythm-target {
  width: 30%;
  aspect-ratio: 1;
  border: 4px solid var(--fur);
  border-radius: 50%;
  background: var(--nose);
  color: var(--space);
  font-family: var(--font);
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
}
.rhythm-target.hit {
  background: var(--mint);
}

/* «Созвездие»: ночное небо и звёзды с номерами */
.stars-field {
  background: #2A2C4C;
}
.constellation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.star-button {
  position: absolute;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px; /* центр звезды — в её точке */
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.star-number {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--space);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 800;
}
.star-button.done {
  filter: drop-shadow(0 0 8px var(--star));
}

/* Чем поможет помощник (в выборе помощников против капитана) */
.helper-help {
  display: block;
  color: var(--star);
  font-size: 13px;
  font-weight: 700;
}
/* У выбранного помощника фон мятный — подписи делаем тёмными, чтобы читались */
.helper-button[aria-pressed="true"] .helper-help,
.helper-button[aria-pressed="true"] .helper-radio {
  color: var(--space);
}

/* ===== Кладовая (в альбоме) ===== */
.pantry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
  text-align: left;
}
.pantry-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 14px;
  background: var(--space);
  font-size: 15px;
  font-weight: 700;
}
.pantry-empty {
  opacity: 0.6;
}
.pantry-icon {
  flex: none;
  width: 36px;
  height: 36px;
}
.pantry-note {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 14px;
}

/* ===== Занятия дома: панель кнопок внизу убежища ===== */
.home-bar {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 8px;
}
.home-bar-button {
  flex: 1;
  min-width: 0;
  min-height: 72px;
  padding: 6px 0;
  border: 3px solid var(--fur);
  border-radius: 18px;
  background: var(--space);
  color: var(--fur);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
/* Дома нижние углы заняты панелью — «Экипаж» и ⚙️ переезжают наверх */
body.mode-home .crew-button {
  top: calc(64px + env(safe-area-inset-top, 0px));
  bottom: auto;
}
body.mode-home .settings-button {
  top: calc(70px + env(safe-area-inset-top, 0px));
  bottom: auto;
}
body.mode-home .toast {
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

/* ===== Угощения в карточке кота ===== */
.care-treats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
}
.care-treat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 6px 12px;
  border: 3px solid var(--fur);
  border-radius: 16px;
  background: var(--space);
  color: var(--fur);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.care-treat-favorite {
  border-color: var(--nose);
}
.care-treat-icon {
  flex: none;
  width: 40px;
  height: 40px;
}

/* ===== Кошачья кухня ===== */
#kitchen-list.hidden,
#kitchen-cook.hidden,
#kitchen-back.hidden {
  display: none;
}
.recipe {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 18px;
  background: var(--space);
  text-align: left;
}
.recipe-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
}
.recipe-icon {
  flex: none;
  width: 48px;
  height: 48px;
}
.recipe-needs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  font-size: 15px;
}
.recipe-need {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 2px;
  border-radius: 12px;
  background: var(--space-2);
}
.recipe-need.missing {
  border: 2px dashed var(--nose);
}
.recipe-need .pantry-icon {
  width: 28px;
  height: 28px;
}
.recipe .big-button {
  min-height: 52px;
  margin-top: 4px;
  font-size: 18px;
}
.recipe .big-button:disabled {
  opacity: 0.45;
  cursor: default;
}
.kitchen-area {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 260px;
  margin: 8px 0;
}
.kitchen-bowl {
  width: 240px;
  height: 240px;
  touch-action: none; /* палец мешает тесто, а не прокручивает страницу */
  user-select: none;
  -webkit-user-select: none;
}
.kitchen-dough {
  width: 150px;
  height: 150px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: scale 0.15s;
}
.kitchen-oven {
  width: 220px;
  height: 200px;
}
/* Духовка «печёт»: окошко мягко светится */
.kitchen-oven .oven-light {
  opacity: 0.6;
}
.kitchen-oven.baking .oven-light {
  animation: oven-glow 1.6s ease-in-out infinite alternate;
}
@keyframes oven-glow {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .kitchen-oven.baking .oven-light { animation: none; opacity: 0.9; }
  .kitchen-dough { transition: none; }
}
.kitchen-done {
  width: 120px;
  height: 120px;
}

/* ===== Ремонт корабля ===== */
#repair-main.hidden,
#repair-puzzle-view.hidden {
  display: none;
}
.repair-ship {
  width: 150px;
  height: 180px;
  margin: 0 auto;
}
#repair-install:disabled {
  opacity: 0.45;
  cursor: default;
}
.repair-puzzle {
  display: grid;
  gap: 6px;
  width: fit-content;
  margin: 12px auto;
  transition: gap 0.3s;
}
/* Пазл собран — щели между кусочками исчезают, картинка целая */
.repair-puzzle.solved {
  gap: 0;
}
.puzzle-piece {
  width: min(96px, 26vw);
  height: min(96px, 26vw);
  padding: 0;
  border: none;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  overflow: hidden;
  transition: rotate 0.2s ease-out;
}
.repair-puzzle.solved .puzzle-piece {
  border-radius: 0;
}
.puzzle-piece svg {
  display: block;
  width: 100%;
  height: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .puzzle-piece,
  .repair-puzzle { transition: none; }
}

/* ===== Игры с котами ===== */
#play-pick.hidden,
#play-choose.hidden,
#play-game.hidden,
#play-end.hidden {
  display: none;
}
.play-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 8px 0;
}
.play-cat-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 120px;
  padding: 8px 4px;
  border: 3px solid var(--fur);
  border-radius: 18px;
  background: var(--space);
  color: var(--fur);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.play-cat-button .mini-circle {
  width: 64px;
  height: 64px;
}
.play-cat-mark {
  color: var(--star);
  font-size: 14px;
}
.play-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 80px;
  margin: 8px 0;
  padding: 8px 14px;
  border: 3px solid var(--fur);
  border-radius: 20px;
  background: var(--space);
  color: var(--fur);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.play-choice b {
  color: var(--star);
  font-size: 19px;
}
.play-choice-icon {
  flex: none;
  width: 52px;
  height: 52px;
}
.play-field {
  height: 380px;
  background: var(--space);
}
/* Кот, точка и мячик ставятся по центру своей точки (translate, не transform) */
.play-pet,
.play-dot,
.play-toy {
  position: absolute;
  translate: -50% -50%;
  pointer-events: none;
}
.play-pet {
  width: 72px;
  height: 72px;
  border: 3px solid var(--fur);
  border-radius: 50%;
  overflow: hidden;
}
.play-pet .portrait {
  display: block;
  width: 100%;
  height: 100%;
}
.play-dot {
  width: 40px;
  height: 40px;
}
.play-toy {
  width: 36px;
  height: 36px;
}
.play-tip {
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  margin: 0;
  color: var(--fur);
  font-size: 17px;
  font-weight: 700;
  pointer-events: none;
}
/* Кот поймал — маленький прыжок */
.play-pet.play-hop {
  animation: play-hop 0.35s ease-out;
}
@keyframes play-hop {
  50% { scale: 1.18; }
}
@media (prefers-reduced-motion: reduce) {
  .play-pet.play-hop { animation: none; }
}

/* ===== Обстановка убежища ===== */
.home-decor {
  position: absolute;
  inset: 0;
  pointer-events: none; /* в обычном режиме нажатия проходят к котам */
}
.decor-place {
  position: absolute;
  translate: -50% -50%;
  padding: 0;
  border: none;
  background: none;
}
.decor-place .sprite {
  display: block;
  width: 100%;
  height: 100%;
}
/* Режим расстановки: места — пунктирные кружки, коты бледнеют */
.decor-editing .home-decor {
  z-index: 2;
  pointer-events: auto;
}
.decor-editing .home-cats {
  opacity: 0.3;
  pointer-events: none;
}
.decor-editing .home-bar {
  display: none;
}
.decor-slot {
  border: 3px dashed var(--star);
  border-radius: 50%;
  background: rgba(52, 55, 95, 0.55);
  cursor: pointer;
}
.decor-slot.decor-empty::after {
  content: '+';
  color: var(--star);
  font-size: 30px;
  font-weight: 800;
}
.decor-edit-bar {
  position: absolute;
  z-index: 3;
  left: 8px;
  right: 8px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  padding: 10px 12px;
  border: 3px solid var(--star);
  border-radius: 20px;
  background: var(--space);
  color: var(--fur);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
.decor-edit-bar.hidden {
  display: none;
}
.decor-edit-bar p {
  margin: 0 0 8px;
}
.decor-edit-buttons {
  display: flex;
  gap: 8px;
}
.decor-edit-buttons .big-button {
  flex: 1;
  margin: 0;
}
.decor-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.decor-card,
.decor-pick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 6px 10px;
  border-radius: 18px;
  background: var(--space);
  color: var(--fur);
  text-align: left;
}
.decor-pick-item {
  border: 3px solid var(--fur);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.decor-card-icon {
  flex: none;
  width: 56px;
  height: 56px;
}
.decor-card-icon .sprite {
  display: block;
  width: 100%;
  height: 100%;
}
.decor-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 17px;
}
.decor-card-note {
  color: var(--mint);
  font-size: 14px;
  font-weight: 700;
}
.decor-buy {
  flex: none;
  min-width: 80px;
  min-height: 52px;
  border: none;
  border-radius: 16px;
  background: var(--nose);
  color: var(--space);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}
/* Не хватает рыбок — кнопка бледнее (нажать можно: подскажет, где их взять) */
.decor-buy-cant {
  opacity: 0.55;
}
.decor-buy:disabled {
  background: var(--mint);
  cursor: default;
}
#decor-arrange:disabled {
  opacity: 0.45;
  cursor: default;
}

/* =============================================================
   ===== Объём и анимации: стиль «наклейки» =====
   =============================================================
   Идея: кнопки, окна и круги с котами похожи на толстые наклейки
   из альбома. Снизу у них тёмная «кромка» (тень без размытия),
   а при нажатии кнопка проседает вниз — как настоящая.

   Правила этого раздела:
   • фон кнопок и окон остаётся сплошным цветом — так проверка
     контраста в tools/smoke.js по-прежнему видит фон под текстом;
     украшения рисуем в ::before / ::after, где нет текста;
   • маркеры карты (игрок, капсула, маяк, капитан) здесь не трогаем:
     их transform занят MapLibre;
   • всё, что двигается само или плавно, — только внутри
     @media (prefers-reduced-motion: no-preference). Если в телефоне
     включено «уменьшить движение», остаются только цвета и тени. */

/* Тёмные оттенки для кромок наклеек */
:root {
  --space-deep: #23264A; /* кромка тёмных кнопок и тень окон */
  --nose-deep: #CC7F93;  /* кромка розовых кнопок */
  --star-deep: #C9A65A;  /* кромка жёлтых кнопок */
  --mint-deep: #69AA98;  /* кромка мятных кнопок */
  /* «Пружинка»: движение чуть перелетает цель и возвращается */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ----- Кнопки-наклейки -----
   --edge — цвет кромки. Каждый вид кнопки задаёт свой (ниже). */
.big-button,
.round-button,
.settings-button,
.home-bar-button,
.limit-button,
.helper-button,
.album-tab,
.album-cell,
.care-treat,
.play-choice {
  --edge: var(--space-deep);
  box-shadow: 0 5px 0 var(--edge);
}

/* Цвет кромки под цвет кнопки. Порядок важен: правило ниже
   побеждает правило выше, если у кнопки оба класса. */
.big-button                              { --edge: var(--nose-deep); }
.round-button                            { --edge: var(--star-deep); }
.crew-button                             { --edge: var(--nose-deep); }
.home-start,
.helper-call                             { --edge: var(--mint-deep); }
.launch-button                           { --edge: var(--star-deep); }
.toggle-button[aria-pressed="false"],
.danger-button,
.helper-refuse                           { --edge: var(--space-deep); }
.toggle-button[aria-pressed="true"],
.limit-button[aria-pressed="true"],
.helper-button[aria-pressed="true"]      { --edge: var(--mint-deep); }
.album-tab[aria-pressed="true"]          { --edge: var(--star-deep); }

/* Нажатие: кнопка опускается на высоту кромки, кромка «прячется».
   translate — отдельное свойство, оно не мешает другим трансформациям. */
.big-button:active:not(:disabled),
.round-button:active,
.settings-button:active,
.home-bar-button:active,
.limit-button:active,
.helper-button:active,
.album-tab:active,
.album-cell:not(.album-unknown):active,
.care-treat:active,
.play-choice:active {
  translate: 0 4px;
  box-shadow: 0 1px 0 var(--edge);
}

/* Неактивная кнопка (не хватает ингредиентов и т. п.) — плоская */
.big-button:disabled {
  box-shadow: none;
}

/* Кнопка ✕: при нажатии — светлый кружок под пальцем */
.close-button:active {
  background: rgba(250, 247, 242, 0.14);
}

/* ----- Окна-карточки ----- */
/* Тёмная кромка снизу и тонкий блик сверху внутри рамки.
   Только чёткие тени, без размытия: размытую тень браузер перерисовывает
   каждый раз, когда внутри окна что-то движется (огонёк, мини-игры), —
   на слабом телефоне от этого всё начинает тормозить. */
.encounter-card,
.overlay-card {
  box-shadow:
    inset 0 2px 0 rgba(250, 247, 242, 0.1),
    0 10px 0 var(--space-deep);
}

/* Заголовки окон «выдавлены» — тёмная тень снизу */
.screen-title {
  text-shadow: 0 3px 0 var(--space-deep);
}

/* Строка состояния на карте — тоже наклейка */
.status {
  box-shadow: 0 4px 0 var(--space-deep);
}

/* Круг с котом: полупрозрачное кольцо вокруг белой рамки и кромка снизу */
.cat-circle {
  box-shadow:
    0 0 0 6px rgba(250, 247, 242, 0.14),
    0 9px 0 6px var(--space-deep);
  margin-bottom: 20px; /* место под кромку, чтобы она не касалась имени */
}
.mini-circle,
.home-cat-circle {
  box-shadow: 0 4px 0 var(--space-deep);
}

/* Шкалы (ремонт, время игры, готовка): блик сверху и мягкие полоски */
.repair-fill {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%),
    repeating-linear-gradient(-45deg,
      rgba(255, 255, 255, 0.16) 0 8px, rgba(255, 255, 255, 0) 8px 16px);
}

/* ----- Логотип-наклейка ----- */
/* Тёмная обводка из теней со всех сторон и толстая кромка снизу */
.logo {
  text-shadow:
    -3px -3px 0 var(--space-deep), 3px -3px 0 var(--space-deep),
    -3px 3px 0 var(--space-deep), 3px 3px 0 var(--space-deep),
    0 8px 0 var(--space-deep),
    0 14px 24px rgba(15, 16, 40, 0.5);
}
.logo::before,
.logo::after {
  transform-origin: 50% 100%; /* ушко качается от основания */
}

/* ----- Звёздное небо стартового экрана -----
   Звёзды — маленькие круглые градиенты в псевдоэлементах, узор
   повторяется плиткой. Текста в них нет. */
.start-screen {
  overflow: hidden;
  isolation: isolate; /* звёзды (z-index: -1) остаются позади текста */
}
.start-screen::before,
.start-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: repeat;
}
/* Мелкие звёзды */
.start-screen::before {
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, var(--fur), transparent),
    radial-gradient(1.5px 1.5px at 90px 110px, var(--fur), transparent),
    radial-gradient(1px 1px at 150px 60px, var(--fur), transparent),
    radial-gradient(1.5px 1.5px at 60px 170px, var(--star), transparent),
    radial-gradient(1px 1px at 170px 150px, var(--fur), transparent);
  background-size: 200px 200px;
  opacity: 0.7;
}
/* Крупные цветные звёзды */
.start-screen::after {
  background-image:
    radial-gradient(2.5px 2.5px at 50px 80px, var(--star), transparent),
    radial-gradient(2px 2px at 230px 40px, var(--fur), transparent),
    radial-gradient(3px 3px at 300px 230px, var(--nose), transparent),
    radial-gradient(2px 2px at 140px 260px, var(--mint), transparent);
  background-size: 340px 320px;
  opacity: 0.9;
}

/* ----- Победа: звёздные лучи за котом -----
   Лучи — конический градиент в ::before, позади круга с котом.
   isolation не даёт лучам (z-index: -1) уйти под карточку окна. */
#win-celebrate {
  isolation: isolate;
}
#win-celebrate::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    rgba(245, 216, 142, 0.32) 0 9deg,
    rgba(245, 216, 142, 0) 9deg 24deg);
  /* края лучей растворяются */
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  pointer-events: none;
}

/* =============================================================
   Движение — только если «уменьшить движение» выключено
   ============================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* Кнопки проседают и поднимаются плавно */
  .big-button,
  .round-button,
  .settings-button,
  .home-bar-button,
  .limit-button,
  .helper-button,
  .album-tab,
  .album-cell,
  .care-treat,
  .play-choice {
    transition: translate 0.08s ease-out, box-shadow 0.08s ease-out,
      background-color 0.2s;
  }

  /* Окно появляется: подложка проявляется, карточка выпрыгивает.
     Анимация срабатывает каждый раз, когда окну снимают класс hidden
     (display: none → flex запускает её заново). */
  .overlay:not(.hidden),
  .encounter:not(.hidden) {
    animation: fade-in 0.2s ease-out;
  }
  .overlay:not(.hidden) > .overlay-card,
  .encounter:not(.hidden) > .encounter-card {
    animation: card-pop 0.42s var(--spring);
  }

  /* Смена экрана внутри окна — мягкое проявление. Только прозрачность,
     без сдвига: мини-игры меряют, где стоят их элементы. */
  .screen:not(.hidden),
  #album-main:not(.hidden), #album-cat:not(.hidden),
  #album-confirm:not(.hidden), #album-launch-confirm:not(.hidden),
  #settings-main:not(.hidden), #settings-lock:not(.hidden),
  #settings-adult:not(.hidden), #settings-gps:not(.hidden),
  #kitchen-list:not(.hidden), #kitchen-cook:not(.hidden),
  #repair-main:not(.hidden), #repair-puzzle-view:not(.hidden),
  #play-pick:not(.hidden), #play-choose:not(.hidden),
  #play-game:not(.hidden), #play-end:not(.hidden) {
    animation: fade-in 0.25s ease-out;
  }

  /* Подсказка выезжает снизу с пружинкой */
  .toast {
    translate: 0 16px;
    scale: 0.96;
    transition: opacity 0.2s, visibility 0.2s,
      translate 0.35s var(--spring), scale 0.35s var(--spring);
  }
  .toast.visible {
    translate: 0 0;
    scale: 1;
  }

  /* Шкалы заполняются плавно, а не прыжком */
  .repair-fill {
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Стартовый экран: всё появляется по очереди, один раз */
  .start-screen:not(.hidden) .logo {
    animation: logo-drop 0.7s var(--spring) both;
  }
  .start-screen:not(.hidden) .logo::before {
    animation: ear-twitch 6s ease-in-out 1.2s infinite;
  }
  .start-screen:not(.hidden) .logo::after {
    animation: ear-twitch 6s ease-in-out 1.35s infinite;
  }
  .start-screen:not(.hidden) .story,
  .start-screen:not(.hidden) .safety,
  .start-screen:not(.hidden) .start-buttons {
    animation: rise-in 0.5s ease-out both;
  }
  .start-screen:not(.hidden) .story         { animation-delay: 0.25s; }
  .start-screen:not(.hidden) .safety        { animation-delay: 0.4s; }
  .start-screen:not(.hidden) .start-buttons { animation-delay: 0.55s; }

  /* Звёзды мерцают: два слоя гаснут и вспыхивают не в такт */
  .start-screen::before { animation: twinkle 3.2s ease-in-out infinite alternate; }
  .start-screen::after  { animation: twinkle 4.5s ease-in-out 1s infinite alternate; }

  /* Обучение: новая картинка проявляется (класс ставит tutorial.js) */
  .tutorial-picture.page-in {
    animation: rise-in 0.35s ease-out;
  }

  /* Победа: кот «шлёпается» в кадр, как наклейка, потом прыгает */
  .celebrate-go .cat-circle {
    animation:
      sticker-slap 0.5s var(--spring),
      jump 0.7s ease-out 0.5s 2;
  }
  /* Лучи раскрываются, плавно поворачиваются и останавливаются.
     Один раз, а не бесконечно: вечное вращение нагружает слабые телефоны. */
  #win-celebrate.celebrate-go::before {
    animation:
      rays-open 0.6s ease-out,
      rays-spin 5s cubic-bezier(0.22, 1, 0.36, 1) 0.6s 1 forwards;
  }

  /* Кот смутился: короткая дрожь, один раз */
  .screen:not(.hidden) .cat-circle.shy {
    animation: shiver 0.5s ease-in-out 0.15s;
  }

  /* Кот в убежище при нажатии чуть сжимается.
     scale, а не transform: translate у него уже занят (центровка). */
  .home-cat {
    transition: scale 0.12s ease-out;
  }
  .home-cat:active {
    scale: 0.92;
  }
}

/* ----- Ключевые кадры ----- */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Окно выпрыгивает снизу */
@keyframes card-pop {
  from { opacity: 0; transform: translateY(24px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

/* Появление с небольшим подъёмом */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Логотип падает сверху и пружинит, чуть сплющиваясь */
@keyframes logo-drop {
  0%   { opacity: 0; transform: translateY(-40px) scale(0.8); }
  60%  { opacity: 1; transform: translateY(4px) scale(1.04, 0.96); }
  100% { opacity: 1; transform: none; }
}

/* Ушко дёргается раз в 6 секунд, остальное время стоит */
@keyframes ear-twitch {
  0%, 88%, 100% { transform: rotate(0); }
  91% { transform: rotate(-14deg); }
  94% { transform: rotate(8deg); }
  97% { transform: rotate(-4deg); }
}

@keyframes twinkle {
  from { opacity: 0.25; }
  to   { opacity: 0.95; }
}

/* Наклейку прихлопнули: большая и повёрнутая → на место */
@keyframes sticker-slap {
  0%   { opacity: 0; transform: scale(1.7) rotate(-14deg); }
  60%  { opacity: 1; transform: scale(0.94) rotate(3deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes rays-open {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes rays-spin {
  to { transform: rotate(60deg); }
}

/* Дрожь смутившегося кота */
@keyframes shiver {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* ----- Значки, компас и капсула: движение ----- */
@media (prefers-reduced-motion: no-preference) {
  /* Значок подпрыгивает, когда число выросло */
  .chip-bump {
    animation: chip-bump 0.45s var(--spring);
  }
  /* «+3» всплывает над значком и тает */
  .chip-float {
    animation: chip-float 1.2s ease-out forwards;
  }
  /* Стрелка компаса поворачивается плавно */
  .pointer-arrow {
    transition: rotate 0.4s ease-out;
  }
  /* Капсула раскрывается: покачивается, раздувается и вспыхивает.
     Только rotate, scale и filter — transform у маркера занят MapLibre. */
  .capsule.capsule-opening {
    animation: capsule-open 0.45s ease-in forwards;
  }
}

@keyframes chip-bump {
  0%   { scale: 1; }
  40%  { scale: 1.18; }
  100% { scale: 1; }
}

@keyframes chip-float {
  0%   { opacity: 0; translate: 0 -8px; scale: 0.6; }
  20%  { opacity: 1; translate: 0 6px; scale: 1.15; }
  70%  { opacity: 1; translate: 0 12px; scale: 1; }
  100% { opacity: 0; translate: 0 22px; scale: 1; }
}

@keyframes capsule-open {
  0%   { rotate: 0deg;   scale: 1.2; }
  20%  { rotate: -12deg; scale: 1.25; }
  40%  { rotate: 12deg;  scale: 1.3; }
  60%  { rotate: -8deg;  scale: 1.4; }
  100% { rotate: 0deg;   scale: 1.9; opacity: 0;
         filter: drop-shadow(0 0 10px var(--star)) drop-shadow(0 0 28px var(--nose)) brightness(1.6); }
}

/* ===== Наклейки прогулок (календарь в альбоме) ===== */
.walk-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 12px;
  border-radius: 18px;
  background: var(--space);
}
.walk-month {
  grid-column: 1 / -1; /* название месяца — во всю ширину */
  margin: 0 0 2px;
  color: var(--star);
  font-size: 18px;
  font-weight: 800;
}
.walk-weekday {
  color: var(--fur);
  font-size: 13px;
  font-weight: 700;
}
/* Обычный день — просто число в кружке */
.walk-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--fur);
  font-size: 14px;
  font-weight: 700;
}
/* Сегодня — пунктирная рамка: «тут может быть наклейка» */
.walk-today {
  border: 2px dashed var(--star);
}
/* День с прогулкой — наклейка: цветной кружок, белая рамка, кромка,
   чуть повёрнута; лапка нарисована в ::after (там нет текста) */
.walk-sticker {
  border: 2px solid var(--fur);
  color: var(--space);
  font-weight: 800;
  box-shadow: 0 3px 0 var(--space-deep);
  rotate: -6deg;
}
.walk-sticker:nth-child(odd) { rotate: 5deg; }
.walk-sticker-0 { background: var(--nose); }
.walk-sticker-1 { background: var(--mint); }
.walk-sticker-2 { background: var(--star); }
.walk-sticker::after {
  content: '';
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--fur) center / 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='%2334375F'%3E%3Cellipse cx='10' cy='13' rx='5' ry='4.2'/%3E%3Ccircle cx='4' cy='8' r='2.2'/%3E%3Ccircle cx='8' cy='4.5' r='2.2'/%3E%3Ccircle cx='12' cy='4.5' r='2.2'/%3E%3Ccircle cx='16' cy='8' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
}

/* ===== Убежище: иконки занятий и «живые» коты ===== */
/* Иконка над подписью кнопки (SVG из art.js, homeBarIcon) */
.home-bar-icon {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto 2px;
}
.home-bar-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Кот что-то делает (класс ставит home.js раз в 3–6 секунд).
   При «уменьшить движение» home.js этих классов не ставит. */
@media (prefers-reduced-motion: no-preference) {
  .home-cat-circle.idle-hop     { animation: idle-hop 0.7s ease-out; }
  .home-cat-circle.idle-tilt    { animation: idle-tilt 1.2s ease-in-out; transform-origin: 50% 90%; }
  .home-cat-circle.idle-stretch { animation: idle-stretch 1s ease-in-out; transform-origin: 50% 100%; }
}

/* Подпрыгнул от радости */
@keyframes idle-hop {
  0%, 100% { transform: none; }
  30% { transform: translateY(-14px) scale(1.04, 0.97); }
  55% { transform: translateY(0) scale(1.06, 0.92); }
  75% { transform: translateY(-4px); }
}

/* Наклонил голову: «а что это там?» */
@keyframes idle-tilt {
  0%, 100% { transform: none; }
  25%, 65% { transform: rotate(-12deg); }
  80% { transform: rotate(4deg); }
}

/* Потянулся: вытянулся вверх и сплющился обратно */
@keyframes idle-stretch {
  0%, 100% { transform: none; }
  35% { transform: scale(0.94, 1.12); }
  65% { transform: scale(1.08, 0.92); }
}