body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #cce6ff url('/img/bg_bg_bg.jpg') no-repeat center bottom fixed;
  background-size: cover;
  font-family: sans-serif;
  color: white;
  display: flex;
  flex-direction: column;
}

/* ================== ВЕРХНЯЯ ПАНЕЛЬ ================== */
.top-panel {
  padding: 10px 0 12px 0;
  border-radius: 0 0 16px 16px;
}

/* Центрируем по горизонтали и задаём max-width */
.top-bar {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  gap: 8px;
}

@media (max-width: 500px) {
  .top-bar {
    max-width: 96vw;
    gap: 4px;
  }
}

/* Плашки компактные, иконка внутри */
.top-item {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: 140px;
  background: rgba(0, 0, 0, 0.4);         /* ← Фон как у Rectangle 2 */
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.7); /* ← как в Rectangle 2 */
  border-radius: 12px;                    /* ← Скругление как у эталона */
  padding: 4px 15px;
  gap: 0px;
  height: 25px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  overflow: hidden;
}

/* Иконки слева внутри плашки */
.icon,
.star-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
  background: transparent;
  box-shadow: none;
  margin-right: 0;
}

/* Для звезды с уровнем — цифра строго по центру */
.star-level {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 0;
}

.star-icon {
  width: 30px;
  height: 30px;
  display: block;
}

.star-num {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 4px #000, 0 0 4px #fff5;
  letter-spacing: 0.3px;
  z-index: 1;
}

/* Правая часть плашки (баланс, xp-bar) */
.col, .col-level {
  margin-left: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1 1 0;
}

/* Для xp-bar только в левел-плашке */
.col-level {
  margin-left: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 140px;  /* чуть больше, чем полоска */
}

.xp-bar {
  background: #444;
  width: 65px;        /* Базовая ширина (можешь выбрать свою) */
  max-width: 66px;    /* Максимальная ширина полоски */
  min-width: 48px;     /* Минимальная ширина полоски */
  height: 15px;
  border-radius: 8px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  transition: width 0.2s;
  display: block;
}

@media (max-width: 400px) {
  .xp-bar {
    width: 15vw;        /* 60% ширины экрана на мобильных */
    max-width: 90px;
    min-width: 38px;
  }
  .col-level {
    max-width: 92vw;
  }
}

#xp-progress,
.xp-fill {
  background: linear-gradient(to right, #20a4ea, #34beea);
  height: 100%;           /* так полоса всегда по высоте .xp-bar */
  transition: width 0.3s ease;
}

.xp-percent {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  color: #fff;
  font-weight: bold;
  pointer-events: none;
  text-shadow: 0 1px 4px #222, 0 0 4px #fff5;
  z-index: 2;
  white-space: nowrap;
}

/* Цифры для монет и гемов */
.currency-num {
  font-weight: bold;
  font-size: 15px;
  color: #fff;
  line-height: 32px;
}

/* ================== ПРОФИЛЬ — Широкий единый блок ================== */
.profile-bar-wide {
  display: flex;
  justify-content: space-between; /* Профиль слева, кнопки справа */
  align-items: center;
  background: rgba(0, 0, 0, 0.3);               /* ← СТИЛЬ из Rectangle 2 */
  border-radius: 10px;                          /* ← как в Rectangle 2 */
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.7); /* ← как в Rectangle 2 */
  padding: 8px 24px;
  margin: 10px auto 0 auto;
  max-width: 400px;
  width: 85vw;
  min-width: 220px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  gap: 12px;
}

.profile-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

#avatar,
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

.nickname,
#name {
  font-weight: bold;
  font-size: 15px;
  color: #fff;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.profile-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.shop-btn {
  box-sizing: border-box;
  background: linear-gradient(0deg, #01B372 15.38%, #5ED862 100%);
  border: 2px solid #6EEF71;
  border-radius: 10px;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 0.5px;
  box-shadow:
    0px 2px 0px #006D3F,
    0px 0px 0px 0px #004F2E,
    0px 3px 0px 1px #004F2E;
  padding: 5px 15px;
  cursor: pointer;
  outline: none;
  margin: 0;
  transition: transform 0.12s;
}

.shop-btn:active {
  transform: translateY(2px) scale(0.98);
  box-shadow:
    0px 2px 0px #006D3F,
    0px 0px 0px 2px #004F2E,
    0px 4px 0px 2px #004F2E;
}

.icon-btn {
  box-sizing: border-box;
  background: linear-gradient(180deg, #4EC2FF 38%, #0B9BE6 100%);
  border: 2px solid #98DFFF;
  border-radius: 10px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 15px;
  box-shadow:
    0px 2px 0px #004CB1,
    0px 0px 0px 0px #003682,
    0px 3px 0px 1px #003682;
  padding: 0;
  width: 30px;
  height: 30px;
  cursor: pointer;
  outline: none;
  margin: 0;
  transition: transform 0.12s;
}

.icon-btn:active {
  transform: translateY(2px) scale(0.98);
  box-shadow:
    0px 2px 0px #004CB1,
    0px 0px 0px 2px #003682,
    0px 4px 0px 2px #003682;
}

.icon-btn .icon {
  width: 20px;
  height: 17px;
  margin-top: 2px;           /* !!! Смещение вниз (можешь изменить на нужное значение) */
  display: block;
}

#avatar,
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

.profile-name-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* чтобы текст был слева */
  min-width: 0;
  overflow: hidden;
}

.nickname,
#name {
  font-weight: bold;
  font-size: 15px;
  color: #fff;
  margin-bottom: 0px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.tg-id {
  font-size: 11px;
  color: #d4d5d6;
  opacity: 0.75;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

/* ================== Остальной интерфейс ================== */

.buildings-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0px;
  margin: -40px auto 0px auto;
  width: 100%;
  max-width: 420px;
  min-height: 110px;
  background: none; /* без фона */
}

.chicken-coop, .cow-shed, .bakery {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background: none;   /* без заднего фона */
  border-radius: 0;   /* без скругления */
  box-shadow: none;   /* без тени */
  border: none;       /* без рамки */
  padding: 0;
  min-width: 64px;
  min-height: 80px;
}

