/* ============================================================
   АРИФМАГИЯ — облик. Мир Nooka: тёплая бумага, Nunito,
   крупные формы. Персонажи и земли — рисованный арт, а не
   фигуры из кода: кружки из SVG для 1–8 класса читались убого.

   Зашито намеренно:
   · на html/body только overflow-x: clip — hidden ломает липкий футер
   · экран держит height + overflow:hidden, скроллится внутренний блок
   · [hidden] с !important — display:grid иначе его перебивает
   · на каждом экране есть достижимая кнопка
   · проверено на 360×600 и на ноутбуке
   ============================================================ */

html, body { overflow-x: clip; }
.mq [hidden], .mq-sheet[hidden] { display: none !important; }

.mq-body {
  margin: 0;
  background: #FFF4E4;
  color: #2D1B45;
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;

  /* стихии = действия: по цвету ребёнок узнаёт тип задачи */
  --add:  #2E9D6B;  --add-bg:  #C9F4DE;
  --sub:  #D8552F;  --sub-bg:  #FFD9CC;
  --mul:  #6B4BE0;  --mul-bg:  #E6DEFF;
  --div:  #1F7FB8;  --div-bg:  #CFE6F2;
  --frac: #B07400;  --frac-bg: #FFEFB8;
  --eq:   #A32F86;  --eq-bg:   #FFDDF2;

  --ink: #2D1B45;  --ink-2: #6B5B80;
  --paper: #FFF4E4; --card: #FFFFFF; --line: #EADFCB;
  --star: #FFC63F;
  --r: 18px; --r-s: 12px;
  --shadow: 0 2px 0 rgba(45,27,69,.10), 0 10px 24px rgba(45,27,69,.08);
}

.mq { position: relative; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }

.mq-sc {
  position: relative;
  flex: 1 1 auto;
  height: 100dvh; max-height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column;
  padding: max(14px, env(safe-area-inset-top)) 16px 0;
  box-sizing: border-box;
}

.mq-head { display: flex; align-items: center; gap: 9px; min-height: 42px; flex: 0 0 auto; }
.mq-head h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.2px; flex: 1 1 auto; }
.mq-head--over { position: relative; z-index: 3; color: #fff; text-shadow: 0 2px 12px rgba(20,10,30,.6); }

.mq-back, .mq-icobtn {
  flex: 0 0 auto; width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--card); color: var(--ink);
  font-size: 20px; font-weight: 800;
  box-shadow: var(--shadow); cursor: pointer;
}
.mq-back:active, .mq-icobtn:active { transform: translateY(1px); }

.mq-note { margin: 6px 0 10px; color: var(--ink-2); font-size: 15px; line-height: 1.45; flex: 0 0 auto; }

.mq-foot {
  margin-top: auto; flex: 0 0 auto;
  position: sticky; bottom: 0;
  padding: 10px 0 max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--paper) 58%, rgba(255,244,228,0));
  display: flex; flex-direction: column; gap: 8px;
}

.mq-btn {
  min-height: 48px; border: 0; border-radius: var(--r);
  background: var(--ink); color: #FFF8EC;
  font-family: inherit; font-size: 17px; font-weight: 800; letter-spacing: -.1px;
  box-shadow: 0 3px 0 rgba(45,27,69,.35); cursor: pointer; padding: 0 18px;
}
.mq-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(45,27,69,.35); }
.mq-btn--big { font-size: 18px; min-height: 52px; }
.mq-btn--ghost { background: transparent; color: var(--ink-2); box-shadow: none; font-size: 15px; min-height: 44px; font-weight: 700; }

/* ============================================================
   ЗАСТАВКА
   ============================================================ */
.mq-sc--intro { padding-left: 0; padding-right: 0; justify-content: flex-end; }
.mq-intro__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.mq-sc--intro::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(20,10,30,.25) 0 30%, rgba(26,14,38,.72) 72%, #1A0E26 100%);
}
.mq-intro__in { position: relative; z-index: 2; margin-top: auto; padding: 0 20px; text-align: center; color: #fff; }
.mq-intro__title {
  margin: 0 0 10px;
  font-size: clamp(32px, 10vw, 42px);
  font-weight: 900; letter-spacing: -1.2px;
  text-shadow: 0 4px 22px rgba(0,0,0,.55);
}
.mq-intro__sub {
  margin: 0 auto; max-width: 340px;
  font-size: 14.5px; line-height: 1.5;
  color: rgba(255,255,255,.9);
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.mq-intro__sub b { color: var(--star); }
.mq-sc--intro .mq-foot {
  position: relative; z-index: 2;
  background: none; padding: 20px 20px max(18px, env(safe-area-inset-bottom));
}
.mq-sc--intro .mq-btn { background: var(--star); color: #2D1B45; box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.mq-sc--intro .mq-btn--ghost { background: none; color: rgba(255,255,255,.7); box-shadow: none; }

/* ============================================================
   ВЫБОР ГЕРОЯ
   ============================================================ */
.mq-picks {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  align-content: start; padding-bottom: 8px;
}
.mq-pick {
  border: 0; background: transparent; padding: 4px 2px 8px;
  font-family: inherit; color: var(--ink); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.mq-pick__art {
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  overflow: hidden; position: relative;
  background: #F6EDDD;
  box-shadow: 0 0 0 3px var(--card), 0 4px 14px rgba(45,27,69,.14);
  transition: box-shadow .16s ease, transform .16s ease;
}
.mq-pick__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mq-pick--on .mq-pick__art {
  box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--tint, var(--star)), 0 6px 18px rgba(45,27,69,.2);
  transform: translateY(-2px);
}
.mq-pick__name { font-size: 13px; font-weight: 900; }
.mq-pick__sub { font-size: 10.5px; font-weight: 700; color: var(--ink-2); text-align: center; line-height: 1.25; }

.mq-field { display: block; }
.mq-field span {
  display: block; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-2); margin: 0 0 6px;
}
.mq-field input {
  width: 100%; box-sizing: border-box; min-height: 46px;
  border: 2px solid var(--line); border-radius: var(--r-s);
  background: var(--card); color: var(--ink);
  font-family: inherit; font-size: 18px; font-weight: 700; padding: 0 14px;
}
.mq-field input:focus { outline: none; border-color: var(--ink); }

/* ============================================================
   КЛАСС
   ============================================================ */
.mq-grades {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  align-content: start; padding-bottom: 20px;
}
.mq-grade {
  min-height: 70px; border: 2px solid var(--line); border-radius: var(--r);
  background: var(--card); color: var(--ink); font-family: inherit;
  text-align: left; padding: 10px 12px; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow);
}
.mq-grade b { font-size: 17px; font-weight: 900; }
.mq-grade span { font-size: 12px; color: var(--ink-2); line-height: 1.3; }
.mq-grade[aria-pressed="true"] { border-color: var(--ink); background: var(--add-bg); }
.mq-grade:active { transform: translateY(1px); }

/* ============================================================
   ЧИСЛОГРАД
   ============================================================ */
.mq-sc--town { padding-left: 0; padding-right: 0; }
/* Подложка и карта в рамке — одна и та же картинка. Пока она была мелкой,
   фон сам по себе читался размытым; с детальной текстурой площадь стала
   видна дважды и выглядела ошибкой. Размываем и приглушаем подложку: она
   даёт атмосферу, а чёткая карта в рамке остаётся единственным объектом. */
.mq-town__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  filter: blur(7px) saturate(.85) brightness(.62);
  transform: scale(1.08);   /* размытие съедает края — перекрываем запасом */
}
/* точки стоят в процентах от картинки, поэтому сама картинка внутри карты
   показывается целиком — иначе кадрирование уводит метки с домов в небо */
.mq-town__map::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  aspect-ratio: 900 / 522;
  background: url(mq/town.webp) center/cover no-repeat;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(20,10,30,.5);
}
.mq-sc--town::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(20,10,30,.5) 0 16%, rgba(20,10,30,.06) 40%, rgba(20,10,30,.72) 100%);
}
.mq-sc--town > .mq-head { margin: 0 16px; }

.mq-me { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mq-me__art {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 0 0 4px var(--tint, var(--star));
  background: #F6EDDD;
}
.mq-me__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mq-me__txt { min-width: 0; }
.mq-me__name { display: block; font-size: 16px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; }
.mq-me__lv { display: block; font-size: 12px; font-weight: 700; opacity: .85; }

.mq-town__map { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; margin: 0 8px; }
.mq-town__inner { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); aspect-ratio: 900 / 522; }
.mq-pin {
  position: absolute; transform: translate(-50%, -50%);
  border: 0; background: transparent; padding: 4px;
  font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 44px; min-height: 44px;
}
.mq-pin__dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--star);
  box-shadow: 0 0 0 4px rgba(255,198,63,.3), 0 2px 8px rgba(0,0,0,.4);
  animation: mq-pulse 2.2s ease-in-out infinite;
}
@keyframes mq-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,198,63,.3), 0 2px 8px rgba(0,0,0,.4); }
  50%      { box-shadow: 0 0 0 9px rgba(255,198,63,.14), 0 2px 8px rgba(0,0,0,.4); }
}
@media (prefers-reduced-motion: reduce) { .mq-pin__dot { animation: none; } }
.mq-pin__lbl {
  background: rgba(255,248,236,.95); color: var(--ink);
  border-radius: 999px; padding: 5px 11px;
  font-size: 13px; font-weight: 900; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(20,10,30,.3);
  display: flex; flex-direction: column; align-items: center; line-height: 1.15;
}
.mq-pin__lbl small { font-size: 10px; font-weight: 700; color: var(--ink-2); }
.mq-pin:active .mq-pin__lbl { transform: translateY(1px); }

