/* ============================================================
   АРИФМАГИЯ — сумка в бою: три предмета одним рядом.
   Цели не меньше 44 px: это детский палец, а не мышь.
   ============================================================ */
/* flex: none обязателен: панель боя — флекс-колонка, и при открытой
   задаче на низком экране ряд предметов сжимался до нулевой высоты.
   Стёклышко и Орешки нужны именно в этот момент, так что исчезать
   сумке нельзя. */
.bag { display: flex; gap: 8px; justify-content: center; flex: none; }

.bag__it {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 62px; min-height: 52px; padding: 5px 8px 4px;
  border: none; border-radius: 16px;
  background: #FFFDF8;
  box-shadow: inset 0 0 0 2px rgba(45,27,69,.10), 0 3px 0 rgba(45,27,69,.10);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .1s, box-shadow .1s;
}
.bag__it:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px rgba(45,27,69,.10); }

.bag__ico { display: block; width: 26px; height: 26px; }
.bag__ico svg { width: 100%; height: 100%; display: block; }

.bag__nm { font: 700 10px/1 var(--nk-body, system-ui), sans-serif; color: #6B5680; }

/* счётчик — поверх угла, чтобы не удлинять плашку */
.bag__n {
  position: absolute; top: -5px; right: -4px;
  min-width: 18px; padding: 1px 5px;
  border-radius: 999px;
  background: #7B4FF2; color: #fff;
  font: 900 11px/1.5 var(--nk-display, system-ui), sans-serif;
  box-shadow: 0 2px 6px -2px rgba(45,27,69,.5);
}

/* «нет» показываем приглушением, а не исчезновением: предмет должен
   оставаться на виду, иначе ребёнок не узнает, что он вообще бывает */
.bag__it.is-off { opacity: .42; cursor: default; }
.bag__it.is-off .bag__n { background: #A797B8; }

/* реплика питомца над панелью */
.bag-say {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 6px; padding: 8px 10px;
  border-radius: 16px;
  background: #E6FAF0;
  box-shadow: inset 0 0 0 2px rgba(31,167,110,.22);
  font: 700 14px/1.3 var(--nk-body, system-ui), sans-serif; color: #15704C;
}
.bag-say img { height: 34px; width: auto; flex: none; object-fit: contain; }

@media (max-height: 680px) {
  .bag__it { min-height: 46px; min-width: 56px; }
  .bag__ico { width: 22px; height: 22px; }
}

/* ------------------------------------------------------------
   КАЛИБРОВКА ПОД ПАЛЕЦ (правка по замечанию «неудобно нажимать»)

   Предметы были 62×52 с подписью в 10 px и гасли почти в прозрачность —
   на экране ноутбука это читалось как сломанная серая полоска, а не как
   три кнопки. Делаем их крупнее минимально нужного (48 px — предел для
   детского пальца), подписи различимыми, а выключенные — приглушёнными,
   но не исчезающими: ребёнок должен видеть, что предмет вообще есть.
   ------------------------------------------------------------ */
.bag { gap: 10px; padding: 2px 0 1px; }

.bag__it {
  min-width: 76px; min-height: 60px;
  padding: 7px 10px 6px;
  gap: 3px;
  border-radius: 18px;
  box-shadow: inset 0 0 0 2px rgba(45,27,69,.12), 0 3px 0 rgba(45,27,69,.12);
}
.bag__ico { width: 30px; height: 30px; }
.bag__nm  { font-size: 11.5px; font-weight: 800; color: #5A4770; }

.bag__n {
  top: -6px; right: -5px;
  min-width: 20px; padding: 1px 6px;
  font-size: 12px;
}

/* доступный предмет выделяется, а не просто «не серый» */
.bag__it:not(.is-off) {
  background: #FFFBEF;
  box-shadow: inset 0 0 0 2px rgba(232,174,31,.45), 0 3px 0 rgba(212,162,43,.35);
}
.bag__it.is-off { opacity: .55; }

@media (max-height: 680px) {
  .bag__it { min-height: 52px; min-width: 68px; padding: 5px 8px 4px; }
  .bag__ico { width: 25px; height: 25px; }
  .bag__nm { font-size: 10.5px; }
}