/* Добавляем рыболовню к общему правилу размеров */
.chicken-coop img,
.cow-shed img,
.bakery img,
.sheepfold-img,
.fishery img {
  width: 95px;
  height: 140px;
  object-fit: contain;
  border-radius: 0;
  background: none;
  box-shadow: none;
  margin-bottom: -5px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.building-label {
  font-size: 15px;
  color: #ffe484;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 8px #000a, 0 1px 1px #fff8;
  margin-top: 2px;
  line-height: 1.1;
  background: none;
  border: none;
}

.modal {
  display: flex;                  /* ВАЖНО: flex вместо block */
  align-items: center;            /* Центр по вертикали */
  justify-content: center;        /* Центр по горизонтали */
  position: fixed;
  z-index: 999;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  background-color: rgba(0,0,0,0.75);
}

.modal-content {
  position: relative;
  box-sizing: border-box;
  width: 370px;               /* компактнее, меняй как хочешь */
  max-width: 90vw;
  background: #D08D62;
  border: 5px solid #F3C285;
  border-radius: 25px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 22px #7a573033, 0 1px 0 #fff2;
  padding: 0px 5px;
  max-height: 550px;          /* фиксированная максимальная высота */
  min-height: 100px; /* ← вот минимальная высота */
  overflow-y: auto;           /* появится скролл если контента много */
}

/* Внутренний блок — вставь, если нужен внутри основной */
.modal-inner {
  width: 265px;
  min-height: 128px;
  background: #926343;
  border: 3px solid #FAC791;
  border-radius: 12px;
  margin: 10px auto 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.coop-slots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.chicken-slot {
  width: 64px;
  height: 64px;
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  border: 1px solid #444;
  cursor: pointer;
}

.chicken-slot.locked {
  opacity: 0.2;
  background-image: url('/img/chicken_empty.png');
}

.chicken-slot .plus-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}

.chicken-slot .timer {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #fff;
}

.chicken-slot .egg-count {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #ff0;
}

.close-btn {
  margin-top: 12px;
  padding: 6px 16px;
  background: #F1CE9A;
  border: none;
  border-radius: 6px;
  color: #4b3737;
  cursor: pointer;
}

.content {
  flex-grow: 1;
  background: #292c33;
  padding: 16px;
}

.bottom-nav {
  position: fixed;
  left: 35px;
  right: 35px;
  bottom: 20px;
  z-index: 4999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0,0,0,0.33);
  border-radius: 16px;
  box-shadow: 0 2px 8px #0004, 0 1px 0 #2226;
  padding: 4px 12px;
  gap: 8px;
  min-height: 45px;
  max-width: 440px;
  margin: 0 auto;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.nav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 0px 0 0 0;
  min-width: 36px;
  min-height: 38px;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
  outline: none;
  margin: 0;
}

.nav-item.active, .nav-item.nav-main {
  border-color: #ffe353;
  background: rgba(255,227,83,0.10);
}

.nav-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 2px;
  display: block;
  pointer-events: none;
}

.nav-label {
  font-size: 11px;
  color: #fff;
  opacity: 0.86;
  line-height: 1;
  margin-top: 0;
  pointer-events: none;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Мобильная адаптация */
@media (max-width: 500px) {
  .bottom-nav {
    min-height: 38px;
    padding: 3px 6px;
    gap: 0px;
    border-radius: 10px;
    max-width: 98vw;
  }
  .nav-icon { width: 20px; height: 20px; }
  .nav-label { font-size: 10px; }
  .nav-item { min-width: 24px; min-height: 38px; border-radius: 10px; }
}

/* ====== Мастерская / Крафт ====== */

#craft-modal.modal {
  display: none;
  position: fixed;
  z-index: 9999; /* поверх всего! */
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.78);
}

.craft-content {
  background: #23272f;
  margin: 7% auto 0 auto;
  padding: 24px 18px 16px 18px;
  border-radius: 18px;
  box-shadow: 0 4px 32px #000b, 0 2px 0 #2228;
  width: 96vw;
  max-width: 420px;
  color: #fff;
  text-align: center;
  position: relative;
}

.craft-title-main {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 14px;
  letter-spacing: 1px;
  color: #FFDF78;
  text-shadow: 0 1px 4px #000b, 0 0 8px #fff3;
}

#craft-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 8px;
}

.craft-item {
  background: rgba(146, 99, 67,0.77);
  border-radius: 12px;
  box-shadow: 0 1px 4px #0005;
  padding: 8px 15px;
  gap: 0px;
  border: 3px solid #FAC791;
}

.craft-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 7px;
}

.craft-info {
  flex: 1 1 0;
  text-align: left;
  min-width: 0;
}

.craft-title {
  font-weight: bold;
  font-size: 17px;
  color: #F1CE9A;
  margin-bottom: 2px;
}

.craft-req {
  font-size: 13px;
  color: #F1CE9A;
  opacity: 0.86;
}