.mq-town__foot {
  position: relative; z-index: 2; flex: 0 0 auto;
  padding: 0 16px max(14px, env(safe-area-inset-bottom));
}

.mq-speech {
  background: var(--card); border-radius: var(--r);
  padding: 11px 13px; font-size: 14.5px; line-height: 1.48;
  box-shadow: var(--shadow); flex: 0 0 auto;
}
.mq-speech b { font-weight: 900; }
.mq-speech__who {
  display: block; font-size: 11.5px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-2); margin-bottom: 4px;
}

/* ============================================================
   ЗЕМЛИ
   ============================================================ */
.mq-sc--land { padding: 0; }
.mq-land__list { display: flex; flex-direction: column; height: 100%; padding: max(14px, env(safe-area-inset-top)) 16px 0; box-sizing: border-box; }
.mq-lands {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; gap: 9px; align-content: start;
  padding: 12px 0 max(16px, env(safe-area-inset-bottom));
}
.mq-land {
  display: flex; border: 0; padding: 0; border-radius: var(--r);
  background: var(--card); box-shadow: var(--shadow); overflow: hidden;
  text-align: left; font-family: inherit; color: var(--ink);
  cursor: pointer; min-height: 96px;
}
.mq-land:active { transform: translateY(1px); }
.mq-land__pic { flex: 0 0 88px; background: var(--line) center/cover no-repeat; }
.mq-land__txt { padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mq-land__name { font-size: 16.5px; font-weight: 900; letter-spacing: -.2px; }
.mq-land__sub { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
.mq-land__tag {
  align-self: flex-start; margin-top: 4px;
  font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  background: var(--add-bg); color: var(--add);
}
.mq-land--locked { opacity: .55; cursor: default; }
.mq-land--locked .mq-land__tag { background: var(--line); color: var(--ink-2); }
.mq-land--done .mq-land__tag { background: var(--frac-bg); color: var(--frac); }

/* локация */
.mq-land__place { position: relative; height: 100%; display: flex; flex-direction: column; }
.mq-place__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.mq-land__place::after, .mq-sc--fight::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(20,10,30,.5) 0 18%, rgba(20,10,30,.05) 42%, rgba(20,10,30,.62) 100%);
}
/* Слои, которые ОБЯЗАНЫ лежать поверх сцены и не влиять на поток.
   Правило «> *» ниже делает relative всё подряд, и каждый новый слой
   ломался об него: фон выталкивал шапку за край, у канваса эффектов
   высота падала в 0, актёры исчезали. Поэтому слои перечислены здесь
   и получают absolute явно — добавляешь новый слой, добавь сюда класс. */
.mq-place__bg,
.mq-fight__fx,
.mq-actors,
.mq-stagewrap { position: absolute !important; }

/* Управление обязано лежать ВЫШЕ слоя ходьбы (.mq-stagewrap, z-index 3).
   Пока здесь стояло 2, слой ходьбы растянутый на весь экран перехватывал
   каждый тап: кнопка «←» и «К другим землям» не нажимались вовсе, и выйти
   из земли можно было только через бой. В бою оставляем 2 — там сцены
   ходьбы нет, а канвас эффектов и так pointer-events: none. */
.mq-land__place > *:not(.mq-place__bg):not(.mq-actors):not(.mq-stagewrap) { position: relative; z-index: 4; }
.mq-sc--fight > *:not(.mq-place__bg):not(.mq-fight__fx) { position: relative; z-index: 2; }
.mq-land__place > .mq-head { margin: max(14px, env(safe-area-inset-top)) 16px 0; }

/* шапка сверху, сцена в середине, речь прижата к низу через margin-top:auto —
   justify-content: flex-end на родителе утаскивал вниз и саму шапку */
.mq-place__body {
  flex: 0 0 auto; margin-top: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 16px max(12px, env(safe-area-inset-bottom));
  max-height: 48dvh; overflow-y: auto;
}
.mq-gos { display: grid; gap: 9px; flex: 0 0 auto; }
.mq-go {
  display: flex; align-items: center; gap: 11px;
  min-height: 62px; border: 0; border-radius: var(--r-s);
  background: var(--card); color: var(--ink);
  font-family: inherit; text-align: left; padding: 8px 13px 8px 8px;
  box-shadow: var(--shadow); cursor: pointer;
}
.mq-go:active { transform: translateY(1px); }
.mq-go__art {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  overflow: hidden; background: #F3EBDC;
}
.mq-go__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mq-go__name { font-size: 15.5px; font-weight: 900; display: block; }
.mq-go__sub { font-size: 12px; font-weight: 700; color: var(--ink-2); display: block; margin-top: 1px; }
.mq-go--done { opacity: .55; }

/* ============================================================
   БОЙ
   ============================================================ */
.mq-sc--fight { padding-left: 0; padding-right: 0; }
.mq-fight__foes {
  flex: 1 1 auto; min-height: 0;
  display: flex; justify-content: center; align-items: flex-end;
  gap: 10px; padding: max(12px, env(safe-area-inset-top)) 12px 0;
}
.mq-fight__mine {
  flex: 0 0 auto; display: flex; justify-content: center; align-items: flex-end;
  gap: 14px; padding: 0 12px 10px;
}
/* герой стоит в нижней трети сцены: прижмёшь к врагу — слипаются,
   отпустишь в auto — уезжает к самой панели */
.mq-fight__mine { margin-top: clamp(10px, 6vh, 56px); flex: 0 1 auto; min-height: 0; }
.mq-fight__panel { margin-top: 0; flex: 0 0 auto; }

.mq-unit {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
  border: 0; background: transparent; padding: 2px;
  font-family: inherit; color: #fff; cursor: default;
  transition: transform .14s ease, opacity .3s ease;
}
.mq-unit__art {
  width: min(82px, 15vh); height: min(82px, 15vh); border-radius: 50%; overflow: hidden;
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 0 3px rgba(255,255,255,.55), 0 8px 20px rgba(20,10,30,.45);
}
.mq-unit__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mq-unit--foe .mq-unit__art { box-shadow: 0 0 0 3px rgba(255,255,255,.4), 0 8px 20px rgba(20,10,30,.5); }
.mq-unit--boss .mq-unit__art { width: min(98px, 18vh); height: min(98px, 18vh); box-shadow: 0 0 0 3px var(--eq), 0 10px 26px rgba(20,10,30,.6); }
.mq-unit--pet .mq-unit__art { width: min(64px, 11vh); height: min(64px, 11vh); }

.mq-unit--pick { cursor: pointer; }
.mq-unit--pick::after {
  content: ''; position: absolute; left: 50%; top: -10px; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--star);
  animation: mq-bob .9s ease-in-out infinite;
}
@keyframes mq-bob { 0%,100% { top: -10px; } 50% { top: -4px; } }
.mq-unit--gone { opacity: 0; transform: scale(.7) translateY(8px); pointer-events: none; }

