:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #1a1a1a);
  --hint: var(--tg-theme-hint-color, #8b8b8b);
  --card: var(--tg-theme-secondary-bg-color, #f3f4f6);
  --btn: var(--tg-theme-button-color, #3aa76d);
  --btn-text: var(--tg-theme-button-text-color, #ffffff);
  --gold: #d9a521;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  padding-bottom: 16px;
  /* Убираем зум по двойному тапу — иначе не покликать быстро по пчёлам/крысам */
  touch-action: manipulation;
}

.hidden { display: none !important; }

/* ---------- экраны-заглушки ---------- */

.screen {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  color: var(--hint);
}

.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--card);
  border-top-color: var(--btn);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- шапка ---------- */

.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--card);
}

.money {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.gold {
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
}

/* Склад ждёт продажи — подсказываем, что деньги лежат рядом */
.stock-badge {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--card);
  font-size: 12px;
  font-weight: 700;
  color: var(--hint);
}

/* Полоска склада: когда забит, собирать некуда — но ничего не пропадает */
.storage {
  position: relative;
  margin-bottom: 8px;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--card);
  font-size: 11px;
  font-weight: 700;
  color: var(--hint);
  overflow: hidden;
}
.storage span { position: relative; z-index: 1; }
.storage i {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: rgba(58, 167, 109, .22);
}
.storage.warn i { background: rgba(208, 138, 29, .28); }
.storage.full   { color: #d94f43; }
.storage.full i { background: rgba(217, 79, 67, .25); }

/* ---------- уровень фермы ---------- */

.level-chip {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--card);
  font-size: 12px;
  font-weight: 700;
  color: var(--btn);
}

/* Полоска «сколько осталось до следующего уровня» (без спойлера, что откроется) */
.level-bar {
  position: relative;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--card);
  font-size: 11px;
  font-weight: 700;
  color: var(--hint);
  overflow: hidden;
}
.level-bar span { position: relative; z-index: 1; }
.level-bar i {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: rgba(58, 167, 109, .22);
}

/* Заперто до нужного уровня — видно, но не купить */
.item.locked { opacity: .6; }
.lock-btn { background: var(--card); color: var(--hint); }
.nav-btn.locked { opacity: .45; }

/* Значок продукта над животным: курица → яйцо, корова → молоко и т.д. */
.ready-dot {
  position: absolute;
  font-size: 15px;
  animation: pop 1.2s ease-in-out infinite;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
@keyframes pop {
  0%, 100% { transform: translateY(0);   opacity: .9; }
  50%      { transform: translateY(-7px); opacity: 1; }
}

/* Мастерские */
.workshop .batch {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hint);
}
.workshop .batch.ready { color: #2f9e63; }
.workshop .batch .grow-bar {
  position: static;
  height: 4px;
  margin-top: 3px;
  background: rgba(0,0,0,.12);
}

.tabs { display: flex; gap: 6px; }

.tab {
  flex: 1;
  padding: 9px;
  border: none;
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.tab.active { background: var(--btn); color: var(--btn-text); }

.tab-body { padding: 12px; }

/* ---------- сцена фермы ---------- */

.scene {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: url('/assets/parts/bg.png') center/cover no-repeat, #a8d6f0;
}

/* Старые вебвью без aspect-ratio: без этого у сцены НУЛЕВАЯ высота,
   процентные потолки детей не работают — и крупные питомцы (динозавр)
   вылезали за рамки. Даём высоту явно. */
@supports not (aspect-ratio: 16 / 9) {
  .scene { height: 53vw; }
}

.layer { position: absolute; inset: 0; }

.sprite {
  position: absolute;
  transform-origin: bottom center;
}
.sprite.bob { animation: bob 2.4s ease-in-out infinite; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4%); }
}

/* ---------- всплывашка ---------- */

.toast {
  margin: 8px 12px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--card);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  animation: rise .35s ease;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tiny { font-size: 11px; font-weight: 500; color: var(--hint); }

/* ---------- статистика ---------- */

.stats { margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }

.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: var(--card);
  border-radius: 10px;
  font-size: 14px;
}
.stat-row .name { flex: 1; font-weight: 600; }
.stat-row .sub  { color: var(--hint); font-size: 12px; }

/* ---------- кнопки ---------- */

