/* ============================================================
   АРИФМАГИЯ — труппа картинками: фигуры, аватарки, галерея выбора.

   Старые анимации жили внутри SVG (отдельно голова, отдельно ноги).
   У картинки частей нет, поэтому движение делается целой фигурой:
   дыхание, шаг, замах. Для спрайта этого достаточно и читается честно.
   ============================================================ */

.nc {
  display: block;
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;   /* ступни лежат на нижней кромке кадра */
  transform-origin: 50% 100%;       /* и вся анимация крутится от земли */
  -webkit-user-select: none;
  user-select: none;
}

/* дыхание на месте */
.nc--idle { animation: ncBreath 3.6s ease-in-out infinite; }
@keyframes ncBreath {
  0%, 100% { transform: scaleY(1)      translateY(0); }
  50%      { transform: scaleY(1.018)  translateY(-1px); }
}

/* шаг: покачивание с лёгким креном */
.nc--walk { animation: ncWalk 0.62s ease-in-out infinite; }
@keyframes ncWalk {
  0%, 100% { transform: translateY(0)    rotate(-1.6deg); }
  50%      { transform: translateY(-5px) rotate(1.6deg); }
}

/* замах заклинанием — один проход */
.nc--cast { animation: ncCast 0.9s cubic-bezier(.3,.9,.3,1) 1; }
@keyframes ncCast {
  0%   { transform: rotate(0)       scale(1); }
  22%  { transform: rotate(-7deg)   scale(.97); }
  48%  { transform: rotate(5deg)    scale(1.06); }
  100% { transform: rotate(0)       scale(1); }
}

/* получил по лбу — мигает */
.nc--hit { animation: ncHit 0.4s steps(1) 2; }
@keyframes ncHit {
  0%, 100% { opacity: 1; filter: none; }
  50%      { opacity: .45; filter: brightness(1.9) saturate(.4); }
}

.nc--win { animation: ncWin 1.6s ease-in-out infinite; }
@keyframes ncWin {
  0%, 100% { transform: translateY(0)    rotate(-1deg); }
  50%      { transform: translateY(-9px) rotate(1deg); }
}

.nc--flip { transform: scaleX(-1); }

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

/* ------------------------------------------------------------
   Аватарка: окно, в котором фигура сдвинута так, чтобы в кадр
   попало лицо. Координаты считает mq/heads.json.
   ------------------------------------------------------------ */
.nc-face {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  background: var(--nk-pri-0, #F3EEFF);
  flex: none;
}
.nc-face img { position: absolute; max-width: none; }

/* ------------------------------------------------------------
   Галерея выбора
   ------------------------------------------------------------ */
/* Цвета тут заданы числом, а не токенами темы: --nk-surface на сайте
   тёмно-синий (#101C32), и ячейки на кремовом экране ушли в чёрные
   квадраты. Экран конструктора кремовый — значит и плашки светлые. */
.nc-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex: 1 1 auto;   /* .mq-maker — флекс-колонка, забираем её высоту целиком */
  min-height: 0;
  padding: 2px;
  box-sizing: border-box;
}

/* выбранный крупно */
.nc-pick__show {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  position: relative;
}
/* растягиваем абсолютом, а вписывает и центрирует object-fit. Через
   height:100% в grid картинка снова взяла бы натуральные 800 px и вылезла
   за экран — те же схлопнутые проценты, что и в бою. */
.nc-pick__show > .nc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 10px 16px rgba(45, 27, 69, .28));
}
.nc-pick__show::after {            /* тень на земле, чтобы фигура стояла */
  content: ''; position: absolute; left: 50%; bottom: -4px;
  transform: translateX(-50%);
  width: 92px; height: 13px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(45,27,69,.34), rgba(45,27,69,0) 72%);
}
.nc-pick__cap {
  font: 700 15px/1 var(--nk-body, system-ui), sans-serif;
  color: #5836BD;
  flex: none;
}

.nc-pick__grid {
  flex: none;
  display: grid;
  gap: 8px;
  width: 100%;
}
.nc-pick--hero .nc-pick__grid { grid-template-columns: repeat(4, 1fr); }
.nc-pick--pet  .nc-pick__grid { grid-template-columns: repeat(6, 1fr); }

