/*
 * Тиры финальных роликов (perfect / good / bad) в miniapp:
 *   perfect — 100%; good — от 50% до 99%; bad — ниже 50%.
 * Совпадает с порогом «Хорошо» в квизе и карточках, чтобы текст и анимация не расходились.
 */
/* Блок маскота + блоб: ширина как в ранних макетах (до 280×200) */
:root {
  --edu-mascot-wrap-max-w: 280px;
  --edu-mascot-wrap-max-h: 200px;
  --edu-mascot-margin-top: 4px;
  --edu-mascot-result-mb: 8px;
  /* Заголовки экранов (mode-hero / results-hero) — единые отступы */
  --edu-hero-pt: 10px;
  --edu-hero-px: 20px;
  --edu-hero-pb: 10px;
  --edu-hero-h1-mb: 4px;
}

.edu-mascot-wrap {
  width: 100%;
  max-width: var(--edu-mascot-wrap-max-w);
  aspect-ratio: 1;
  max-height: var(--edu-mascot-wrap-max-h);
  margin: var(--edu-mascot-margin-top) auto 0;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  height: auto;
}

.edu-mascot-blob {
  position: absolute;
  inset: -6px;
  z-index: 0;
  border-radius: 58% 42% 63% 37% / 47% 55% 45% 53%;
  background: var(--accent, #4f46e5);
  opacity: 0.12;
  animation: edu-mascot-blob-morph 6s ease-in-out infinite;
}

@keyframes edu-mascot-blob-morph {
  0%, 100% { border-radius: 58% 42% 63% 37% / 47% 55% 45% 53%; }
  33%       { border-radius: 40% 60% 45% 55% / 60% 38% 62% 40%; }
  66%       { border-radius: 65% 35% 50% 50% / 40% 62% 38% 60%; }
}

.edu-mascot-video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  background: transparent;
}

/* Главная: маскот в шапке, тот же максимум по стороне */
.edu-mascot-wrap--header {
  width: min(var(--edu-mascot-wrap-max-h), 100%);
  max-width: var(--edu-mascot-wrap-max-w);
  aspect-ratio: 1;
  max-height: var(--edu-mascot-wrap-max-h);
  margin: 0;
  flex-shrink: 0;
}

.edu-mascot-wrap--result {
  margin-bottom: var(--edu-mascot-result-mb);
}

/* Круглая back-кнопка: зеркало .close-btn слева. */
.back-btn {
  margin-right: auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.07);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted, #6b7280);
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.back-btn:active { background: rgba(0,0,0,0.14); }
.embedded-mode .back-btn { display: none !important; }