.big-btn {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 12px;
  background: var(--btn);
  color: var(--btn-text);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.big-btn:disabled { opacity: .45; cursor: default; }

/* ---------- магазин ---------- */

/* Подвкладки магазина (Ферма / Питомец / Поддержать) — экономят место. */
.shop-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.shop-tab {
  flex: 1;
  padding: 9px 4px;
  border: none;
  border-radius: 10px;
  background: var(--card);
  color: var(--hint);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.shop-tab.active { background: var(--btn); color: var(--btn-text); }

.shop-section { margin-bottom: 18px; }
.shop-section h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--hint);
  margin-bottom: 8px;
}

.item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  background: var(--card);
  border-radius: 12px;
  margin-bottom: 8px;
}
.item .icon { font-size: 26px; }
.item .info { flex: 1; min-width: 0; }
.item .title { font-weight: 700; font-size: 15px; }
.item .desc  { font-size: 12px; color: var(--hint); margin-top: 2px; }

.buy {
  padding: 9px 13px;
  border: none;
  border-radius: 9px;
  background: var(--btn);
  color: var(--btn-text);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.buy:disabled { opacity: .4; cursor: default; }

.egg-item { background: linear-gradient(135deg, #fff3d6, #ffe4a8); color: #4a3a12; }
.egg-item .desc { color: #7a6534; }

/* ---------- склад и продажа ---------- */

.sell-item { background: linear-gradient(135deg, #e6f6ec, #d3efdd); color: #12331f; }
.sell-item .desc { color: #3f6b50; }
.sell-item .buy { background: #2f9e63; color: #fff; }

.sell-all {
  margin-top: 4px;
  background: #2f9e63;
}

.empty-hint {
  padding: 14px;
  border-radius: 12px;
  background: var(--card);
  color: var(--hint);
  font-size: 13px;
  text-align: center;
}

/* Пасека: полный улей выгоднее двух полупустых — показываем это прямо */
.hive-row .good { color: #2f9e63; font-weight: 700; text-align: right; }
.hive-row .warn { color: #d08a1d; font-weight: 700; text-align: right; }

.ok   { color: #2f9e63; }
.warn { color: #d08a1d; }

/* ---------- нижняя навигация ---------- */

body { padding-bottom: 74px; }

.nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: var(--bg);
  border-top: 1px solid var(--card);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  z-index: 20;
}

.nav-btn {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  border: none;
  background: none;
  color: var(--hint);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.nav-btn.active { color: var(--btn); }
/* Колесо фортуны */
/* Кнопка колеса — В САМОМ НИЗУ, прижата к нижним вкладкам (реш. Маши 29.07) */
.wheel-btn {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 24px));
  bottom: calc(80px + env(safe-area-inset-bottom));
  z-index: 15;
  margin: 0;
}
/* Чтобы прижатая кнопка не накрывала контент Двора — добавляем место снизу */
#view-place.with-wheel { padding-bottom: 76px; }
/* «Крутить» и «Закрыть» слегка раздвинуты друг от друга */
.wheel-card #wheel-spin { margin-bottom: 6px; }
.wheel-card #wheel-close { margin-top: 6px; }
/* Кнопки в оверлеях (няня и т.п.) не слипаются (реш. Маши 29.07) */
.levelup-overlay .big-btn + .big-btn { margin-top: 10px; }
.wheel-box {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 10px auto 14px;
}
.wheel {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 5px solid #7a5a3a;
  position: relative;
  box-shadow: 0 3px 12px rgba(0,0,0,.25);
}
.wheel-label {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -18px 0 0 -17px;
  width: 34px;
  height: 36px;
  font-size: 21px;
  line-height: 26px;
  text-align: center;
  pointer-events: none;
}
/* Модельки призов на секторах: монетка/капкан/искра + количество под ними */
.wheel-label img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  margin: 0 auto;
}
.wheel-label i {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  color: #4a3a26;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.wheel-pointer {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  color: #d4483b;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.nav-emoji { font-size: 21px; line-height: 1; }
/* Моделька на вкладке вместо эмодзи (курица, росток, пекарня…) */
.nav-ic {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

/* Точка «тут есть что забрать» */
.nav-btn .dot {
  position: absolute;
  top: 4px;
  right: 22%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #e0483c;
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- грядки ---------- */

.plots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px;
}

.plot {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  overflow: hidden;
  background: #9c7350;
  border: 2px dashed rgba(255,255,255,.35);
  color: #fff;
}
.plot img { width: 36%; }
.plot .tiny { color: rgba(255,255,255,.9); font-weight: 700; }
.plot .plus { font-size: 22px; font-weight: 700; }

.plot.growing { border-style: solid; border-color: rgba(255,255,255,.25); }
/* Сухая грядка — растёт медленно, зовёт полить. */
.plot.dry { border-style: dashed; border-color: #4aa3df; }
.plot.dry .tiny { color: #cdeaff; }
.plot.ripe {
  border: 2px solid #ffd764;
  box-shadow: 0 0 0 3px rgba(255,215,100,.28);
  animation: ready 1.5s ease-in-out infinite;
}
@keyframes ready {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.03); }
}
.plot.buy { background: var(--card); color: var(--hint); border-color: var(--hint); }
.plot.buy .tiny { color: var(--hint); }

.grow-bar {
  position: absolute; left: 8%; right: 8%; bottom: 7px;
  height: 4px; border-radius: 3px;
  background: rgba(0,0,0,.28);
}
.grow-bar i { display: block; height: 100%; border-radius: 3px; background: #7ed08f; }

/* ---------- шторка выбора семян ---------- */

.sheet {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end;
  z-index: 40;
  animation: fade .2s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.sheet-body {
  width: 100%;
  max-height: 78vh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: 18px 18px 0 0;
  padding: 16px 12px calc(16px + env(safe-area-inset-bottom));
  animation: up .25s ease;
}
@keyframes up { from { transform: translateY(30px); } to { transform: translateY(0); } }

.sheet-body h3 { margin-bottom: 10px; font-size: 16px; }
.seed-item .desc { line-height: 1.35; }

/* ---------- гнездо: яйцо и птенчик ---------- */

.nest-scene { background: var(--card); display: flex; align-items: center; justify-content: center; }
/* Питомца показываем ЦЕЛИКОМ и поменьше — чтобы не вылезал за рамки.
   Потолок продублирован в vw: на телефонах без поддержки aspect-ratio у сцены
   нет высоты, процентный max-height не срабатывает — и динозавр уезжал за
   рамки. 26vw вычисляется всегда, поэтому крупные модели (динозавр, дракон)
   тоже вписываются. */
#nest-img { max-width: 65%; max-height: min(75%, 38vw); object-fit: contain; }
/* Динозавр портретный и оттого выглядел мельче альбомного дракона — даём ему
   больше высоты, чтобы по площади он сравнялся с драконом. */
#nest-img.pet-dinosaur { max-width: 48%; max-height: min(54%, 27vw); }
/* Крокодил-питомец — чуть крупнее прочих уменьшенных. */
#nest-img.pet-crocodile { max-width: 52%; max-height: min(60%, 30vw); }
/* Цыплёнок-питомец — поменьше. Правило ДО .hatching, чтобы вылупление
   цыплёнка (класс .hatching стоит позже и перебивает) осталось прежним. */
#nest-img.pet-chicken { max-width: 37%; max-height: min(50%, 25vw); }
/* Экран вылупления (hatch_*): свой уменьшенный размер для всех видов. */
#nest-img.hatching { max-width: 45%; max-height: min(50%, 25vw); }
/* Вылупление динозавра — ещё чуть меньше остальных вылуплений. */
#nest-img.hatching.pet-dinosaur { max-width: 42%; max-height: min(46%, 23vw); }
/* Вылупление цыплёнка — тоже чуть меньше. */
#nest-img.hatching.pet-chicken { max-width: 42%; max-height: min(46%, 23vw); }

/* Экран смерти: чёрный экран + сообщение о гибели. */
.nest-scene.dead { background: #000; }
.dead-msg { text-align: center; padding: 14px 6px; }
.dead-candle { font-size: 46px; line-height: 1; margin-bottom: 8px; }
.dead-msg p { font-size: 17px; color: var(--hint); }

/* Инкубатор: стол с батареей — фон, яйцо стоит на столешнице */
.nest-scene.incubator #nest-table {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  height: 66%; width: auto; max-width: none;
}
.nest-scene.incubator #nest-img {
  position: absolute; left: 50%; bottom: 54%;
  transform: translateX(-50%);
  height: 38%; width: auto; max-width: none; max-height: none;
}
/* Угроза (крыса/ворона) — отдельная моделька рядом с яйцом. Фон и яйцо не трогает */
#threat-img {
  position: absolute;
  left: 64%; bottom: 51%;
  transform: translateX(-50%);
  height: 24%; width: auto;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .4));
  pointer-events: none;
}
/* Ворона отзеркалена (клювом к яйцу) и стоит выше на столешнице, а не у края. */
#threat-img.threat-crow { left: 62%; bottom: 55%; }
/* Крыса — чуть меньше, немного левее и повыше */
#threat-img.threat-rat { left: 61%; bottom: 54%; height: 19%; }

/* Сторож-собака (куплена на это яйцо): дежурит на полу слева от стола,
   мордой к яйцу. Спрайт уже отзеркален вправо. */
#guard-img {
  position: absolute;
  left: 19%; bottom: 2%;
  transform: translateX(-50%);
  height: 32%; width: auto;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .35));
  pointer-events: none;
}

#nest-body { padding: 12px; }
#nest-actions { padding: 0 12px 12px; }

.grow-bar.big {
  position: static;
  height: 10px;
  margin: 10px 0 12px;
  background: var(--card);
}
.grow-bar.big i { background: linear-gradient(90deg, #f0c14b, #ffd764); }

.hints { margin-top: 10px; font-size: 14px; font-weight: 600; }
.hints .warn { color: #d08a1d; margin-bottom: 4px; }
.hints .ok   { color: #2f9e63; }

/* Ярлык няни в инкубаторе: тап ведёт в «Банк» почитать про подписку */
.nanny-ad {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--card);
  font-size: 13px;
  cursor: pointer;
}
.nanny-ad img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.nanny-ad u { color: #2f9e63; }

.two-btn, .three-btn { display: flex; gap: 8px; }
.two-btn .big-btn, .three-btn .big-btn { flex: 1; font-size: 14px; padding: 13px 6px; }
.big-btn.on     { background: #e0783c; }
.big-btn.danger { background: #d94f43; }

.threat { text-align: center; padding: 8px 0 14px; }
.threat h2 { font-size: 22px; margin-bottom: 6px; }
.threat p  { font-size: 14px; color: var(--hint); }

/* ---------- лиса на ферме ---------- */
/* Зверь на сцене — пока эмодзи-заглушка, потом заменим спрайтом. */
.fox-beast {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 16%;             /* картинка-спрайт лисы; для эмодзи-фолбэка см. ниже */
  transform: translateX(-50%);
  font-size: 56px;        /* используется, только если фолбэк-эмодзи (не img) */
  line-height: 1;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45));
  animation: bob 1.1s ease-in-out infinite;
}
div.fox-beast { width: auto; }  /* эмодзи-фолбэк не растягиваем */
/* Ворона сидит выше — на грядках, а не у нижнего края, как лиса. */
.fox-beast.crow-beast { width: 13%; bottom: 30%; }
/* Пугало на поле — стоит справа, отгоняет ворон. Видно после покупки. */
.scarecrow-sprite {
  position: absolute;
  right: 6%;
  bottom: 6%;
  width: 15%;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35));
}

/* Капкан на сцене — виден после покупки, там где ходит лиса. Правый верхний угол. */
.trap-sprite {
  position: absolute;
  right: 4%;
  top: 5%;
  width: 12%;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .4));
}
.trap-count {
  position: absolute;
  right: 4%;
  top: 1%;
  z-index: 5;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  padding: 1px 6px;
  border-radius: 8px;
  pointer-events: none;
}
/* Иконка-картинка в списке магазина (капкан вместо эмодзи). */
.item .icon img { width: 36px; height: 36px; object-fit: contain; vertical-align: middle; }
/* Экран повышения уровня — во весь экран. */
.levelup-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, .72);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: fadein .2s ease;
}
.levelup-card {
  background: var(--bg); border-radius: 18px; padding: 28px 22px;
  text-align: center; max-width: 340px; width: 100%;
}
.levelup-emoji { font-size: 64px; line-height: 1; }
.levelup-card h1 { font-size: 26px; margin: 10px 0 4px; }
.levelup-num { font-size: 18px; font-weight: 700; color: var(--btn); margin-bottom: 10px; }
.levelup-card p { font-size: 15px; color: var(--hint); margin-bottom: 18px; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* Характер питомца (навыки) на экране питомца. */
.char-title { font-size: 12px; color: var(--hint); font-weight: 700; margin: 16px 0 8px; }

/* Мини-моделька вместо эмодзи в списках (магазин, тело локации, семена). */
.mini-icon { width: 36px; height: 36px; object-fit: contain; vertical-align: middle; }
/* Монетка-моделька вместо эмодзи 🪙 в тексте (цены, шапка). В позиции иконки
   магазина она крупнее — там действует правило .item .icon img (36px). */
.coin-ic { width: 1.15em; height: 1.15em; object-fit: contain; vertical-align: -0.22em; }
/* Искра жизни — как монетка: мелкая в тексте/шапке, 36px в позиции иконки
   магазина (там перебивает правило .item .icon img). */
.spark-ic { width: 1.2em; height: 1.2em; object-fit: contain; vertical-align: -0.25em; }
/* Карточка-тревога наверху локации. */
.fox-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 14px;
  border: 2px solid #d94f43;
  background: rgba(217, 79, 67, .12);
}
.fox-card .fox-head { font-size: 16px; font-weight: 700; }
.fox-card .tiny { color: var(--hint); }

.hatch-text { text-align: center; padding: 10px 4px; }
.hatch-text h2 { font-size: 24px; margin-bottom: 8px; }
.hatch-text p  { font-size: 15px; line-height: 1.45; margin-bottom: 8px; }

.name-row { display: flex; gap: 8px; }
.name-input {
  flex: 1;
  padding: 14px;
  border: 2px solid var(--card);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
}
.name-input:focus { outline: none; border-color: var(--btn); }
.name-row .big-btn { width: auto; padding: 14px 18px; }

.pet-head { text-align: center; margin-bottom: 14px; }
.pet-head h2 { font-size: 24px; }

.stat-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.stat-line > span:first-child { width: 118px; }
.stat-line b { width: 32px; text-align: right; color: var(--hint); }

.stat-line .bar {
  flex: 1;
  height: 10px;
  border-radius: 6px;
  background: var(--card);
  overflow: hidden;
}
.stat-line .bar i { display: block; height: 100%; background: #7ed08f; }
.stat-line .bar i.low  { background: #e0783c; }
.stat-line .bar i.high { background: #2f9e63; }

/* ---------- акция дня (окно при первом заходе за день) ---------- */

.offer-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.offer-card {
  background: var(--bg);
  border-radius: 20px;
  padding: 22px 20px 14px;
  max-width: 320px; width: 100%;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.offer-badge { font-weight: 800; color: #d9541e; margin-bottom: 8px; }
.offer-card h2 { margin-bottom: 6px; }
.offer-desc { color: var(--hint); font-size: 14px; margin-bottom: 14px; }
.offer-card .big-btn { width: 100%; margin: 0; }
.offer-close {
  margin-top: 10px;
  background: none; border: none;
  color: var(--hint); font-size: 14px; padding: 6px;
}

.offer-timer {
  font-weight: 700;
  color: #d9541e;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}

/* Акция в «Банке»: слегка подсвечена, чтобы отличалась от обычных пакетов */
.item.offer-item { border: 1px solid #d9541e33; background: #d9541e0d; border-radius: 12px; }
.item.offer-item .desc b { color: #d9541e; font-variant-numeric: tabular-nums; }

/* Окно кормления: список еды из кладовки */
.feed-card { text-align: left; }
.feed-card h2 { text-align: center; margin-bottom: 10px; }
.feed-list { max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.feed-card .offer-close { width: 100%; }

/* Моделька продукта над животным (вместо эмодзи, если нарисована) */
.ready-dot img { width: 19px; height: auto; display: block; }

/* Иконки ингредиентов внутри описания товара (рецепты кухни, домашние
   средства): в одну строку с текстом, а не 36px-модельки */
.item .desc .mini-icon { width: 1.35em; height: 1.35em; vertical-align: -0.3em; }

/* Автополив: после покупки всегда в правом верхнем углу поля */
.auto-water-sprite {
  position: absolute;
  top: 3%;
  right: 2.5%;
  width: 11%;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
}

/* Пёрышко-пасхалка на дворе */
.feather-sprite {
  position: absolute;
  left: 12%;
  bottom: 6%;
  font-size: 22px;
  cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
  animation: pop 2.4s ease-in-out infinite;
}