.nc-pick__cell {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 5px 3px 3px;
  border: none;
  border-radius: 18px;
  background: #FFFDF8;
  box-shadow: inset 0 0 0 2px rgba(45, 27, 69, .10);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  -webkit-tap-highlight-color: transparent;
}
.nc-pick__cell img {
  display: block;
  width: auto;
  height: 60px;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
}
.nc-pick--pet .nc-pick__cell img { height: 46px; }

.nc-pick__cell[aria-pressed="true"] {
  transform: translateY(-3px);
  background: #F6F0FF;
  box-shadow: inset 0 0 0 3px #7B4FF2, 0 8px 18px -6px rgba(123, 79, 242, .45);
}
.nc-pick__cell:active { transform: translateY(0); }

@media (max-height: 680px) {
  .nc-pick__cell img { height: 48px; }
  .nc-pick--pet .nc-pick__cell img { height: 40px; }
}

/* ------------------------------------------------------------
   Мостик к старой вёрстке. Блок «ГЕРОЙ РИСУЕТСЯ КОДОМ» в
   nooka-mq.css написан под встроенный <svg>; труппа кладёт в те же
   обёртки <img class="nc">. Повторяем для него те же правила —
   размеры и свечение задаёт обёртка, а не сама фигура.
   ------------------------------------------------------------ */
/* Высоту фигурам задаём числом, а не процентом. Проценты тут не работают:
   обёртки — grid с place-items, их строка меряется по содержимому, высота
   зацикливается и схлопывается в натуральные 800 px (герой вылезал за
   экран). Абсолют высоту чинит, но тогда обёртка с width:auto схлопывается
   по ширине в ноль. Поэтому высота явная, а ширину картинка берёт сама по
   своей пропорции. Числа — те же, что у обёрток в nooka-mq.css. */
.mq-player__art--svg > .nc { height: 118px; }
.mq-unit__art--svg   > .nc { height: 124px; }
.mq-unit--pet  .mq-unit__art--svg > .nc { height: 76px; }
.mq-unit--boss .mq-unit__art > .nc      { height: 142px; }
.mq-walk__hero--svg  > .nc { height: 92px; }

.mq-player__art--svg > .nc, .mq-unit__art--svg > .nc, .mq-walk__hero--svg > .nc {
  display: block; width: auto; object-fit: contain; object-position: bottom center;
}

@media (max-height: 680px) {
  .mq-player__art--svg > .nc { height: 96px; }
  .mq-unit__art--svg   > .nc { height: 104px; }
  .mq-unit--boss .mq-unit__art > .nc { height: 118px; }
}
.mq-me__art--svg > .nc-face { height: 100% !important; width: 100% !important; border-radius: 50%; }

.mq-unit__art--me > .nc {
  filter: drop-shadow(0 0 14px var(--tint, #9B6BE0)) drop-shadow(0 7px 12px rgba(20,10,30,.5));
}
.mq-player__art--svg > .nc {
  filter: drop-shadow(0 0 12px var(--tint, #9B6BE0)) drop-shadow(0 6px 10px rgba(20,10,30,.45));
}
.mq-win__svg > .nc { height: 150px; width: auto; filter: drop-shadow(0 8px 16px rgba(45,27,69,.3)); }

/* конструктор: фигура-превью над галереей */
.mq-maker .nc { height: 100%; max-height: 220px; width: auto; margin: 0 auto; }

/* ------------------------------------------------------------
   Тень под бойцами. На сцене-ходилке она есть (.mq-fig::after), а в
   бою фигуры стояли без неё и читались парящими — ровно та претензия,
   из-за которой персонажей вообще переделывали. Эллипс сажает их на
   землю; врагу он мягче, он дальше по сцене.
   ------------------------------------------------------------ */
.mq-unit__art { position: relative; }
.mq-unit__art::after {
  content: ''; position: absolute; left: 50%; bottom: -2px;
  transform: translateX(-50%);
  width: 70%; height: 10px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(20,10,30,.42), rgba(20,10,30,0) 72%);
  pointer-events: none;
}
.mq-unit--foe .mq-unit__art::after { width: 62%; height: 8px; opacity: .8; }
.mq-unit--boss .mq-unit__art::after { width: 76%; height: 13px; }
.mq-unit--pet .mq-unit__art::after { width: 58%; height: 7px; }