/* ============================================================
   АРИФМАГИЯ — головоломки: переправа и корзины.

   Крупные цели под детский палец (минимум 44 px), одно действие за
   раз, и видимое число всегда рядом с предметом — ребёнку не нужно
   держать веса в голове, он должен их складывать.
   ============================================================ */

.pz {
  display: flex; flex-direction: column;
  gap: 10px;
  flex: 1 1 auto; min-height: 0;
  padding: 0 14px 10px;
  box-sizing: border-box;
  color: #2D1B45;
}

/* ---------- весы сверху: сколько набрано из скольких ---------- */
.pz__head { flex: none; }
.pz__scale {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  font-family: var(--nk-display, system-ui), sans-serif;
}
.pz__scale-now { font-size: 38px; font-weight: 900; line-height: 1; color: #1FA76E; }
.pz__scale-of  { font-size: 17px; font-weight: 700; color: #6B5680; }
.pz__scale--over .pz__scale-now { color: #D94A34; }

.pz__bar {
  margin-top: 6px; height: 12px; border-radius: 999px;
  background: #EFE6FF; overflow: hidden;
}
.pz__bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #7CECB5, #4ED99B);
  transition: width .18s ease-out;
}
.pz__scale--over + .pz__bar > i { background: linear-gradient(90deg, #FF9A86, #FF7A64); }

/* ---------- река: берег — лодка — берег ---------- */
/* Все три полосы — по содержимому, иначе лодка (единственная 1fr)
   раздувалась на пол-экрана и выдавливала кнопку «Отплыть» за край.
   Лишнюю высоту забирает сам .pz__river, а не одна из полос. */
.pz__river {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.pz__shore, .pz__boat { flex: none; }
.pz__shore, .pz__boat {
  border-radius: 20px; padding: 8px 10px 10px;
  background: #FFFDF8;
  box-shadow: inset 0 0 0 2px rgba(45,27,69,.08);
}
.pz__boat {
  background: linear-gradient(180deg, #F3EEFF, #E4D9FF);
  box-shadow: inset 0 0 0 2px rgba(123,79,242,.28);
}
.pz__shore--b { background: #F2FBF6; box-shadow: inset 0 0 0 2px rgba(31,167,110,.2); }

.pz__lbl {
  display: block; margin-bottom: 6px;
  font: 700 12px/1 var(--nk-body, system-ui), sans-serif;
  letter-spacing: .04em; text-transform: uppercase; color: #A797B8;
}
.pz__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 48px; }
.pz__empty { font: 600 14px/1 var(--nk-body, system-ui), sans-serif; color: #A797B8; }

/* ---------- мешок ---------- */
.pz__bag {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 52px; min-height: 48px; padding: 6px 10px;
  border: none; border-radius: 16px;
  background: linear-gradient(180deg, #FFF1B4, #FFD84D);
  box-shadow: 0 4px 0 #E8AE1F, 0 8px 14px -6px rgba(232,174,31,.5);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .1s, box-shadow .1s;
}
.pz__bag:active { transform: translateY(3px); box-shadow: 0 1px 0 #E8AE1F; }
.pz__bag-w   { font: 900 19px/1 var(--nk-display, system-ui), sans-serif; color: #2D1B45; }
.pz__bag-sub { font: 700 11px/1.2 var(--nk-body, system-ui), sans-serif; color: #6B5680; margin-top: 3px; }
.pz__bag.is-on { box-shadow: 0 0 0 3px #7B4FF2, 0 8px 18px -6px rgba(123,79,242,.5); transform: translateY(-2px); }
.pz__bag--done {
  background: #D7F3E5; box-shadow: none; cursor: default; opacity: .9;
}

/* ---------- кто в лодке ---------- */
.pz__crew { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 8px; }
.pz__who {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: none; background: none; padding: 0; cursor: default;
}
.pz__who img { height: 54px; width: auto; object-fit: contain; object-position: bottom center; display: block; }
.pz__who em {
  font: 900 14px/1 var(--nk-display, system-ui), sans-serif; font-style: normal;
  color: #5836BD; background: #fff; border-radius: 999px; padding: 2px 8px;
  box-shadow: 0 2px 6px -2px rgba(45,27,69,.3);
}
.pz__who--pet { cursor: pointer; opacity: .42; filter: grayscale(.7); -webkit-tap-highlight-color: transparent; }
.pz__who--pet.is-in { opacity: 1; filter: none; }

/* ---------- подпись и кнопка ---------- */
.pz__foot { flex: none; display: flex; flex-direction: column; gap: 8px; }
/* ============================================================
   ПИРАМИДА ЧИСЕЛ
   Кирпичи рядами, сверху вниз. Пустая ячейка видна как ячейка:
   пунктир и знак вопроса, чтобы ребёнок понял, куда класть.
   ============================================================ */
/* Пирамида, подсказка и запас чисел — один блок наверху, а не три острова
   с провалами между ними: на телефоне взгляд не должен прыгать через
   пустой экран от кирпичей к числам. */
.pz--pyr { display: flex; flex-direction: column; gap: 10px; justify-content: flex-start; }
.pz__pyr {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px;
  justify-content: flex-start; padding: 10px 0 2px;
}
.pz--pyr .pz__say { margin-top: 2px; }
.pz--pyr .pz__pool { margin-top: 0; }
.pz__pyr-row { display: flex; gap: 8px; justify-content: center; }
.pz__brick {
  min-width: 62px; height: 52px; padding: 0 10px;
  border: 0; border-radius: 12px; background: #EADBC0; color: #4A3726;
  font: 900 20px/1 var(--nk-body, system-ui), sans-serif;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.08);
}
.pz__brick:disabled { opacity: 1; }
.pz__brick--slot { background: #FFF8EA; border: 2px dashed #D9C19A; color: #B99C6E; }
.pz__brick--slot.is-empty { color: #C9AF86; }
.pz__brick--slot.is-wait { border-color: #7A5CA8; color: #7A5CA8; animation: pz-wait 1s ease-in-out infinite; }
@keyframes pz-wait { 50% { transform: translateY(-2px); } }
.pz--won .pz__brick { background: #D9F0DC; color: #1F6B3B; }

/* ПРАВИЛО МЕСТА СЛОВАМИ — первая строка головоломки.
   Светлая плашка, читается до того, как ребёнок начнёт тыкать. */
.pz__goal {
  flex: none;
  margin: 0 0 8px; padding: 9px 12px;
  background: #FFF6E3; border: 1px solid #F0DCB4; border-radius: 12px;
  font: 500 13.5px/1.42 var(--nk-body, system-ui), sans-serif; color: #5A4636;
  text-align: left;
}
.pz__goal b { font-weight: 800; color: #3E2F22; }

.pz__say {
  margin: 0; text-align: center;
  font: 700 15px/1.3 var(--nk-body, system-ui), sans-serif; color: #6B5680;
  min-height: 20px;
}
.pz__say--ok { color: #1FA76E; }
.pz__say--no { color: #D94A34; }
.pz__go:disabled { opacity: .45; }

/* ---------- корзины ---------- */
.pz--basket { gap: 12px; }
.pz__baskets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pz--basket .pz__baskets:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }

.pz__basket {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 108px; padding: 10px 6px;
  border: none; border-radius: 20px;
  background: #FFFDF8;
  box-shadow: inset 0 0 0 2px rgba(45,27,69,.10);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pz__basket-need { font: 700 12px/1 var(--nk-body, system-ui), sans-serif; color: #A797B8; }
.pz__basket-in   { font: 700 13px/1.25 var(--nk-body, system-ui), sans-serif; color: #6B5680; flex: 1 1 auto; }
.pz__basket-sum  { font: 900 24px/1 var(--nk-display, system-ui), sans-serif; color: #2D1B45; }
.pz__basket.is-ok   { background: #E6FAF0; box-shadow: inset 0 0 0 3px #4ED99B; }
.pz__basket.is-ok   .pz__basket-sum { color: #1FA76E; }
.pz__basket.is-over { background: #FFEDE8; box-shadow: inset 0 0 0 3px #FF7A64; }
.pz__basket.is-over .pz__basket-sum { color: #D94A34; }

.pz__pool { background: #FFFDF8; border-radius: 20px; padding: 8px 10px 10px;
            box-shadow: inset 0 0 0 2px rgba(45,27,69,.08); }

/* победа — короткий кивок всей доски */
.pz--won { animation: pzWon .5s ease-out 1; }
@keyframes pzWon {
  0% { transform: scale(1); } 40% { transform: scale(1.02); } 100% { transform: scale(1); }
}

@media (max-height: 680px) {
  .pz__scale-now { font-size: 30px; }
  .pz__who img { height: 44px; }
  .pz__bag { min-height: 44px; min-width: 48px; }
  .pz__basket { min-height: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .pz--won { animation: none; }
  .pz__bar > i { transition: none; }
}

/* ------------------------------------------------------------
   Кнопка головоломки в землях и экран под неё
   ------------------------------------------------------------ */
.mq-btn--pz {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; line-height: 1.2; padding: 12px 18px;
  border-radius: 18px;
}
.mq-btn--pz b { font-size: 16px; }
.mq-btn--pz small { font-size: 12px; opacity: .72; font-weight: 700; }
.mq-btn--pz.is-done { opacity: .72; }

.mq-sc--puzzle { display: flex; flex-direction: column; }
.mq-puzzlewrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* фон локации под головоломкой притушен: считать поверх пёстрой
   картинки тяжело, а место узнаётся и так */
.mq-sc--puzzle > .mq-place__bg { filter: blur(6px) brightness(.55) saturate(.8); transform: scale(1.06); }
.mq-sc--puzzle::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: rgba(255,244,228,.9);
}
.mq-sc--puzzle > *:not(.mq-place__bg) { position: relative; z-index: 2; }
.mq-sc--puzzle .mq-head--over { color: #2D1B45; text-shadow: none; }
.mq-sc--puzzle .mq-hint {
  margin: 0 14px 8px; padding: 9px 13px;
  background: #FFFDF8;
  box-shadow: inset 0 0 0 2px rgba(45,27,69,.08);
  border-radius: 16px;
  color: #4A3663; font-size: 13px; line-height: 1.38; font-weight: 600;
  text-shadow: none;
}

/* ------------------------------------------------------------
   КАЛИБРОВКА БОЯ (по замечанию «неудобно нажимать»)
   ------------------------------------------------------------ */

/* При нечётном числе заклинаний последнее висело половинкой в пустом
   ряду. Растягиваем его на обе колонки — ряд всегда ровный. */
.mq-spells > .mq-spell:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Кнопки заклинаний пониже не бывают: 54 px — это уже край для пальца,
   поднимаем до 60 и даём описанию дышать. */
.mq-spell { min-height: 60px; padding: 9px 12px 9px 50px; }
.mq-spell__name { font-size: 16px; }
.mq-spell__how  { font-size: 12px; line-height: 1.25; }

/* Сцена и панель делили экран почти пополам, и персонажи выходили
   мелкими. Отдаём сцене больше, панель поджимаем — она всё равно
   состоит из крупных целей. */
.mq-fight__panel { padding-top: 6px; }
.mq-fight__foes  { padding-bottom: 2px; }

/* Фигуры поднимаем ВМЕСТЕ с их обёртками — поднять только картинку
   нельзя: обёртка держит имя и полоску здоровья, и подпись уезжала
   под панель. Размер скромный: на сцену (между шапкой и панелью)
   приходится около 320 px на двоих вместе с именами и бейджами, и
   при 148 px герой налезал на подпись кляксы. */
@media (min-height: 700px) {
  .mq-unit__art--svg  { height: 132px !important; }
  .mq-unit__art--svg          > .nc { height: 132px; }
  .mq-unit--boss .mq-unit__art      { height: 150px !important; }
  .mq-unit--boss .mq-unit__art > .nc { height: 150px; }
  .mq-unit--foe  .mq-unit__art      { height: 126px !important; width: auto !important; }
  .mq-unit--foe  .mq-unit__art img  { height: 100%; width: auto; object-fit: contain;
                                      object-position: bottom center; }
  .mq-unit--pet .mq-unit__art--svg      { height: 82px !important; }
  .mq-unit--pet .mq-unit__art--svg > .nc { height: 82px; }
}
}