.mq-unit__name {
  font-size: 12.5px; font-weight: 900;
  text-shadow: 0 1px 6px rgba(20,10,30,.8);
  max-width: 104px; text-align: center; line-height: 1.2;
}
.mq-bar {
  width: 84px; height: 8px; border-radius: 999px;
  background: rgba(20,10,30,.55); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.mq-bar i { display: block; height: 100%; border-radius: 999px; transition: width .35s cubic-bezier(.2,.7,.3,1); }
.mq-unit__weak { font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
/* повадка кляксы — рядом со слабостью, но тише её: слабость это подсказка
   «чем бить», повадка — предупреждение «что будет» */
/* Плашка повадки стоит НА фоновой картинке боя — тёмной и пёстрой.
   Полупрозрачная тёмная подложка с приглушённым сиреневым текстом на
   ней не читалась вовсе: «вернёт 4 через 1» сливалось с воротами.
   Нужна своя непрозрачная плашка, как у бирки слабости. */
.mq-unit__skill {
  margin-top: 3px; font-size: 10.5px; font-weight: 800; padding: 2px 7px;
  border-radius: 999px; white-space: nowrap;
  background: #FFE4C2; color: #8A4A12;
}
.mq-unit__skill--shield { background: #DCE8FF; color: #2A4D8F; }

.mq-fight__fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.mq-pop {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 31px; font-weight: 900; color: #fff;
  text-shadow: 0 2px 10px rgba(20,10,30,.9);
  animation: mq-pop .78s cubic-bezier(.2,.8,.3,1) forwards;
}
.mq-pop--heal { color: #7BF0B8; }
.mq-pop--miss { font-size: 20px; color: #FFE49E; }
@keyframes mq-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  25%  { opacity: 1; transform: translate(-50%, -82%) scale(1.25); }
  100% { opacity: 0; transform: translate(-50%, -175%) scale(1); }
}

.mq-shake--s { animation: mq-shake .18s ease-in-out 1; }
.mq-shake--m { animation: mq-shake .3s ease-in-out 2; }
@keyframes mq-shake {
  0%,100% { transform: translate(0,0); }
  25%     { transform: translate(-4px, 2px); }
  75%     { transform: translate(4px, -2px); }
}
.mq-hit { animation: mq-hit .24s ease-out 1; }
@keyframes mq-hit {
  0%   { filter: brightness(2.2) saturate(.4); transform: scale(1.1); }
  100% { filter: none; transform: scale(1); }
}
.mq-cast { animation: mq-cast .3s cubic-bezier(.3,1.5,.4,1) 1; }
@keyframes mq-cast {
  0%   { transform: scale(1) translateY(0); }
  40%  { transform: scale(1.1) translateY(-8px); }
  100% { transform: scale(1) translateY(0); }
}

.mq-fight__panel {
  flex: 0 0 auto; background: var(--card);
  border-radius: var(--r) var(--r) 0 0;
  box-shadow: 0 -8px 26px rgba(20,10,30,.28);
  padding: 10px 13px max(10px, env(safe-area-inset-bottom));
  color: var(--ink);
}

.mq-spells {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  max-height: 46dvh; overflow-y: auto;
}
.mq-spell {
  position: relative; min-height: 54px;
  border: 2px solid var(--line); border-radius: var(--r-s);
  background: var(--card); color: var(--ink);
  font-family: inherit; text-align: left; padding: 8px 10px 8px 48px;
  cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 1px;
}
.mq-spell:active { transform: translateY(1px); }
.mq-spell__sign {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 10px; font-size: 19px; font-weight: 900; line-height: 1;
}
.mq-spell__name { font-size: 14px; font-weight: 900; letter-spacing: -.1px; }
.mq-spell__how { font-size: 11px; font-weight: 700; color: var(--ink-2); line-height: 1.25; }
.mq-spell--cool { opacity: .45; cursor: default; }
.mq-spell__cool { position: absolute; right: 8px; top: 7px; font-size: 11px; font-weight: 900; color: var(--ink-2); }
.mq-spell--best { border-color: var(--star); box-shadow: 0 0 0 3px rgba(255,198,63,.26); }

.mq-task__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mq-task__spell { font-size: 13px; font-weight: 900; padding: 4px 10px; border-radius: 999px; flex: 1 1 auto; }
.mq-task__drop {
  border: 0; background: transparent; color: var(--ink-2);
  font-family: inherit; font-size: 13px; font-weight: 800;
  min-height: 34px; cursor: pointer; text-decoration: underline; flex: 0 0 auto;
}
.mq-task__q {
  text-align: center; font-size: clamp(24px, 8vw, 31px); font-weight: 900;
  letter-spacing: -.5px; padding: 2px 0 9px; line-height: 1.15;
}
.mq-task__q small { display: block; font-size: 14px; font-weight: 700; color: var(--ink-2); letter-spacing: 0; margin-top: 4px; }
.mq-task__opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (max-height: 620px) {
  .mq-task__opts { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .mq-opt { min-height: 46px; font-size: 18px; }
  .mq-task__q { font-size: 22px; padding-bottom: 7px; }
  .mq-task__q small { font-size: 12px; }
}
.mq-opt {
  min-height: 50px; border: 2px solid var(--line); border-radius: var(--r-s);
  background: var(--card); color: var(--ink);
  font-family: inherit; font-size: 22px; font-weight: 900; cursor: pointer;
}
.mq-opt:active { transform: translateY(1px); }
.mq-opt { font-size: 20px; }
.mq-opt--ok  { border-color: var(--add); background: var(--add-bg); color: var(--add); }
.mq-opt--no  { border-color: var(--sub); background: var(--sub-bg); color: var(--sub); }
.mq-opt--dim { opacity: .4; }

.mq-tip { margin-top: 7px; min-height: 20px; font-size: 14px; font-weight: 700; color: var(--ink-2); text-align: center; line-height: 1.35; }
.mq-tip b { color: var(--ink); }

/* ============================================================
   ИТОГ
   ============================================================ */
.mq-sc--win { align-items: center; text-align: center; overflow-y: auto; }
.mq-win__art { margin-top: auto; display: grid; place-items: center; min-height: 120px; }
.mq-win__art img {
  width: 118px; height: 118px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 4px var(--card), 0 10px 26px rgba(45,27,69,.22);
}
.mq-sc--win h2 { margin: 10px 0 3px; font-size: 24px; font-weight: 900; letter-spacing: -.5px; }
.mq-win__rows { display: grid; gap: 8px; width: 100%; max-width: 380px; margin: 10px 0 0; }
.mq-wrow {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border-radius: var(--r-s);
  padding: 11px 13px; box-shadow: var(--shadow); text-align: left;
}
.mq-wrow__ico { font-size: 21px; flex: 0 0 auto; }
.mq-wrow__txt { font-size: 15px; font-weight: 800; flex: 1 1 auto; }
.mq-wrow__txt small { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-top: 1px; }
.mq-sc--win .mq-foot { width: 100%; max-width: 420px; }
.mq-sc--win .mq-btn { width: 100%; }

/* ============================================================
   КОНЕЦ ПОХОДА
   Отдельный экран, а не ещё одна карточка победы: шапка со званием,
   прокручиваемое тело с итогами и «что дальше», подвал с одной кнопкой.
   ============================================================ */
.mq-sc--end { position: relative; overflow: hidden; display: flex; flex-direction: column; }

.mq-end__sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.mq-spark {
  position: absolute; top: -14px; width: 7px; height: 11px; border-radius: 2px;
  opacity: 0; animation-name: mq-fall; animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes mq-fall {
  0%   { opacity: 0; transform: translate(0, -10px) rotate(0deg); }
  8%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--drift, 0), 115%) rotate(420deg); }
}
/* кому анимация мешает — тому тихий экран, без падающих искр */
@media (prefers-reduced-motion: reduce) { .mq-end__sky { display: none; } }

.mq-end__top { position: relative; z-index: 1; flex: none; text-align: center; padding: 6px 4px 2px; }
.mq-end__kicker {
  margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink-2);
}
.mq-sc--end h2 { margin: 4px 0 6px; font-size: 25px; font-weight: 900; letter-spacing: -.5px; }
.mq-end__rank {
  margin: 0 auto; max-width: 330px; font-size: 13.5px; font-weight: 700; color: var(--ink-2);
}
.mq-end__rank b { color: var(--ink); font-weight: 900; }

.mq-end__body { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 2px 4px; }
.mq-end__say {
  margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--ink-2);
  background: var(--card); border-radius: var(--r-s); padding: 12px 13px; box-shadow: var(--shadow);
}

.mq-end__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 7px; }
.mq-endstat {
  background: var(--card); border-radius: var(--r-s); padding: 10px 8px;
  box-shadow: var(--shadow); text-align: center;
}
.mq-endstat__sign { display: block; font-size: 15px; color: var(--ink-2); }
.mq-endstat__num { display: block; font-size: 19px; font-weight: 900; line-height: 1.15; margin: 2px 0 1px; }
.mq-endstat__what { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-2); line-height: 1.25; }

.mq-end__next { margin-top: 14px; }
.mq-end__next h3 {
  margin: 0 0 7px; font-size: 12px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink-2);
}
.mq-end__next ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.mq-end__next li {
  background: var(--card); border-radius: var(--r-s); padding: 11px 13px;
  box-shadow: var(--shadow); font-size: 13.5px; line-height: 1.45; color: var(--ink-2);
}
.mq-end__next li b { color: var(--ink); font-weight: 900; }

.mq-sc--end .mq-foot { position: relative; z-index: 1; flex: none; width: 100%; }
.mq-sc--end .mq-btn { width: 100%; }

/* ============================================================
   ЛИСТ «ПАЛАТА СЧЁТА»
   ============================================================ */
/* absolute, а не fixed: лист живёт внутри рамки игры (.mq — relative).
   С fixed он мерился окном браузера и на компе растягивался во всю
   ширину экрана, пока сама игра занимала колонку по центру. */