.craft-btn,
.coop-buy-btn,
.coop-feed-btn,
.coop-collect-btn {
  background: linear-gradient(180deg, #EFB582 0%, #F3C283 100%);
  border: 1.5px solid #926343;
  border-radius: 8px;
  color: #926343;
  font-weight: bold;
  font-size: 13px;
  padding: 7px 18px;
  cursor: pointer;
  outline: none;
  transition: 0.13s;
  box-shadow:
    0px 1px 0px #D08D62,
    0px 4px 0px #926343,
    inset 0px 0px 0px #F1CE9A,
    inset 0px 4px 0px #F1CE9A;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* для иконки и текста */
}

.craft-btn:active,
.coop-buy-btn:active,
.coop-feed-btn:active,
.coop-collect-btn:active {
  transform: translateY(2px) scale(0.98);
  box-shadow:
    0px 2px 0px #D08D62,
    2px 4px 0px #926343,
    inset -1px 4px 0px #F1CE9A,
    inset 1px 5px 0px #F1CE9A;
}

.craft-close {
  position: absolute;
  top: 12px; right: 18px;
  background: none;
  border: none;
  color: #fff;
  font-size: 21px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.13s;
}
.craft-close:hover { opacity: 1; }

.building-top-img {
  display: block;
  margin: 0 auto 8px auto;
  /* Центрировать над зданием */
  position: relative;
  left: 0;
  right: 0;
  /* Анимация качания */
  animation: floatY 2.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

/* Для разных высот (установи класс или стиль, например: style="height:60px;") */
.building-top-img {
  height: 54px; /* дефолт */
  width: auto;
  max-width: 120px;
}

/* Пример для вариаций: */
.building-top-img.small    { height: 30px; }
.building-top-img.medium   { height: 30px; }
.building-top-img.large    { height: 30px; }

.sheepfold .building-top-img {
  margin-bottom: -9px !important; /* подбери число вручную — у других 0 или -5px */
}

.garden-bed {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 23px 0 0 -60px; /* выше/левее */
  gap: 0px;
  width: 100%;
  max-width: 360px;
}

.garden-row {
  display: flex;
  gap: 0px;
}

.garden-cell {
  width: 48px;
  height: 48px;
  border-radius: 0;           /* убирает скругления */
  overflow: hidden;
  background: none;
  box-shadow: none;           /* убирает тень */
  border: none;               /* убирает любую обводку */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  padding: 0px;               /* отступ */
}

.garden-plant-img {
  position: absolute;
  left: 54%;
  bottom: 14;
  bottom: 1px;      /* подними больше если надо, напр. 20px */
  transform: translateX(-50%);
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
  /* width будет задаваться в JS */
  height: auto;
  max-height: 110%; /* чтобы не было совсем огромным, если надо */
}

.garden-timer {
  position: absolute;
  left: 50%;
  top: 7px;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.53);
  color: #fff;
  font-size: 14px;
  padding: 2px 11px;
  border-radius: 7px;
  z-index: 3;
  font-family: inherit;
  font-weight: 600;
  min-width: 48px;
  text-align: center;
  letter-spacing: 1.5px;
  box-shadow: 0 2px 6px #0002;
  user-select: none;
}

.garden-cell img {
  display: block;
  width: 100%;
  height: 95%;
  object-fit: contain; /* только картинка, без фона */
  pointer-events: none;
  user-select: none;
}

/* Моб. адаптация */
@media (max-width: 500px) {
  .garden-bed { max-width: 91vw; }
  .garden-cell { width: 50px; height: 50px; }
}

.garden-bg-wrap {
  position: relative;
  width: fit-content; /* или жестко max-width: 360px если нужно */
  margin: 85px 0 0 -70px; /* совпадает с твоей грядкой */
}

.garden-bg {
  position: absolute;
  left: 11px;
  top: 356px;
  width: 206px;      /* фиксированная ширина */
  height: 135px;     /* фиксированная высота */
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 5px 25px #0004);
}

.garden-bed {
  position: relative;
  z-index: 2;
  /* остальные твои стили без изменений */
}

.dog-wrap {
  position: relative; /* или absolute — если хочешь привязать к родителю */
  width: 75px;   /* Можно менять размер собаки по ширине */
  height: 60px;  /* А это по высоте */
  margin-left: 290px;   /* Смещение по горизонтали */
  margin-top: -210px;     /* Смещение по вертикали */
  z-index: 3;           /* Если нужна над другими элементами */
  display: flex;
  align-items: center;
  justify-content: center;
}

.dog-img {
  width: 100%;   /* Собака занимает всю ширину блока */
  height: 100%;  /* Собака занимает всю высоту блока */
  object-fit: contain; /* или 'cover', если нужно заполнить полностью */
  pointer-events: none; /* чтобы не мешала кликам */
  user-select: none;
  transition: transform 0.19s;
}

.build-btn {
  background: linear-gradient(0deg, #01B372 15.38%, #5ED862 100%);
  border: 2px solid #6EEF71;
  border-radius: 8px;
  color: #193a12;
  font-weight: bold;
  font-size: 10px;
  padding: 3px 0px;
  margin-top: 15px;
  margin-bottom: 25px;
  cursor: pointer;
  outline: none;
  transition: 0.13s;
  box-shadow: 0px 4px 0px #006D3F, 0px 4px 0px 2px #004F2E, 0px 0px 0px 2px #004F2E;
  width: 100px;
  max-width: 98vw;
}
.build-btn:active {
  transform: translateY(2px) scale(0.98);
  box-shadow: 0px 2px 0px #006D3F, 0px 4px 0px 1px #004F2E, 0px 0px 0px 1px #004F2E;
}

.coop-build-anim {
  width: 92px;
  height: 92px;
  display: block;
  margin: 0 auto 6px auto;
}

.coop-timer {
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: -25px; /* было 8px, теперь ниже */
  letter-spacing: 1px;
}

/* Модалка подтверждения */
.build-modal {
  position: fixed;
  z-index: 99999;
  left: 0; top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.build-modal .modal-content {
  background: #D08D62;
  border: 5px solid #F3C285;
  border-radius: 16px;
  box-shadow: 0 6px 32px #7a573044;
  padding: 28px 20px 18px 20px;
  max-width: 320px;
  min-width: 220px;
  text-align: center;
  font-size: 18px;
  color: #fff;
  position: relative;
}

/* Кнопки "Да" и "Нет" */
#yes-build.craft-btn {
  background: linear-gradient(0deg, #01B372 15.38%, #5ED862 100%);
  border: 2.5px solid #6EEF71;
  box-shadow: 0px 4px 0px #006D3F, 0px 7px 0px 2px #004F2E;
  border-radius: 10px;
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  padding: 7px 24px;
  margin: 0 6px;
  transition: 0.13s;
  outline: none;
  cursor: pointer;
}
#yes-build.craft-btn:active {
  transform: scale(0.97) translateY(2px);
  box-shadow: 0px 1px 1px #006D3F, 0 0 0 #004F2E;
}

/* Серая кнопка "Нет" */
#no-build.craft-btn {
  background: #aaa;
  border: 2.5px solid #eee2;
  color: #fff;
  font-weight: bold;
  border-radius: 10px;
  font-size: 15px;
  padding: 7px 24px;
  margin: 0 6px;
  transition: 0.13s;
  outline: none;
  cursor: pointer;
}
#no-build.craft-btn:active {
  background: #888;
  border-color: #ccc;
  transform: scale(0.97) translateY(2px);
}

/* Красивая анимация появления */
.build-modal .modal-content {
  animation: confirmModalShow 0.26s cubic-bezier(.48,1.9,.67,.81);
}
@keyframes confirmModalShow {
  from { opacity: 0; transform: scale(0.8);}
  to   { opacity: 1; transform: scale(1);}
}

#coop-modal {
  display: none;
  /* остальное — как у modal, если надо */
}

.coop-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.coop-chicken-slot {
  background: #926343;
  border-radius: 14px;
  padding: 5px 0px 15px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 120px;
  position: relative;
  border: 5px solid #FAC791;
}
.coop-chicken-slot.locked {
  opacity: 0.4;
  filter: grayscale(60%);
}
.coop-chicken {
  width: 85px;
  margin-bottom: 4px;
}
.coop-chicken-buy {
  width: 48px;
  opacity: 0.5;
  margin-bottom: 6px;
}
.chicken-status, .chicken-timer {
  font-size: 13px;
  margin: 2px 0;
  text-align: center;
}

.coop-chicken-buy {
  width: 60px;
  margin-bottom: 4px;
  opacity: 0.45;      /* Прозрачность только для курицы-покупки */
  filter: grayscale(60%);
}

.coop-buy-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  /* остальное уже есть в твоём коде */
  gap: 7px; /* пространство между иконкой и числом */
  font-size: 15px;
  font-weight: 600;
}

.coop-buy-inner {
  display: flex;
  align-items: center;
  gap: 7px;
}

.coop-buy-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.coop-buy-price {
  line-height: 1;
  font-size: 15px;
  font-weight: 600;
}

.modal-content {
  position: relative;
}

.modal-close {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 40px;
  height: 40px;
  background: none;          /* убираем фон */
  border: none;              /* убираем обводку */
  border-radius: 0;          /* убираем скругления */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: opacity 0.15s;
  padding: 0;
}
.modal-close:hover {
  opacity: 0.7;
  background: none;
}
.modal-close img, .modal-close svg {
  width: 30px;      /* больше размер иконки */
  height: 30px;
  display: block;
  pointer-events: none;
}

.garden-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;   /* обязательно */
  z-index: 1;
}

.garden-buy-icon {
  position: absolute;  /* обязательно */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  opacity: 0.85;
  cursor: pointer;
  z-index: 10000;
  pointer-events: auto;   /* критично! */
  transition: opacity .14s, transform .14s;
}
.garden-buy-icon:hover {
  opacity: 1;
  transform: scale(1.12);
}

.garden-bed-img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  border-radius: 0;   /* Убрать закругления */
  box-shadow: none;   /* Убрать тень */
  transition: opacity 0.14s, transform 0.14s;
}
.garden-buy-img {
  cursor: pointer;
}
.garden-buy-img:hover {
  opacity: 0.88;
  transform: scale(1.07);
}

.plant-modal-content { position:relative; }
.plant-modal-tabs { display:flex; gap:10px; justify-content:center; margin:20px 80px 0px 80px;}
.plant-tab { background:#94603F; color:#F7DAB7; border:none; border-radius:8px; padding:8px 16px; cursor:pointer; font-weight:500;}
.plant-tab.active { background:#FEEDC6; color:#94603F;}
.plant-modal-body { min-height:90px; }
.plant-seed-item { display:flex;align-items:center;gap:0px;justify-content:space-between;padding:8px 0;border-bottom:1px solid #eee;}
.plant-seed-img { width:34px; height:34px; object-fit:contain;}
.plant-seed-name { flex:1; text-align:left; }
.plant-seed-count { font-weight:500; color:#44c158;}
.plant-seed-btn { background:#44c158;color:#fff;border:none;border-radius:7px;padding:7px 16px;font-weight:600;cursor:pointer;}

.garden-cell {
  position: relative;
  overflow: visible; /* Это важно! */
}

.garden-bed-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.collect-btn {
  position: absolute;
  left: 50%;
  top: 27px; /* совпадает с таймером, можно опустить/поднять */
  transform: translateX(-50%);
  z-index: 10;
  background: rgba(34, 34, 34, 0.65); /* мягкий желтоватый фон */
  border-radius: 10px;
  padding: 2px 5px;
  font-size: 8px; /* компактно! */
  color: #fff;
  font-weight: bold;
  min-width: 40px;
  width: auto;
  text-align: center;
  border: none;
  outline: none;
}
.collect-btn:active {
  background: #ffe353;
}

.garden-cell {
  position: relative;
  width: 48px;
  height: 48px;
  overflow: visible; /* Важно! */
  /* остальное оставь как у тебя */
}
.garden-bed-img {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}
.garden-plant-img {
  position: absolute;
  left: 54%; bottom: 13px;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  /* width задаёт JS по stage */
  height: auto;
}
.garden-timer {
  position: absolute;
  top: 27px;         /* подними или опусти, как нужно */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(34, 34, 34, 0.65); /* тёмный фон, если хочешь */
  border-radius: 10px;
  padding: 2px 5px;                  /* делай таймер уже! */
  font-size: 8px;                   /* уменьши размер */
  color: #fff;
  font-weight: bold;
  min-width: 25px;
  width: auto;                       /* не делай ширину 100% */
  text-align: center;
  z-index: 10;
  pointer-events: none;              /* не мешает кликам */
}

.plant-seed-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 карточки в ряд */
  gap: 12px 8px; /* 12px по вертикали, 8px по горизонтали */
  justify-items: center; /* карточки будут по центру */
  margin: 12px 0 0 0;
}

/* Карточка одной культуры (внутри всё вертикально) */
.plant-seed-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 12px 10px 12px;
  background: #926343;
  border-radius: 15px;
  box-shadow: 0 1.5px 8px #0002, 0 2px 0 0 #eac795;
  min-width: 120px;
  max-width: 130px;
}

.plant-seed-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 6px;
}

.plant-seed-name {
  font-weight: bold;
  font-size: 17px;
  margin-bottom: 2px;
}

.plant-seed-yield {
  font-size: 13px;
  color: #EAC795;
  margin-bottom: 3px;
}

.plant-seed-count {
  font-size: 14px;
  margin-bottom: 8px;
}

.plant-seed-btn {
  min-width: 90px;
  padding: 6px 0;
  font-size: 14px;
  border-radius: 10px;
  border: none;
  background: #FEEDC6;
  color: #94603F;
  font-weight: bold;
  cursor: pointer;
  transition: background .18s;
}

.plant-seed-btn[disabled] {
  background: #824d2e8f;
  color: #feedc669;
  cursor: not-allowed;
}

.plant-seed-item.seed-empty {
  opacity: 0.55;
  filter: grayscale(35%);
  /* pointer-events: none;  если нужно чтобы карточка вообще не кликалась */
}

.plant-seed-btn.small {
  min-width: 32px;
  padding: 0;
  font-size: 20px;
  height: 32px;
  width: 32px;
}

/* ================== КОРОВНИК ================== */

.cow-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 10px;
}

.cow-slot {
  background: #926343;
  border-radius: 14px;
  padding: 5px 0px 15px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 120px;
  position: relative;
  border: 5px solid #FAC791;
}
.cow-slot.locked {
  opacity: 0.4;
  filter: grayscale(60%);
}

.cow-status, .cow-timer {
  font-size: 13px;
  margin: 2px 0;
  text-align: center;
}

.cow-feed-btn, .cow-collect-btn, .cow-buy-btn {
  background: linear-gradient(180deg, #EFB582 0%, #F3C283 100%);
  border: 1.5px solid #926343;
  border-radius: 8px;
  color: #926343;
  font-weight: bold;
  font-size: 13px;
  padding: 7px 18px;
  cursor: pointer;
  outline: none;
  transition: 0.13s;
  box-shadow:
    0px 1px 0px #D08D62,
    0px 4px 0px #926343,
    inset 0px 0px 0px #F1CE9A,
    inset 0px 4px 0px #F1CE9A;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cow-feed-btn:active, .cow-collect-btn:active, .cow-buy-btn:active {
  transform: translateY(2px) scale(0.98);
  box-shadow:
    0px 2px 0px #D08D62,
    2px 4px 0px #926343,
    inset -1px 4px 0px #F1CE9A,
    inset 1px 5px 0px #F1CE9A;
}

.cow-buy-inner {
  display: flex;
  align-items: center;
  gap: 7px;
}
.cow-buy-icon {
  width: 18px;
  height: 18px;
  display: block;
}
.cow-buy-price {
  line-height: 1;
  font-size: 15px;
  font-weight: 600;
}

.cow-collect-btn, .cow-feed-btn {
  margin-top: 7px;
}

/* --- Только для гифок и статики коровы, а не для всех img! --- */
.cow-img,
.cow-buy-img {
  width: 90px !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* ================== МОДАЛЬНОЕ ОКНО МАГАЗИНА ================== */
#shop-modal {
  display: none; /* Скрыть модальное окно по умолчанию */
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.75);
}

.shop-modal-content {
  background: #D08D62;
  padding: 20px;
  width: 370px;
  max-width: 90vw;
  border-radius: 25px;
  box-shadow: 0 4px 32px #000b;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shop-modal-title {
  font-size: 24px;
  color: #fff;
  margin-bottom: 20px;
}

.shop-modal-tabs {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.shop-tab {
  background: #926343;
  color: #fff;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
}

.shop-tab.active {
  background: #FEEDC6;
  color: #94603F;
}

/* ================== СТИЛИ ТОВАРОВ ================== */
.shop-items-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.shop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #926343;
  padding: 10px 20px;
  margin-bottom: 0px;
  border-radius: 12px;
  box-shadow: 0 1px 8px #0002;
}

.shop-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.shop-item-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.shop-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.shop-item-name {
  font-weight: bold;
  font-size: 16px;
  color: #F1CE9A;
}

.shop-item-price {
  font-size: 14px;
  color: #fff;
}

.buy-btn {
  min-width: 90px;
  padding: 6px 0;
  font-size: 14px;
  border-radius: 10px;
  border: none;
  background: #FEEDC6;
  color: #94603F;
  font-weight: bold;
  cursor: pointer;
  transition: background .18s;
}

.buy-btn:active {
  transform: translateY(2px) scale(0.98);
  box-shadow: 0px 2px 0px #7C3F18,
    0px 0px 0px 2px #5B2421,
    0px 4px 0px 2px #5B2421;
}

/* ================== ДРУГИЕ СТИЛИ ================== */
#shop-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
}