.mq-sheet { position: absolute; inset: 0; z-index: 30; background: rgba(30,18,46,.55); display: flex; align-items: flex-end; }
.mq-sheet__card {
  background: var(--paper); width: 100%; max-height: 86%;
  border-radius: var(--r) var(--r) 0 0; padding: 14px 16px 0;
  box-sizing: border-box; display: flex; flex-direction: column;
  animation: mq-up .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes mq-up { from { transform: translateY(26px); } to { transform: translateY(0); } }
.mq-sheet__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; gap: 9px; padding: 4px 0 8px; align-content: start;
}
.mq-lore {
  margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
  background: var(--card); border-radius: var(--r-s); padding: 12px 14px; box-shadow: var(--shadow);
}
.mq-lore b { color: var(--ink); font-weight: 900; }
.mq-scard {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--card); border-radius: var(--r-s);
  padding: 11px 13px; box-shadow: var(--shadow);
}
.mq-scard__sign { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; font-size: 20px; font-weight: 900; }
.mq-scard__name { font-size: 16px; font-weight: 900; }
.mq-scard__how { font-size: 13px; font-weight: 700; color: var(--ink-2); line-height: 1.4; margin-top: 2px; }
.mq-scard--locked { opacity: .55; }

/* ---------- узкие телефоны 360×600 ---------- */
@media (max-height: 780px) {
  .mq-fight__foes { min-height: 128px; }
  .mq-unit__art { width: 76px; height: 76px; }
  .mq-unit--boss .mq-unit__art { width: 92px; height: 92px; }
  .mq-unit--pet .mq-unit__art { width: 54px; height: 54px; }
  .mq-task__q { font-size: 25px; padding-bottom: 8px; }
  .mq-spell { min-height: 56px; }
  .mq-opt { min-height: 50px; font-size: 20px; }
  .mq-win__art { min-height: 110px; }
  .mq-win__art img { width: 110px; height: 110px; }
  .mq-grade { min-height: 74px; }
  .mq-pick__sub { display: none; }
  .mq-speech { font-size: 14.5px; padding: 11px 13px; }
}
@media (max-width: 370px) {
  .mq-spell { padding-left: 44px; }
  .mq-spell__name { font-size: 14px; }
  .mq-spell__how { font-size: 11px; }
  .mq-land__pic { flex-basis: 86px; }
  .mq-pin__lbl { font-size: 12px; padding: 4px 9px; }
}

/* ============================================================
   НОУТБУК И МОНИТОР
   Раньше игра висела карточкой 420×800 посреди пустого экрана —
   «почему так мелко». Теперь она забирает всю высоту окна, а ширину
   берёт по той же телефонной пропорции: вёрстка вертикальная, и
   растянуть её по горизонтали значило бы разъехаться.
   ============================================================ */
@media (min-width: 720px) {
  .mq-body {
    display: grid; place-items: center; min-height: 100dvh;
    background: radial-gradient(1200px 600px at 50% -10%, #FFE9CF 0%, rgba(255,233,207,0) 60%), #FBEFDC;
  }
  /* Поля по бокам заполняет та же локация, где игрок сейчас: сильно
     размытая и притушенная. Экран перестаёт быть пустым, а вертикальную
     вёрстку не приходится растягивать вширь — она под это не считана. */
  .mq-body::before {
    content: ''; position: fixed; inset: -4%;
    background-image: var(--room, none);
    background-size: cover; background-position: center;
    filter: blur(44px) brightness(.5) saturate(1.1);
    opacity: .85;
    transition: background-image .4s ease;
    pointer-events: none; z-index: 0;
  }
  /* РАЗМЕР НА КОМПЬЮТЕРЕ.
     Раньше игра тянулась на всю высоту окна и брала ширину по пропорции.
     На ноутбуке высота окна около 700 px вместо 860, под которые считана
     вёрстка, — и всё внутри пережималось: подписи налезали, кнопки уходили
     под кромку, экран «съезжал».
     Теперь иначе: макет всегда ровно тот, под который рисовался (420×860),
     а под экран подгоняется МАСШТАБ целиком. Ничего не пережимается —
     картинка просто крупнее или мельче. На большом мониторе игра даже
     подрастает (до 1.3), на маленьком ноутбуке аккуратно уменьшается. */
  .mq {
    /* МАСШТАБ ЧЕРЕЗ zoom, А НЕ transform.
       С `transform: scale()` браузер рисует правильно, но КЛИКИ приходят мимо:
       координаты мыши не пересчитываются обратно, и тап по кнопке улетает в
       пустоту — игра выглядит полностью сломанной, хотя внешне всё на месте.
       Именно это ловил Павел: «куда ни тыкай — ничего». `zoom` пересчитывает
       и отрисовку, и попадание, поэтому мышь работает как на телефоне. */
    position: relative; z-index: 1;
    width: 420px; height: 860px;
    margin: 0 auto;
    zoom: var(--fit, 1);
    overflow: hidden;
    border-radius: 18px;
    background: var(--paper);
    box-shadow: 0 0 60px rgba(45,27,69,.18);
  }
  /* экраны внутри меряются рамкой, а не высотой окна */
  .mq-sc { height: 100% !important; max-height: 100% !important; min-height: 0 !important; }
  /* полосы прокрутки окна не нужны: масштаб уже вписал игру в экран */
  html, body { overflow: hidden; }
}

@media (min-width: 720px) and (prefers-color-scheme: dark) {
  .mq-body { background: radial-gradient(1200px 600px at 50% -10%, #221E38 0%, rgba(34,30,56,0) 60%), #12101F; }
}

/* ============================================================
   ЭФФЕКТЫ, ВСТУПЛЕНИЕ, ХОДЬБА, ПЕРСОНАЛИЗАЦИЯ
   ============================================================ */

/* канвас эффектов поверх сцены боя */
.mq-fxc { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* свечение цвета магии вокруг героя в бою */
.mq-unit__art--me {
  box-shadow: 0 0 0 3px rgba(255,255,255,.6),
              0 0 22px 2px var(--tint, #9B6BE0),
              0 8px 20px rgba(20,10,30,.45);
}
.mq-mark { font-style: normal; font-size: 13px; text-shadow: 0 0 8px currentColor; }

/* ---------- вступление ---------- */
.mq-sc--tale { padding-left: 0; padding-right: 0; justify-content: flex-end; }
.mq-tale__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.mq-sc--tale::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(20,10,30,.3) 0 26%, rgba(24,13,36,.8) 64%, #180D24 100%);
}
.mq-tale__in { position: relative; z-index: 2; margin-top: auto; padding: 0 20px; color: #fff; }
.mq-tale__in h2 { margin: 6px 0 8px; font-size: 26px; font-weight: 900; letter-spacing: -.5px; }
.mq-tale__in p {
  margin: 0; font-size: 15px; line-height: 1.6;
  color: rgba(255,255,255,.9);
  max-width: 380px;
  animation: mq-fade .5s ease both;
}
.mq-tale__in p b { color: var(--star); font-weight: 900; }
@keyframes mq-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mq-tale__dots { display: flex; gap: 6px; }
.mq-tale__dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.35); transition: all .2s ease;
}
.mq-tale__dots i.on { background: var(--star); width: 20px; border-radius: 4px; }
.mq-sc--tale .mq-foot { position: relative; z-index: 2; background: none; padding: 16px 20px max(16px, env(safe-area-inset-bottom)); }
.mq-sc--tale .mq-btn { background: var(--star); color: #2D1B45; }
.mq-sc--tale .mq-btn--ghost { background: none; color: rgba(255,255,255,.65); }

/* ---------- дорога до боя ---------- */
.mq-walk {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 0 0 22% 6%;
}
.mq-walk__hero {
  display: block; width: 86px; height: 86px; border-radius: 50%;
  overflow: hidden; background: #F3EBDC;
  box-shadow: 0 0 0 3px rgba(255,255,255,.6), 0 0 20px 2px var(--tint, #9B6BE0), 0 8px 18px rgba(20,10,30,.5);
  transform: translateX(0) scale(.9);
  transition: transform 1.05s cubic-bezier(.4,.1,.5,1);
  animation: mq-step .32s ease-in-out infinite;
}
.mq-walk__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mq-walk--go .mq-walk__hero { transform: translateX(min(62vw, 240px)) scale(1.04); }
@keyframes mq-step {
  0%, 100% { margin-bottom: 0; }
  50%      { margin-bottom: 7px; }
}
.mq-walk__dust {
  position: absolute; left: 6%; bottom: 21%;
  width: 70px; height: 10px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.3), rgba(255,255,255,0) 70%);
  transition: transform 1.05s cubic-bezier(.4,.1,.5,1); 
}
.mq-walk--go .mq-walk__dust { transform: translateX(min(62vw, 240px)); }
@media (prefers-reduced-motion: reduce) {
  .mq-walk__hero { animation: none; transition: none; }
}

/* ---------- персонализация ---------- */
.mq-tune { flex: 0 0 auto; display: grid; gap: 8px; padding: 2px 0 6px; }
.mq-row__lbl {
  display: block; font-size: 11.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-2); margin-bottom: 5px;
}
.mq-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.mq-chip {
  min-height: 40px; min-width: 40px; padding: 0 12px;
  border: 2px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink);
  font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
  display: grid; place-items: center;
}
.mq-chip[aria-pressed="true"] { border-color: var(--ink); }
.mq-chip--dot { width: 40px; padding: 0; }
.mq-chip--dot i { width: 22px; height: 22px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.mq-chip--dot[aria-pressed="true"] { box-shadow: 0 0 0 3px rgba(45,27,69,.14); }
.mq-chip--mark { font-size: 19px; }

@media (max-height: 700px) {
  .mq-tune { gap: 5px; }
  .mq-chip { min-height: 36px; min-width: 36px; }
  .mq-chip--dot { width: 36px; }
  .mq-chip--dot i { width: 19px; height: 19px; }
  .mq-tale__in p { font-size: 14px; line-height: 1.5; }
  .mq-tale__in h2 { font-size: 22px; }
}

/* ============================================================
   ЖИВОЙ ЧИСЛОГРАД
   Карта была картинкой с жёлтыми кружками — мёртвой. Теперь это
   сцена: тлеют окна, идёт дым, летают птицы, ходят горожане и
   переговариваются между собой. Вход — светящаяся вывеска, и по
   нажатию сцена ПРИБЛИЖАЕТСЯ к ней, а не сменяется рывком.
   ============================================================ */

.mq-town__scene {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  aspect-ratio: 900 / 522;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 34px rgba(20,10,30,.55);
  transition: transform .42s cubic-bezier(.4,0,.2,1), filter .42s ease;
  will-change: transform;
}
.mq-town__bg2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mq-town__fx  { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* приближение к выбранному месту */
.mq-town__scene.mq-zoom { transform: translateY(-50%) scale(2.6); filter: brightness(.7) blur(1px); }
@media (prefers-reduced-motion: reduce) {
  .mq-town__scene { transition: none; }
  .mq-town__scene.mq-zoom { transform: translateY(-50%); filter: brightness(.8); }
}

/* ---------- горожане ходят по площади ---------- */
.mq-town__folk { position: absolute; inset: 0; pointer-events: none; }
.mq-folk {
  position: absolute; top: var(--y); left: 0;
  transform: translate(-50%, -50%);
  animation: mq-stroll var(--dur, 24s) ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes mq-stroll {
  from { left: var(--from, 10%); }
  to   { left: var(--to, 70%); }
}
.mq-folk__art {
  display: block; width: 34px; height: 34px; border-radius: 50%;
  overflow: hidden; background: rgba(255,255,255,.16);
  box-shadow: 0 0 0 2px rgba(255,255,255,.4), 0 3px 8px rgba(20,10,30,.5);
  animation: mq-bobwalk .5s ease-in-out infinite;
}
.mq-folk__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes mq-bobwalk { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }

.mq-folk__say, .mq-actor__say {
  position: absolute; left: 50%; bottom: calc(100% + 7px);
  max-width: min(150px, 38vw); white-space: normal; text-align: center;
  transform: translateX(-50%) translateY(5px) scale(.9);
  background: #FFF8EC; color: #2D1B45;
  border-radius: 11px; padding: 5px 9px;
  font-size: 11px; font-weight: 800; line-height: 1.25;
  box-shadow: 0 3px 10px rgba(20,10,30,.4);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.mq-folk__say.on, .mq-actor__say.on { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.mq-folk__say::after, .mq-actor__say::after {
  content: ''; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #FFF8EC;
}

/* ---------- места входа: вывеска, а не кружок ---------- */
.mq-town__places { position: absolute; inset: 0; }
/* у краёв карты вывеска прижимается внутрь, иначе половина уходит за рамку */
.mq-place[style*="left: 9"] .mq-place__sign,
.mq-place[style*="left: 8"] .mq-place__sign { transform: translateX(-18%); }
.mq-place[style*="left: 1"] .mq-place__sign { transform: translateX(14%); }
.mq-place {
  position: absolute; transform: translate(-50%, -50%);
  border: 0; background: transparent; padding: 3px;
  font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 44px; min-height: 44px;
}
.mq-place__glow {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--star);
  box-shadow: 0 0 10px 3px rgba(255,198,63,.65), 0 0 0 3px rgba(255,198,63,.22);
  animation: mq-beat 2.4s ease-in-out infinite;
}
@keyframes mq-beat {
  0%,100% { transform: scale(1);   box-shadow: 0 0 10px 3px rgba(255,198,63,.65), 0 0 0 3px rgba(255,198,63,.22); }
  50%     { transform: scale(1.25); box-shadow: 0 0 16px 5px rgba(255,198,63,.5),  0 0 0 8px rgba(255,198,63,.10); }
}
.mq-place__sign {
  background: linear-gradient(180deg, #FFF8EC, #FFEFD4);
  color: #2D1B45; border-radius: 9px; padding: 4px 10px;
  font-size: 12px; font-weight: 900; line-height: 1.15; white-space: nowrap;
  box-shadow: 0 3px 0 rgba(120,80,30,.35), 0 6px 14px rgba(20,10,30,.45);
  display: flex; flex-direction: column; align-items: center;
  transition: transform .16s ease;
}
.mq-place__sign small { font-size: 9.5px; font-weight: 700; color: #8A7A62; }
.mq-place:active .mq-place__sign { transform: translateY(2px); box-shadow: 0 1px 0 rgba(120,80,30,.35); }
@media (hover: hover) { .mq-place:hover .mq-place__sign { transform: translateY(-2px); } }

/* ---------- живые NPC в локации ---------- */
.mq-actors { position: absolute; left: 0; right: 0; bottom: 34%; height: 0; z-index: 2; pointer-events: none; }
.mq-actor {
  position: absolute; left: var(--x, 50%); bottom: 0;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.mq-actor__art {
  display: block; width: 62px; height: 62px; border-radius: 50%;
  overflow: hidden; background: rgba(255,255,255,.14);
  box-shadow: 0 0 0 2px rgba(255,255,255,.5), 0 6px 16px rgba(20,10,30,.5);
  animation: mq-breathe 3.4s ease-in-out var(--d, 0s) infinite;
}
.mq-actor__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mq-actor--right .mq-actor__art { animation-duration: 3.9s; }
@keyframes mq-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.03); }
}
.mq-actor--talk .mq-actor__art {
  box-shadow: 0 0 0 2px var(--star), 0 0 16px 2px rgba(255,198,63,.5), 0 6px 16px rgba(20,10,30,.5);
}
.mq-actor__name {
  font-size: 10.5px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 6px rgba(20,10,30,.9); white-space: nowrap;
}
.mq-actor__say { font-size: 11.5px; max-width: min(170px, 44vw); }

@media (max-height: 660px) {
  .mq-actor__art { width: 46px; height: 46px; opacity: .92; }
  .mq-folk__art { width: 28px; height: 28px; }
  .mq-place__sign { font-size: 11px; padding: 3px 8px; }
  .mq-actors { bottom: 38%; }
}
@media (prefers-reduced-motion: reduce) {
  .mq-folk, .mq-folk__art, .mq-actor__art, .mq-place__glow { animation: none; }
}

/* ============================================================
   СЦЕНА ЛОКАЦИИ: герой ходит, кляксы стоят в комнате
   Список кнопок «что сделать» ушёл — ребёнок водит героя сам.
   ============================================================ */
/* передний план: герой и кляксы стоят ниже и крупнее NPC — так читается глубина.
   Слой сцены — свой, на всю локацию: внутри .mq-actors (высота 0) он схлопывался,
   герой пропадал, а тапы по кляксам не доходили. */
.mq-stagewrap { inset: 0; z-index: 3; }
.mq-stage { position: absolute; inset: 0; }

.mq-player {
  position: absolute; bottom: 40%; left: 16%;
  transform: translateX(-50%);
  pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
}
.mq-player__art {
  display: block; width: 78px; height: 78px; border-radius: 50%;
  overflow: hidden; background: rgba(255,255,255,.14);
  box-shadow: 0 0 0 3px rgba(255,255,255,.6),
              0 0 18px 2px var(--tint, #9B6BE0),
              0 7px 18px rgba(20,10,30,.55);
}
.mq-player__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mq-player--flip .mq-player__art img { transform: scaleX(-1); }
.mq-player--walk .mq-player__art { animation: mq-bobwalk .42s ease-in-out infinite; }
.mq-player__dust {
  width: 46px; height: 8px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.26), rgba(255,255,255,0) 72%);
  opacity: 0; transition: opacity .2s ease;
}
.mq-player--walk .mq-player__dust { opacity: 1; }

/* клякса ждёт в своей точке */
.mq-spot-foe {
  position: absolute; bottom: 41%;
  transform: translateX(-50%);
  border: 0; background: transparent; padding: 2px;
  font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 44px; min-height: 44px;
}
.mq-spot-foe__art {
  width: 70px; height: 70px; border-radius: 50%;
  overflow: hidden; background: rgba(255,255,255,.12);
  box-shadow: 0 0 0 2px rgba(255,255,255,.45), 0 6px 16px rgba(20,10,30,.55);
  animation: mq-lurk 2.8s ease-in-out infinite;
}
.mq-spot-foe__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes mq-lurk {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-5px) scale(1.04); }
}
.mq-spot-foe__lbl {
  font-size: 10.5px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 6px rgba(20,10,30,.9); white-space: nowrap;
  background: rgba(30,18,46,.5); border-radius: 999px; padding: 2px 8px;
}
.mq-spot-foe--done { opacity: .45; }
.mq-spot-foe--done .mq-spot-foe__art { animation: none; }
.mq-spot-foe:active .mq-spot-foe__art { transform: translateY(2px); }

/* подсказка — отдельной плашкой, а не поверх персонажей */
.mq-hint {
  margin: 0 0 8px; font-size: 12.5px; font-weight: 800;
  color: #fff; text-align: center; line-height: 1.35;
  background: rgba(30,18,46,.55);
  border-radius: 999px; padding: 6px 12px;
  align-self: center;
}

/* актёры-NPC стоят выше героя, чтобы не слипались */
/* задний план: NPC стоят выше и мельче — так читается глубина,
   а герой с кляксами не слипаются с ними в одну полосу */
.mq-actors { bottom: 58%; }
.mq-actor__art { width: 46px; height: 46px; opacity: .92; }
.mq-actor__name { font-size: 9.5px; opacity: .85; }

@media (max-height: 660px) {
  .mq-player__art { width: 62px; height: 62px; }
  .mq-spot-foe__art { width: 56px; height: 56px; }
  .mq-actor__art { width: 40px; height: 40px; }
  .mq-actors { bottom: 60%; }
  .mq-player, .mq-spot-foe { bottom: 42%; }
}
@media (prefers-reduced-motion: reduce) {
  .mq-player--walk .mq-player__art, .mq-spot-foe__art { animation: none; }
}

/* ============================================================
   ФИГУРЫ В ПОЛНЫЙ РОСТ
   Персонажи были круглыми иконками и висели в воздухе. Теперь
   это вырезанные фигуры: стоят на земле, под каждой — мягкая
   тень, которая и «ставит» их на поверхность.
   ============================================================ */

.mq-fig {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
}
.mq-fig img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 6px 10px rgba(20,10,30,.45));
}
/* тень на земле — без неё фигура «висит» */
.mq-fig::after {
  content: ''; position: absolute; left: 50%; bottom: -5px;
  transform: translateX(-50%);
  width: 62%; height: 11px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(20,10,30,.45), rgba(20,10,30,0) 72%);
  z-index: -1;
}