#shop-close-btn:hover {
  opacity: 0.7;
}

/* ================== МОБИЛЬНАЯ АДАПТАЦИЯ ================== */
@media (max-width: 500px) {
  .shop-modal-content {
    width: 90vw;
    padding: 15px;
  }

  .shop-item {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .buy-btn {
    width: 100%;
    margin-top: 8px;
  }
}

/* ================== Уведомление о покупке ================== */
.purchase-notification {
  position: fixed;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #4CAF50;
  color: white;
  padding: 10px 30px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  opacity: 0;
  animation: showNotification 1s forwards;
  white-space: nowrap; /* Запрещаем перенос текста на новую строку */
  text-overflow: ellipsis; /* Если текст слишком длинный, показываем многоточие */
  overflow: hidden; /* Скрываем текст, который не помещается */
  max-width: 80%; /* Ограничиваем максимальную ширину */
  min-width: 250px; /* Минимальная ширина уведомления */
}

/* Анимация появления уведомления */
@keyframes showNotification {
  0% {
    opacity: 0;
    top: 10px;
  }
  100% {
    opacity: 1;
    top: 35px;
  }
}

.shop-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  justify-content: flex-start;
}
.shop-tab {
  background: #926343;
  color: #fff;
  border-radius: 10px;
  padding: 8px 20px;
  cursor: pointer;
  font-weight: bold;
  border: none;
  outline: none;
  transition: background 0.15s;
}
.shop-tab.active {
  background: #FEEDC6;
  color: #94603F;
}
.coins-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 0px 0;
}
.coin-pack {
  background: #926343;
  border-radius: 15px;
  padding: 10px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 6px #0002;
}
.coin-img {
  width: 54px;
  height: 54px;
  margin-bottom: 5px;
}
.coin-name {
  font-weight: bold;
  font-size: 17px;
  margin-bottom: 6px;
}
.coin-price {
  color: #feedc6;
  font-size: 15px;
  margin-bottom: 10px;
}
.modal-content {
  position: relative;
  width: 400px;
  max-width: 97vw;
  background: #D08D62; /* мягкий светлый фон */
  border-radius: 22px;
  box-shadow: 0 8px 32px rgba(208,141,98,0.18), 0 2px 10px #d8b1782b;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 18px 20px 18px;  /* мягкие паддинги! */
  z-index: 10000;
  box-sizing: border-box;
  transition: box-shadow 0.25s;
}

/* Чтобы сам .modal был всегда по центру */
.modal {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 9999;
  background: rgba(37, 19, 2, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-header-fixed {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-top: 18px;
  padding-bottom: 10px;
}

.shop-title {
  margin: 0 0 8px 0;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  color: #6e471f;
  letter-spacing: 1px;
}

/* Вкладки */
.shop-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 0;
}
.shop-tab {
  background: #94603F;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 14px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.1s;
}
.shop-tab.active {
  background: #fff3dd;
  color: #94603F;
}

.shop-items-list {
  overflow-y: auto;
  padding: 5px 10px 24px 10px;
}

.plant-modal-tabs-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #d08d62;
  padding-bottom: 8px;
  width: 100%;             /* Растянуть на всю ширину */
  left: 0;                 /* Если вдруг position: sticky, пригодится */
  box-sizing: border-box;  /* Чтобы padding не вылезал за пределы */
}

.plant-modal-body {
  max-height: 340px;    /* или сколько надо по макету */
  overflow-y: auto;
  padding: 10px 14px 20px 14px;
}

#plant-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  cursor: pointer;
  background: none;
  border: none;
}

#plant-close-btn img {
  width: 28px;
  height: 28px;
  pointer-events: none; /* чтоб вся зона <span> ловила клик */
}

.modal-content.plant-modal-content {
  display: flex;
  flex-direction: column;
  max-height: 98vh;
  position: relative;
}

.plant-modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #d08d62;
  padding-top: 10px;
  padding-bottom: 4px;
  min-height: 62px; /* чтобы не налазило */
}

#plant-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  cursor: pointer;
}

/* ===== WALLET MODAL ===== */
#wallet-modal {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.75);
}

.wallet-modal-content {
  position: relative;
  width: 350px;
  max-width: 96vw;
  background: #d08d62;
  border-radius: 20px;
  box-shadow: 0 6px 36px rgba(0,0,0,.22);
  padding: 28px 26px 20px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 160px;
  max-height: 420px;
}

.wallet-modal-title {
  font-size: 22px;
  font-weight: 900;
  color: #6e471f;
  letter-spacing: 1px;
  margin-bottom: 18px;
  text-align: center;
}

.wallet-balance-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.wallet-balance-label {
  font-size: 16px;
  color: #fff;
  font-weight: 600;
}

#wallet-balance {
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  margin-left: 0px;
  letter-spacing: 0px;
}

.wallet-address-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  word-break: break-all;
}

.wallet-address-label {
  font-size: 16px;
  color: #fff;
  font-weight: 600;
}

#wallet-address {
  font-size: 14px;
  color: #fff;
  background: #926343;
  border-radius: 8px;
  padding: 5px 10px;
  font-family: monospace;
  letter-spacing: 0.5px;
  margin-right: 6px;
}

.wallet-copy-btn {
  background: #FEEDC6;
  color: #94603F;
  font-weight: bold;
  border-radius: 8px;
  border: none;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.wallet-copy-btn:active {
  background: #ffe9b5;
}

.wallet-actions-row {
  display: flex;
  width: 100%;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}

.wallet-action-btn {
  background: linear-gradient(0deg, #01B372 15.38%, #5ED862 100%);
  border: 2px solid #6EEF71;
  border-radius: 10px;
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  padding: 8px 18px;
  cursor: pointer;
  outline: none;
  margin: 0;
  transition: transform 0.12s;
}
.wallet-action-btn:active {
  transform: translateY(2px) scale(0.98);
}

/* Кнопка закрытия — закреплена сверху */
#wallet-close-btn {
  position: absolute;
  top: 9px;
  right: 10px;
  background: none;
  border: none;
  z-index: 10;
  cursor: pointer;
  padding: 0;
}
#wallet-close-btn img {
  width: 30px;
  height: 30px;
  display: block;
  pointer-events: none;
}

@media (max-width: 500px) {
  .wallet-modal-content {
    width: 96vw;
    padding: 16px 6vw 16px 6vw;
  }
}

/* Блок кошелька — компактно и минимал */
.wallet-modal-content {
  position: relative;
  padding: 28px 0 20px 0;
  border-radius: 18px;
  box-shadow: 0 6px 28px rgba(110,80,40,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wallet-balance-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}

.wallet-balance-row img {
  width: 36px;
  height: 36px;
  display: block;
}

#wallet-balance {
  font-size: 22px;
  font-weight: 900;
  color: #3c3c3c;
}

.wallet-ton-label {
  font-size: 17px;
  color: #2682e9;
  font-weight: bold;
}

.wallet-info-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 240px;
  gap: 13px; /* чуть больше отступ */
  margin: 0 auto 0 auto;
}

.wallet-info-label {
  display: block;
  font-size: 12.5px;
  color: #92815a;
  font-weight: 500;
  margin-bottom: 2px;
  margin-left: 3px;
  letter-spacing: 0.1px;
}

.wallet-info-row {
  display: flex;
  align-items: center;
  background: #f2ecd9;
  border-radius: 9px;
  padding: 7px 9px;
  font-size: 14px;
  color: #262;
  width: 100%;
  gap: 8px;
  margin-bottom: 0px;
}

.wallet-info-text {
  flex: 1 1 auto;
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 82px;
  display: inline-block;
  vertical-align: middle;
}

.copy-btn {
  flex: 0 0 auto;
  margin-left: 6px;
  font-size: 13px;
  padding: 3px 10px;
  background: #f3c285;
  color: #2c425a;
  border: none;
  border-radius: 7px;
  font-weight: 600;
  cursor: pointer;
  transition: background .13s;
}
.copy-btn:active {
  background: #ffe1a2;
  color: #7b4d1c;
}

.wallet-hint {
  font-size: 12px;
  color: #988759;
  opacity: 0.85;
  text-align: left;
  margin: 11px 0 0 0;
  max-width: 240px;
}