/* ---------- герой на сцене ---------- */
.mq-player__art {
  width: auto !important; height: 112px !important;
  border-radius: 0 !important; overflow: visible !important;
  background: none !important; box-shadow: none !important;
  position: relative;
}
.mq-player__art img {
  width: auto; height: 100%; object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 0 14px var(--tint, #9B6BE0)) drop-shadow(0 7px 12px rgba(20,10,30,.5));
}
.mq-player__art::after {
  content: ''; position: absolute; left: 50%; bottom: -3px;
  transform: translateX(-50%);
  width: 64px; height: 12px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(20,10,30,.5), rgba(20,10,30,0) 72%);
}

/* ---------- кляксы стоят в комнате ---------- */
.mq-spot-foe__art {
  width: auto !important; height: 94px !important;
  border-radius: 0 !important; overflow: visible !important;
  background: none !important; box-shadow: none !important;
  position: relative;
}
.mq-spot-foe__art img {
  width: auto; height: 100%; object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 7px 12px rgba(20,10,30,.55));
}
.mq-spot-foe__art::after {
  content: ''; position: absolute; left: 50%; bottom: -3px;
  transform: translateX(-50%);
  width: 56px; height: 11px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(20,10,30,.5), rgba(20,10,30,0) 72%);
}

/* ---------- NPC на заднем плане ---------- */
.mq-actor__art {
  width: auto !important; height: 84px !important;
  border-radius: 0 !important; overflow: visible !important;
  background: none !important; box-shadow: none !important; opacity: 1 !important;
  position: relative;
}
.mq-actor__art img {
  width: auto; height: 100%; object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 6px 10px rgba(20,10,30,.45));
}
.mq-actor__art::after {
  content: ''; position: absolute; left: 50%; bottom: -3px;
  transform: translateX(-50%);
  width: 48px; height: 9px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(20,10,30,.42), rgba(20,10,30,0) 72%);
}
.mq-actor--talk .mq-actor__art { box-shadow: none !important; }
.mq-actor--talk .mq-actor__art img { filter: drop-shadow(0 0 12px var(--star)) drop-shadow(0 6px 10px rgba(20,10,30,.45)); }

/* ---------- бойцы в бою ---------- */
.mq-unit__art {
  width: auto !important; height: 120px !important;
  border-radius: 0 !important; overflow: visible !important;
  background: none !important; box-shadow: none !important;
  position: relative;
}
.mq-unit__art img {
  width: auto; height: 100%; object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 8px 14px rgba(20,10,30,.55));
}
.mq-unit__art::after {
  content: ''; position: absolute; left: 50%; bottom: -4px;
  transform: translateX(-50%);
  width: 68px; height: 13px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(20,10,30,.5), rgba(20,10,30,0) 72%);
}
.mq-unit__art--me img { filter: drop-shadow(0 0 16px var(--tint, #9B6BE0)) drop-shadow(0 8px 14px rgba(20,10,30,.55)); }
.mq-unit--boss .mq-unit__art { height: 146px !important; }
.mq-unit--pet .mq-unit__art { height: 74px !important; }

/* ---------- горожане на карте ---------- */
.mq-folk__art {
  width: auto !important; height: 44px !important;
  border-radius: 0 !important; overflow: visible !important;
  background: none !important; box-shadow: none !important;
}
.mq-folk__art img {
  width: auto; height: 100%; object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 3px 5px rgba(20,10,30,.5));
}

/* ---------- выбор героя: фигуры, а не кружки ---------- */
.mq-pick__art {
  aspect-ratio: 3 / 4; border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,244,228,.8)) !important;
  box-shadow: 0 0 0 2px var(--card), 0 4px 12px rgba(45,27,69,.12) !important;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}
.mq-pick__art img { width: 100%; height: 94%; object-fit: contain; object-position: bottom center; }
.mq-pick--on .mq-pick__art {
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--tint, var(--star)), 0 6px 16px rgba(45,27,69,.18) !important;
}

/* ---------- итог: фигура целиком ---------- */
.mq-win__full {
  width: auto !important; height: 150px !important; border-radius: 0 !important;
  object-fit: contain; object-position: bottom center;
  box-shadow: none !important;
  filter: drop-shadow(0 8px 16px rgba(45,27,69,.3));
}

@media (max-height: 700px) {
  .mq-player__art { height: 92px !important; }
  .mq-spot-foe__art { height: 78px !important; }
  .mq-actor__art { height: 68px !important; }
  .mq-unit__art { height: 96px !important; }
  .mq-unit--boss .mq-unit__art { height: 118px !important; }
  .mq-win__full { height: 110px !important; }
  .mq-folk__art { height: 36px !important; }
}

/* текстовая задача из учебника — это абзац, а не формула:
   меньше кегль, живая высота строки, выравнивание по левому краю */
.mq-task__q--word {
  font-size: 15.5px !important;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  padding: 2px 2px 10px;
}
.mq-task__q--word small {
  text-align: left; font-size: 12px; margin-top: 5px;
}
@media (max-height: 660px) {
  .mq-task__q--word { font-size: 14px !important; line-height: 1.38; }
}

/* ============================================================
   КОНСТРУКТОР: «Собери себя» и «Собери питомца»
   Сверху фигура, под ней лента вкладок, ниже ряд вариантов.
   Один слой за раз — ребёнка не накрывает выбором.
   ============================================================ */
.mk-stage {
  position: relative; flex: 0 0 auto;
  display: grid; place-items: center;
  padding: 4px 0 8px;
  min-height: 190px;
}
.mk-fig svg { display: block; height: 182px; width: auto; }
.mk-fig.mk-pop { animation: mk-pop .36s cubic-bezier(.34,1.56,.64,1); }
@keyframes mk-pop { 0% { transform: scale(.88) } 60% { transform: scale(1.05) } 100% { transform: scale(1) } }

.mk-dice {
  position: absolute; right: 2px; top: 4px;
  min-height: 38px; padding: 0 13px;
  border: 2px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink);
  font-family: inherit; font-size: 13.5px; font-weight: 800;
  box-shadow: var(--shadow); cursor: pointer;
}
.mk-dice:active { transform: translateY(1px); }