.wallet-btn-row {
  display: flex;
  justify-content: center;
  margin: 22px 0 0 0;
  width: 90%;
}
.wallet-btn-row .shop-btn {
  width: 100%;
  max-width: 300px;
  background: linear-gradient(0deg, #01B372 20%, #5ED862 95%);
  border: none;
  font-size: 16px;
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  padding: 12px 0;
  box-shadow: 0 2px 0px #006D3F;
}

.custom-alert {
  z-index: 99999 !important;
}

.nav-item.active[data-page="storage"] {
  border: none !important;
  box-shadow: none !important;
  background: none !important;
  background-color: transparent !important;
  /* Можно добавить ещё цвет текста если надо:
     color: #... !important;
  */
}
.nav-item.active[data-page="quests"] {
  border: none !important;
  box-shadow: none !important;
  background: none !important;
  background-color: transparent !important;
  /* Можно добавить ещё цвет текста если надо:
     color: #... !important;
  */
}
.nav-item.active[data-page="friends"] {
  border: none !important;
  box-shadow: none !important;
  background: none !important;
  background-color: transparent !important;
  /* Можно добавить ещё цвет текста если надо:
     color: #... !important;
  */
}
.nav-item.active[data-page="leaders"] {
  border: none !important;
  box-shadow: none !important;
  background: none !important;
  background-color: transparent !important;
  /* Можно добавить ещё цвет текста если надо:
     color: #... !important;
  */
}

.modal-content.quests-modal-content { background:#fffbea; border-radius:20px; box-shadow:0 8px 42px #0002; min-width:270px; }
.quests-tab { border:none; background:#e2d1a5; border-radius:14px; padding:7px 16px; font-size:14px; font-weight:bold; cursor:pointer; }
.quests-tab.active { background:#ffe065; color:#2c260c; }
.quest-item { transition:opacity 0.2s; }

.shop-item-left {
  display: flex;
  align-items: center; /* Вертикальное выравнивание иконки задания */
  gap: 13px;           /* Меньше расстояние между иконкой и текстом */
}

.shop-item-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}

.shop-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.shop-item-count {
  margin-top: 2px;
  display: flex;
  gap: 10px;   /* Чуть ближе друг к другу */
}

.reward-item {
  display: flex;
  align-items: center;
  gap: 3px;    /* Минимальный отступ между иконкой и цифрой */
}

.reward-icon {
  height: 19px;
  width: 19px;
  display: inline-block;
  margin-right: 0;
  margin-left: 0;
  vertical-align: middle;
}

.battlepass-btn {
  box-sizing: border-box;
  width: 35px;
  height: 35px;
  background: linear-gradient(180deg, #FFC403 38%, #FDA303 100%);
  border: 2.5px solid #FBE11C;
  box-shadow:
    0px 3px 0px #7C3F18,
    0px 4px 0px 1px #5B2421,
    0px 0px 0px 1px #5B2421;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 0px;
  cursor: pointer;
  transition: filter 0.12s;
}
.battlepass-btn:hover {
  filter: brightness(1.09) saturate(1.09);
}
.battlepass-icon {
  width: 22px;
  height: 22px;
  display: block;
  pointer-events: none;
}

#open-market-btn {
  z-index: 10;
  position: fixed;
  right: 18px;      /* отступ от правого края */
  top: 120px;       /* отступ от верхнего края! (измени под себя) */
  z-index: 9001;
  background: linear-gradient(180deg,#fff5db 80%,#f8d397 100%);
  border: 2.5px solid #eac26d;
  border-radius: 15px 15px 15px 15px;
  box-shadow: 0 6px 32px #ecc27921, 0 2px 0 #eac26d;
  padding: 5px 8px 5px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: box-shadow .18s, background .2s;
}
#open-market-btn:hover {
  background: #ffe3ad;
  box-shadow: 0 12px 24px #dfbb6a37;
  border-color: #dab257;
}
@media (max-width: 700px) {
  #open-market-btn {
    right: 10px;
    top: 300px;   /* здесь тоже укажи top вместо bottom */
    padding: 5px 8px 5px 8px;
  }
}

#open-market-btn {
  z-index: 10;
  position: fixed;
}

.modal {
  z-index: 1000 !important; /* или выше, чем у кнопки */
}

#open-riddle-btn {
  z-index: 10;
  position: fixed;
  right: 18px;         /* как у маркета */
  top: 170px;          /* чтобы не налезали друг на друга; сдвинь ниже, если рядом с маркетом */
  background: linear-gradient(180deg,#fff5db 80%,#f7d499 100%);
  border: 2.5px solid #ebc16d;
  border-radius: 15px;
  box-shadow: 0 6px 32px #9deb6e21, 0 2px 0 #e9c36e;
  padding: 5px 8px 5px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: box-shadow .18s, background .2s;
}
#open-riddle-btn:hover {
  background: #e7ffc0;
  box-shadow: 0 12px 24px #c3ff8c37;
  border-color: #7be01e;
}
@media (max-width: 700px) {
  #open-riddle-btn {
    right: 10px;
    top: 260px;    /* чуть ниже market на мобильном */
    padding: 5px 7px 5px 7px;
  }
}
@media (max-width: 700px) {
  #open-spin-btn {
    right: 10px;
    top: 320px;    /* чуть ниже market на мобильном */
    padding: 5px 7px 5px 7px;
  }
}
@media (max-width: 700px) {
  #open-exchange-btn {
    right: 10px;
    top: 380px;    /* чуть ниже market на мобильном */
    padding: 5px 7px 5px 7px;
  }
}

:root {
  /* фирменные цвета VK */
  --vk-blue: #4A76A8;
  --vk-light: #5C94E2;
  --vk-bg: #f3f6fb;
  --vk-text: #1e1e1e;
}

/* Оверлей модалки */
#ambassador-modal {
  background: rgba(0, 0, 0, 0.3);
  z-index: 20000 !important;
}
/* Само окно */
#ambassador-modal .modal-content {
  background: var(--vk-bg);
  border: 1px solid var(--vk-light);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Общие стили для всех «кнопок-градиентов» */
.btn-load-more,
#gift-everyone-btn,
.gift-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 16px auto;
  padding: 10px 0;
  background: linear-gradient(90deg, var(--vk-light), var(--vk-blue));
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background .2s, transform .1s;
}
.btn-load-more:hover,
#gift-everyone-btn:hover,
.gift-btn:hover {
  background: linear-gradient(90deg, var(--vk-blue), var(--vk-light));
  transform: translateY(-1px);
}

/* Кастомный селект в стиле VK */
.custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 160px;
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--vk-light);
  border-radius: 6px;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6' stroke='%23777' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  font-size: 14px;
  color: var(--vk-text);
  cursor: pointer;
  transition: border-color .2s;
}
.custom-select:hover,
.custom-select:focus {
  border-color: var(--vk-blue);
  outline: none;
}

.badge-soon {
  position: absolute;
  top: -15px;
  right: 6px;
  background: linear-gradient(90deg, #ffec89 0%, #ffd142 100%);
  color: #9d7200;
  border-radius: 12px 12px 12px 12px;
  font-size: 8.5px;
  font-weight: 700;
  padding: 1.5px 9px 1.5px 7px;
  box-shadow: 0 1px 4px #ffd14244;
  border: 1.5px solid #fff8e1;
  letter-spacing: 0.3px;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  /* Сделает так, чтобы бейдж работал с position: relative у кнопки */
}

.nav-item {
  position: relative; /* Нужно, чтобы badge позиционировался внутри кнопки */
}

/* ============ СТИЛИ ДЛЯ ОВЧАРНИ ============ */

.sheepfold-sheep-slot {
  background: #926343;
  border-radius: 14px;
  padding: 5px 0px 15px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 120px;
  position: relative;
  border: 5px solid #FAC791;
}
.sheepfold-sheep-slot.locked {
  opacity: 0.4;
  filter: grayscale(60%);
}

.sheepfold-sheep {
  width: 85px;
  margin-bottom: 4px;
  display: block;
}

.sheepfold-sheep-buy {
  width: 60px;
  margin-bottom: 4px;
  opacity: 0.45;
  filter: grayscale(60%);
  display: block;
}

.sheep-status, .sheep-timer {
  font-size: 13px;
  margin: 2px 0;
  text-align: center;
}

/* Кнопки */
.sheepfold-buy-btn,
.sheepfold-feed-btn,
.sheepfold-collect-btn,
.sheep-sell-btn,
.sheep-return-btn {
  background: linear-gradient(180deg, #EFB582 0%, #F3C283 100%);
  border: 1.5px solid #926343;
  border-radius: 8px;
  color: #926343;
  font-weight: bold;
  font-size: 13px;
  padding: 7px 18px;
  cursor: pointer;
  outline: none;
  transition: 0.13s;
  box-shadow:
    0px 1px 0px #D08D62,
    0px 4px 0px #926343,
    inset 0px 0px 0px #F1CE9A,
    inset 0px 4px 0px #F1CE9A;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sheepfold-buy-btn:active,
.sheepfold-feed-btn:active,
.sheepfold-collect-btn:active,
.sheep-sell-btn:active,
.sheep-return-btn:active {
  transform: translateY(2px) scale(0.98);
  box-shadow:
    0px 2px 0px #D08D62,
    2px 4px 0px #926343,
    inset -1px 4px 0px #F1CE9A,
    inset 1px 5px 0px #F1CE9A;
}

/* Внутренности кнопки покупки */
.sheepfold-buy-inner {
  display: flex;
  align-items: center;
  gap: 7px;
}
.sheepfold-buy-icon {
  width: 18px;
  height: 18px;
  display: block;
}
.sheepfold-buy-price {
  line-height: 1;
  font-size: 15px;
  font-weight: 600;
}

/* Кнопка улучшения */
.sheep-upgrade-btn {
  position: absolute;
  top: -16px;
  right: -8px;
  font-size: 13px;
  padding: 2px 12px 2px 10px;
  border-radius: 12px;
  background: #ffd050;
  font-weight: 700;
  border: none;
  box-shadow: 0 2px 6px #0002;
  display: flex;
  align-items: center;
  gap: 5px;
}
.sheep-upgrade-btn img {
  height: 15px;
  vertical-align: middle;
}

/* Для овчарни */
.sheepfold-img {
  width: 106px;
  height: 140px;
  object-fit: contain;
  border-radius: 0;
  background: none;
  box-shadow: none;
  margin-bottom: -5px;
}

/* Стиль сетки овчарни */
#sheepfold-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  justify-content: center;
  padding: 10px 0;
}

/* Ряд построек — центр и равные промежутки */
.buildings-row {
  display: flex;
  justify-content: center;   /* центрируем всю группу */
  align-items: flex-end;      /* выравниваем «по земле» */
  gap: clamp(0px, 0vw, 0px);/* одинаковые интервалы между соседями */
  padding: 20px 0 0px;
  flex-wrap: nowrap;          /* всё в одну строку */
}

/* Блоки конкретных построек — одинаковое поведение контейнеров */
.buildings-row > .chicken-coop,
.buildings-row > .cow-shed,
.buildings-row > .sheepfold,
.buildings-row > .fishery {
  position: relative;
  display: flex;
  align-items: flex-end;  /* картинка «стоит» на одной линии с остальными */
  justify-content: center;
  min-width: 100px;       /* фиксированная «клетка», чтобы gap работал на глаз ровно */
}

/* Унификация размеров гифок построек */
.chicken-coop img,
.cow-shed img,
.sheepfold img,
.fishery img,
.bakery img,              /* если будет пекарня */
.sheepfold-img {          /* твой старый селектор — оставим на всякий случай */
  width: 106px;
  height: 140px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  margin-bottom: -5px;    /* как у тебя было, чтобы «основание» совпало */
}

/* Если используешь облака/иконки над зданиями — центрируем их относительно контейнера */
.building-top-img {
  position: absolute;
  left: 50%;
  bottom: 100%;               /* над зданием */
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}

/* (Опционально) на очень узких экранах разрешим перенос в две строки, но с центровкой и равными интервалами */
@media (max-width: 360px) {
  .buildings-row {
    flex-wrap: wrap;
    row-gap: 14px;
  }
}

/* === Ряд построек: центр, без переноса, минимальные промежутки === */
:root{
  /* подстрой зазор при желании: 2–6px */
  --build-gap: 0px;
  /* целевая максимальная ширина «клетки» одного здания */
  --build-w-max: 106px;
  /* авто-ужатие, чтобы 4 здания всегда влезали по ширине без переноса */
  --build-w: clamp(72px, calc((95vw - 16px - 3*var(--build-gap)) / 4), var(--build-w-max));
  /* поддерживаем исходные пропорции 106x140 */
  --build-h: calc(var(--build-w) * (140 / 106));
}

.buildings-row{
  display: flex;
  justify-content: center;     /* центрируем всю группу */
  align-items: flex-end;        /* «пол» общий для всех гифок */
  gap: var(--build-gap);        /* минимальный зазор между соседями */
  padding: 29px 0px 0px;         /* немного боковых полей, чтобы не липло к краям */
  flex-wrap: nowrap;            /* НИКОГДА не переносим на следующую строку */
  overflow: visible;            /* без горизонтального скролла — мы ужимаем сами здания */
}

/* Контейнеры зданий одинаковой ширины — так gap выглядит ровно */
.buildings-row > .chicken-coop,
.buildings-row > .cow-shed,
.buildings-row > .sheepfold,
.buildings-row > .fishery{
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: var(--build-w);
  min-width: var(--build-w);
}

/* Унификация размеров гифок построек (включая рыболовню) */
.chicken-coop img,
.cow-shed img,
.sheepfold img,
.fishery img,
.bakery img,
.sheepfold-img{
  width: var(--build-w);
  height: var(--build-h);
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  margin-bottom: -5px; /* как у тебя было — «садим» на землю */
  transform: none !important;              /* снимаем любые inline-скейлы */
  transform-origin: center bottom !important;
}

/* Если есть «облачка»/бейджи над зданиями — центрируем их над контейнером */
.building-top-img{
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}

/* На сверхузких экранах всё равно не переносим — просто ужимаем сильнее */
@media (max-width: 340px){
  :root{
    --build-w: clamp(64px, calc((100vw - 16px - 3*var(--build-gap)) / 4), var(--build-w-max));
    --build-h: calc(var(--build-w) * (140 / 106));
  }
}