.mk-tabs {
  flex: 0 0 auto;
  display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden;
  padding: 2px 0 8px; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mk-tabs::-webkit-scrollbar { display: none; }
.mk-tab {
  flex: 0 0 auto; min-height: 36px; padding: 0 13px;
  border: 0; border-radius: 999px;
  background: rgba(45,27,69,.07); color: var(--ink-2);
  font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
  white-space: nowrap;
}
.mk-tab--on { background: var(--ink); color: #FFF8EC; }

.mk-opts {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 7px; align-content: start; padding-bottom: 6px;
}
/* чип сам кадрируется по слою (посох → навершие, причёска → лицо),
   поэтому размер ему не навязываем — только ограничиваем рамкой */
.mk-opt {
  min-height: 62px; display: grid; place-items: center;
  border: 2px solid var(--line); border-radius: 13px;
  background: var(--card); cursor: pointer; padding: 2px;
  font-family: inherit; overflow: hidden;
}
.mk-opt svg { display: block; max-width: 100%; max-height: 58px; }
.mk-opt--on { border-color: var(--ink); background: var(--add-bg); }
.mk-opt:active { transform: translateY(1px); }
.mk-dot { width: 26px; height: 26px; border-radius: 50%; display: block;
          box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }

@media (max-height: 680px) {
  .mk-stage { min-height: 150px; padding: 2px 0 6px; }
  .mk-fig svg { height: 142px; }
  .mk-opt { min-height: 54px; }
  .mk-opt svg { max-height: 50px; }
  .mk-tab { min-height: 33px; font-size: 12.5px; padding: 0 11px; }
}

/* ============================================================
   ГЕРОЙ РИСУЕТСЯ КОДОМ
   Вместо <img> — встроенный SVG: фигура в полный рост, ступни
   на одной линии. Размер задаёт контейнер, свечение — ауру.
   ============================================================ */
.mq-player__art--svg, .mq-unit__art--svg, .mq-walk__hero--svg, .mq-me__art--svg {
  background: none !important; box-shadow: none !important;
  border-radius: 0 !important; overflow: visible !important;
  display: grid; place-items: end center;
}
.mq-player__art--svg svg, .mq-unit__art--svg svg,
.mq-walk__hero--svg svg, .mq-me__art--svg svg {
  display: block; height: 100%; width: auto;
}
.mq-player__art--svg { height: 118px !important; width: auto !important; }
.mq-unit__art--svg   { height: 124px !important; width: auto !important; }
.mq-unit--pet .mq-unit__art--svg { height: 76px !important; }
.mq-unit--boss .mq-unit__art { height: 142px !important; }
.mq-walk__hero--svg  { height: 92px !important; width: auto !important; }
.mq-me__art--svg     { height: 46px !important; width: 46px !important;
                       border-radius: 50% !important; overflow: hidden !important;
                       box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 0 0 4px var(--tint, #9B6BE0) !important;
                       background: #F6EDDD !important; place-items: center; }
.mq-me__art--svg svg { height: 100%; }

.mq-unit__art--me svg { filter: drop-shadow(0 0 14px var(--tint, #9B6BE0)) drop-shadow(0 7px 12px rgba(20,10,30,.5)); }
.mq-player__art--svg svg { filter: drop-shadow(0 0 12px var(--tint, #9B6BE0)) drop-shadow(0 6px 10px rgba(20,10,30,.45)); }

.mq-win__svg { display: grid; place-items: center; }
.mq-win__svg svg { height: 150px; width: auto; filter: drop-shadow(0 8px 16px rgba(45,27,69,.3)); }

@media (max-height: 700px) {
  .mq-player__art--svg { height: 96px !important; }
  .mq-unit__art--svg   { height: 100px !important; }
  .mq-unit--boss .mq-unit__art { height: 116px !important; }
  .mq-win__svg svg { height: 112px; }
}

/* контейнер конструктора: столбец, а не сетка выбора готовых */
.mq-maker {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}

/* слой и его цвет идут двумя рядами: сетка теперь на ряду, а не на
   контейнере — иначе варианты вытягиваются в одну узкую колонку */
.mk-opts { display: flex !important; flex-direction: column; gap: 10px; }
.mk-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 7px;
}
.mk-row--color {
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  padding-top: 2px;
  border-top: 1px dashed var(--line);
}
.mk-row--color .mk-opt { min-height: 46px; }
.mk-opt--dotbox { padding: 0; }
@media (max-height: 680px) {
  .mk-row { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); }
  .mk-row--color .mk-opt { min-height: 40px; }
}

/* подписи клякс не должны наезжать друг на друга и перехватывать тап */
.mq-spot-foe__lbl {
  max-width: 108px; font-size: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  pointer-events: none;
}
.mq-spot-foe { z-index: 4; }
.mq-spot-foe:nth-of-type(even) { z-index: 5; }

/* ============================================================
   ОДНА ГОРЯЩАЯ ДВЕРЬ
   Четыре вывески Числограда светились одинаково, и ребёнок жал
   наугад — чаще в Палату, где справочник, а не игра. Теперь
   подсвечена ровно та, куда вести сейчас; остальные приглушены,
   но остаются нажимаемыми: запрещать исследование незачем.
   ============================================================ */
.mq-place--idle { opacity: .55; }
.mq-place--idle .mq-place__glow { animation: none !important; opacity: .25; }

.mq-place--goal { z-index: 4; }
.mq-place--goal .mq-place__sign {
  background: linear-gradient(180deg, #FFEDA8, #FFD262);
  color: #2D1B45;
  box-shadow: 0 5px 0 #D4A22B, 0 10px 22px -6px rgba(212,162,43,.6);
}
.mq-place--goal .mq-place__sign small { color: #7a5a12; font-weight: 800; }

/* стрелка над целью — ребёнку нужна не подсказка словом, а указатель */
.mq-place__pin {
  position: absolute; left: 50%; bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 4px;
  font-size: 26px; line-height: 1; color: #FFD84D;
  text-shadow: 0 2px 8px rgba(20,10,30,.7);
  animation: mqPin 1.1s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mqPin {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(5px); }
}
@media (prefers-reduced-motion: reduce) { .mq-place__pin { animation: none; } }

/* шапка боя: только стрелка «уйти», фон не перекрывает сцену */
.mq-head--thin { min-height: 0; padding: 6px 10px; background: none; }
.mq-sc--fight > .mq-head--over { position: absolute; top: 0; left: 0; z-index: 6; }

/* След возвращённого числа на месте побеждённой кляксы: место пройдено,
   но поляна не завалена «трупами» — по лору клякса ушла с героем. */
.mq-spot-back {
  position: absolute; bottom: 41%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  pointer-events: none; z-index: 2;
}
.mq-spot-back__sign {
  font-size: 26px; line-height: 1; color: #FFD84D;
  text-shadow: 0 0 14px rgba(255,216,77,.9), 0 2px 6px rgba(20,10,30,.6);
  animation: mqBack 2.6s ease-in-out infinite;
}
.mq-spot-back__lbl {
  font: 700 10px/1 var(--nk-body, system-ui), sans-serif;
  color: #fff; background: rgba(31,167,110,.85);
  padding: 3px 7px; border-radius: 999px; white-space: nowrap;
}
@keyframes mqBack {
  0%, 100% { opacity: .75; transform: translateY(0) scale(1); }
  50%      { opacity: 1;   transform: translateY(-4px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .mq-spot-back__sign { animation: none; } }

/* звёзды за бой */
.mq-star { font-style: normal; color: #FFC63F; font-size: 15px; letter-spacing: 1px;
           text-shadow: 0 1px 3px rgba(212,151,43,.5); }
.mq-star--off { color: #D9CFE4; text-shadow: none; }
.mq-land__stars { display: flex; align-items: center; gap: 2px; margin-top: 3px; }
.mq-land__stars small { font-size: 11px; font-weight: 800; color: var(--ink-2); margin-left: 4px; }

/* Подпись кляксы в две строки: имя и чем бить. Абсолютом, иначе вторая
   строка поднимает саму фигуру и она отрывается от земли. */
.mq-spot-foe__lbl {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 3px; max-width: 118px;
  white-space: normal; overflow: visible; text-align: center; line-height: 1.25;
}
.mq-spot-foe__lbl small {
  display: block; font-size: 9.5px; font-weight: 700; opacity: .88; margin-top: 1px;
}

/* СЧЁТЫ ПОД ЗАДАЧЕЙ — число рядом с предметом, который можно потрогать.
   Два ряда = два числа задачи, разным цветом: видно, из чего складывается. */
.mq-beads { margin: 8px 0 2px; text-align: center; }
.mq-beads__rows { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.mq-beads__row { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; max-width: 100%; }
.mq-bead {
  width: 26px; height: 26px; min-width: 26px; padding: 0; border: 0; border-radius: 50%;
  background: #E7DFF2; box-shadow: inset 0 -2px 0 rgba(45,27,69,.14);
  cursor: pointer; transition: transform .12s ease, background .12s ease;
}
.mq-beads__row--b .mq-bead { background: #FDE6C8; }
.mq-bead.on { background: var(--add, #4ED99B); box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); transform: scale(.9); }
.mq-beads__cap { display: block; margin-top: 5px; font-size: 12px; font-weight: 700; color: var(--ink-2, #6B5B82); }
.mq-beads__num { font-size: 15px; color: var(--ink, #2D1B45); }
.mq-beads--live .mq-beads__num { color: var(--add, #2E9D6B); }

/* ЛАВКА: товар и выкладывание кристаллов руками */
.aqg__opt--buy { text-align: left; line-height: 1.25; }
.aqg__opt--buy small { display: block; font-weight: 700; font-size: 11px; opacity: .72; }
/* Поле кристаллов и счётчик лежат в сетке .aqg__opts (две колонки под
   варианты ответа). Без span кристаллы ужимались в левую половину
   карточки, а «выложено: N» вставало СБОКУ от них, как пятый вариант
   ответа, — и карточка переставала влезать в экран 360×600. */
.aqg__pay { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0 2px; }
.aqg__pay-cap { grid-column: 1 / -1; }
.aqg__cry {
  width: 30px; height: 30px; min-width: 30px; padding: 0; border: 0; border-radius: 8px;
  background: #EDE4FB; color: #B9A6E4; font-size: 15px; line-height: 1; cursor: pointer;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.aqg__cry.on { background: #7B4FF2; color: #FFF; transform: scale(.92); }
.aqg__pay-cap { text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-2, #6B5B82); }
.aqg__pay-num { font-size: 15px; color: var(--ink, #2D1B45); }

/* Подсказка клавиш — только на компьютере. Определяем по ширине ОКНА,
   а не по типу указателя: эмуляторы и часть браузеров врут про указатель,
   а окно шире игры бывает только на большом экране. */
@media (min-width: 760px) {
  .mq-task__opts .mq-opt { position: relative; }
  .mq-task__opts .mq-opt::before {
    content: counter(mq-key); counter-increment: mq-key;
    position: absolute; left: 7px; top: 5px;
    font-size: 10px; font-weight: 800; opacity: .42;
  }
  .mq-task__opts { counter-reset: mq-key; }
}

/* ============================================================
   БОЙ НА 360×600: место под счёты
   Счёты под задачей подняли панель боя почти на 80 px, и строка
   подсказки — «клякса слаба к этому», «не то число, верное — 7» —
   уезжала ЦЕЛИКОМ за нижний край экрана. Экран боя не скроллится,
   так что ребёнок её просто не видел.

   Пиксели отдаёт сцена над панелью: пол у ряда клякс ниже, герой
   ближе к панели и чуть мельче. Блок стоит в самом конце файла
   намеренно — выше по файлу те же селекторы заданы с !important
   в своём медиазапросе, и правило отсюда должно идти последним.
   ============================================================ */
@media (max-height: 660px) {
  .mq-fight__foes { min-height: 84px; }
  .mq-fight__mine { margin-top: 10px; }
  .mq-unit--foe .mq-unit__art { height: 82px !important; }
  .mq-unit__art--svg { height: 86px !important; }
  .mq-unit--pet .mq-unit__art--svg { height: 60px !important; }
  .mq-unit--boss .mq-unit__art { height: 104px !important; }
  .mq-unit__name { font-size: 12px; }

  /* Герой уходит из-под кляксы к левому краю. Когда задача открыта,
     на сцену остаётся ~140 px, а герой и клякса просят по 130–150:
     стоя по центру, герой вставал ровно на бирку «слаб к Росту +» —
     на главную подсказку боя, — и читать её было нельзя. Своё имя
     герою над головой не нужно: оно забирало ещё 16 px и ложилось
     кляксе на грудь. */
  .mq-fight__mine { justify-content: flex-start; padding-left: 14px; }
  #u-me .mq-unit__name { display: none; }

  /* В бою на трёх клякс левый край всё равно занят: герой стоит на
     бирках первой из них. Бирка важнее картинки — она говорит, каким
     заклинанием бить, — поэтому ряд клякс кладём поверх героя. */
  /* !important здесь обязателен: выше по файлу стоит
     `.mq-sc--fight > *:not(.mq-place__bg):not(.mq-fight__fx) { z-index: 2 }`,
     и он по весу сильнее одиночного класса. */
  .mq-fight__foes { position: relative; z-index: 3 !important; }
  .mq-fight__mine { position: relative; z-index: 2 !important; }
}

/* метка сборки на первом экране — тихая, но на виду */
.mq-build { margin: 6px 0 0; text-align: center; font-size: 10px; font-weight: 700;
  color: var(--ink-2, #6B5B82); opacity: .5; }

/* ============================================================
   УНИВЕРСАЛЬНОЕ ПРАВИЛО ЭКРАНА. Чтобы не плыло нигде.

   Любой экран игры и любой выезжающий лист устроены одинаково:
       шапка (не сжимается) → тело (скроллится) → подвал (не сжимается)
   Беда была в том, что подвал липкий и с полупрозрачным градиентом:
   он ложился ПОВЕРХ последних строк тела, и до них нельзя было
   ни дочитать, ни дотянуться пальцем — ровно это и видно на жалобе
   «не нажимается». Внутри колонки подвалу липкость не нужна вовсе:
   он и так всегда внизу.

   Правило: подвал — обычный блок колонки с ПЛОТНЫМ фоном, тело —
   единственное, что скроллится, и у него снизу воздух, чтобы
   последняя карточка не прилипала к кнопке.
   ============================================================ */
.mq-sheet__card > .mq-foot,
.mq-sc > .mq-foot {
  position: relative;
  bottom: auto;
  background: var(--paper);
  box-shadow: 0 -10px 18px -14px rgba(45,27,69,.5);
}
.mq-sheet__body { padding-bottom: 14px; }
/* тело экрана: всё, что между шапкой и подвалом, скроллится само */
.mq-sc > .mq-maker,
.mq-sc > .mq-sheet__body { min-height: 0; overflow-y: auto; }

/* Лист не должен касаться кромки рамки: при уменьшении на ноутбуке кнопка
   «Поменять класс» выходила за низ на десяток пикселей и переставала
   нажиматься. Запас снизу решает это при любом масштабе. */
.mq-sheet { padding-bottom: 18px; box-sizing: border-box; }
.mq-sheet__card { max-height: calc(86% - 18px); }

/* ТРЕНИРОВКА В ПАЛАТЕ. Место, где учатся: заклинание можно попробовать,
   ошибка ничего не стоит. Без этого лист был справочником, в котором
   ребёнку нечего делать. */
.mq-hint-row {
  margin: 0 0 2px; padding: 0 2px; font-size: 12.5px; font-weight: 700; line-height: 1.4;
  color: var(--ink-2, #6B5B82);
  overflow-wrap: anywhere;          /* длинная фраза не должна уезжать за край листа */
}
.mq-scard--try { cursor: pointer; position: relative; }
.mq-scard--try:active { transform: scale(.99); }
.mq-scard__try {
  margin-left: auto; align-self: center; flex: 0 0 auto;
  font-size: 11px; font-weight: 800; color: var(--add, #2E9D6B);
  background: var(--add-bg, #E4F7EE); border-radius: 999px; padding: 3px 9px;
}
.mq-try {
  background: var(--card, #fff); border-radius: var(--r-s, 12px);
  padding: 11px 13px; margin: 2px 0 4px; box-shadow: var(--shadow);
}
.mq-try__q { margin: 0 0 9px; font-size: 14.5px; font-weight: 800; line-height: 1.35; color: var(--ink); }
.mq-try__q small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.mq-try__opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mq-try__opts .mq-opt { min-height: 42px; font-size: 16px; }
.mq-try__say { margin: 9px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.mq-try__more { margin-top: 9px; width: 100%; min-height: 40px; font-size: 14px; }

/* ПАМЯТКА МЕСТА. Первый раз разворачивается сама, дальше — под кнопкой «?».
   Без неё ребёнок приходил в Привал и не понимал, зачем он тут. */
.aqg__help {
  flex: 0 0 auto; width: 30px; height: 30px; margin-left: auto; margin-right: 6px;
  border: 0; border-radius: 50%; background: var(--card, #fff); color: var(--ink-2, #6B5B82);
  font-size: 15px; font-weight: 900; cursor: pointer; box-shadow: var(--shadow);
}
.aqg__memo {
  margin: 8px 0 2px; padding: 10px 12px; border-radius: var(--r-s, 12px);
  background: var(--add-bg, #E8F6EF);
  font-size: 13px; line-height: 1.45; color: var(--ink, #2D1B45);
}
.aqg__memo b { display: block; margin-bottom: 3px; font-weight: 900; }
.aqg__memo span { color: var(--ink-2, #6B5B82); }
.aqg__memo--hidden { display: none; }